Photo by Steven VanDesande Jr on Unsplash

to push my engineering career forward and improve my overall wellbeing

This year ends up being a turning point for me. For the past couple of years I’ve been working like crazy… but not always in the most smart or effective way, whereas recently I have managed to implement several things from what I’ve learn before in a better way.

So if this article comes across as a pat on the back… well, it may be so, a little bit. I believe it is worthwhile to be grateful to other people and, yes, to yourself too. Also it’s not like I don’t have any regrets. Basically any point on the following…


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve talked about code coverage and changes panels and today…

It’s the last day of the DevTools advent calendar! It went so quick! Let’s do a couple more random tips, shall we?

67. Use console.log in callback directly

Often I find myself in a situation where I’m not entirely sure what gets passed into a callback function. In such case I add a console.log inside to check that.

It can be done in two ways though: either use console.log


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve had a couple of Network tips; today let’s continue the Drawer tips we started the other day and talk about 2 more of the useful tools hidden in there:

65. Check the code coverage

A lot of the code that ends up on your page is not actually needed. Maybe it’s a some big chunk of JavaScript from an external library, maybe some CSS rules on forgotten selector that doesn’t match anything anymore.

To get a nice…


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve played with snippets, today let’s talk about network:

61. Hide network overview

Are you usually looking into the Network panel to:

  • see that requests timeline
  • or maybe just the requests list — to check the statuses, sizes and responses?

My bet is that it’s the latter. If that’s the case there really is no point in the Overview section taking around half of the Network’s real estate. Hide it.


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we have seen some DevTools Workspace magic, today we’ll play with snippets:

59. Snippets

Sometimes I use JavaScript as automation tool to work with 3rd party websites and apps.

Let’s say for example that I’d want to see how many people clapped on all of my Medium posts. Medium doesn’t provide such total number, so I’ve put together this small script:

$$('td:last-child .sortableTable-number')
.map(el => parseInt(el.innerText))
.reduce((total, value) => total + value);

When I go…


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve covered several panels hidden in the DevTools Drawer, today it’s a Workspace day:

55. Edit your source files from Chrome

Sometimes it’s easiest to edit the code right where it’s evaluated — in the browser. If you just drag and drop your project’s folder into the Sources panel, DevTools will synchronise the changes you make there with the actual file system.

This is super handy for those quick fixes! …


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve started looking into the drawer, today see a couple of interesting tools hidden in there.

52. Control the sensors

If you are using a geolocation API in your application and want to test it, you probably wouldn’t want to drive around all over the world just to do that (there are far better reasons to travel 😉).

Sensors panel located in the Drawer lets you emulate a specific location. You can choose from the predefined places…


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve seem some ways to improve logs readability in the console. Today let’s talks about the powerful set of functionalities hidden in the DevTools drawer:

50. The DevTools drawer

Chrome DevTools has a lot of great number of apparatuses divided into its 9 tabs (Elements, Console, Sources, Network, etc…) — but that’s actually just a part of it! There is a “parallel” set of tabs, that are hidden below the main window. …


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve covered DOM and Ajax breakpoints. Today let’s start the week by going back into console!

48. For more readable logs— add brackets!

If you console.log even a single variable you might forget (or get confused about) which one was that. Things get event less readable if you have multiple variables to log.


part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve had some “guest tips”. Today let’s look into some ways to trigger a breakpoint.

45. DOM breakpoints

Is Some script changing a part of your DOM and you’re not quite sure which one or when? Add a DOM breakpoint. You can listen to node being added or removed, or its attribute being changed:

Tomek Sułkowski

Frontend trainer, Angular enthusiast, family man, https://twitter.com/sulco

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store