Notes from JS Conference Workshop: Mastering Chrome Developer Tools

There’s an ability to blackbox JavaScript libraries like jQuery so that when you step over lines of code, you’ll step over these 3rd party libraries. There’s also an ability to set breakpoints on event listeners which can be very handy. Under Settings, you can globally blackbox 3rd JS libraries so you don’t have to blackbox every time you open Chrome. There’s also the ability to create conditional breakpoints, e.g. to break when your about to execute an XHR (AJAX) request to a certain URL.

When you edit CSS in the Elements tab, you can have those edits write to the source CSS file, and vice-verse from the source file to Chrome. This only works for CSS. To do this, drag your CSS file or entire project folder into the Sources tab. If Chrome can’t auto-map, you can manually map the CSS file.

When you’re inspecting an element in the Elements tag, you can click and choose “Scroll into view” to have Chrome scroll you to where that element is on the page.

For the workshop, we used Google Chrome Canary with is bleeding edge features. It’s got the latest and newest features but may break.

If your server is running HTTP 1.1, you should combine JS files and CSS files to minimize requests. WebPack other bundlers can do this automatically. If you’re running HTTP 2, you don’t need to.

The Performance tab lets you analyze page speed and throttle network and CPU conditions.

In the Network tab, you can enable screenshots to see how a pages looks over time as it gets rendered.

Of all the things you could do, image optimization is still #1 due to their large file sizes. After that, bundle JS and CSS and optimize code.

Google has started a new project called Google AMP (Accelerated Mobile Pages). It’s an open standard for any publisher to have pages load quickly on mobile. On Feb 24, 2016, Google officially integrated AMP listings into its mobile search results.

https://www.ampproject.org/

In the Memory tab, you can check the JavaScript heap as a graph. If the graph looks like a jigsaw that keeps stepping up and up, then you probably have a memory leak. Take your first heap snapshot and then wait and then take another heap snapshot and compare the two and look for the biggest deltas. If you see many like red tick marks, then that’s where “page jank” occurred. In the Profile pane, look for long (wide) blocks. The Bottom-Up chart can show you the longest-running scripts. When you take a heap snapshot for the first time,

Page jank is layout thrashing or stuttering and occurs when the browser can’t repaint the page quick enough which causes flashing or a feeling of some elements getting stuck. This often occurs when you have a sticky nav and you’re binding to the on scroll event which triggers many events. To visually check for page jank, I forgot how to do it but there’s a way to enable something and when you interact with a page, if you see flashing green, that means the CPU is overloaded causing page jank. Some effects rely on the CPU and others on the GPU. It’s better to write code that would use the GPU whenever possible.

Examples of things that could cause page jank are

1. fixed position elements (e.g. sticky navs). To solve this, add the CSS rule will-change: transform; on fixed position elements.
2. borders of an element that change on hover will often cause the browser to rerender the element and its parent.
3. when you’re dynamically adding 3000 table rows one by one. To get around this, create a document fragment with all 3000 rows in memory and then add the entire fragment to the DOM once. This improves performance and prevents layout thrashing.

One website that lets you test page jank is http://koalastothemax.com/.

Chrome has the Audits tab. But, if you hit the shift key 7 times, you can reveal Audits 2.0 which contains many more features.