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…

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…

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.

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…

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! …

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…

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. …

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.