Codemash 2018 – Chrome Dev Tools

Rick Herrmann
I had the good fortune to be able to attend the Codemash Conference again this year. Since the conference started more than 10 years ago, I have only missed it twice. As in past years, there were a number of good sessions over the four days of the conference. Over the next few weeks I will be blogging about a few of them. To start with, I want to talk about the session I attended on Chrome Dev Tools by Greg Malcolm (@gregmalcolm).

Over the past year, most of the development I have done has been on the front end using Angular. As a result I have spent a lot of time using the Chrome Developer Tools to help troubleshoot things like layout and css issues, javascript debugging, and network/API call activity. Since I spend a lot of time in Chrome, I was pleased to come away from this session with some things I can use right away. (Please note that this is not meant to be an exhaustive review of the Google Chrome Dev tools – I am just highlighting the features presented in the session.)

Responsive Device Mode

Whether you are building a site specifically for mobile devices, or just want to make sure your desktop-targeted site still looks OK on smaller devices, the Dev Tools Device Toolbar will make this much easier to do. To enable the device toolbar, click the icon near the top left of the menu:

Once enabled, you get an option to choose either a responsive layout, or an actual specific device to emulate:

Once enabled, you get an option to choose either a responsive layout, or an actual specific device to emulate:

The responsive option allows you to adjust the display size and see how the site renders at various sizes. For specific device emulation, the screen size is set for you and there is an option to change the device orientation. In either case, you can see the css media queries that are being applied. These features make it possible to develop for a variety of devices without needing to have access to the actual phone, tablets etc.

 

Element Selector

Being able to select a specific element on a page is certainly not a new feature for browser dev tools. But CHrome as a few features that I think are particularly useful. One is the ability to toggle the element state from the toolbar. For example, if an element has some visual behavior when it is hovered over, that can be tricky to debug because you can’t both hover over the element and interact with the Dev Tools at the same time. However, in the Styles tab of the Elements section, there is a Filter feature. Clicking :hov displays options to force the element state to :active, :focus, :hover, and :visited. This enables to you simulate these states without having to interact with the element directly.

Another nice feature for element style debugging is the computed properties tab. This shows all of the style properties that are applied, which css file (and line) they come from, and even which properties have been overridden.

 

Console

A common way to debug JavaScript code is to use console.log statements in code to write messages to the console. Console.log messages can be viewed on the console tab, and can also be used directly in the console at a breakpoint in code. However, “log” is not the only function available on the console object. If you type “console.”, intellisense shows numerous other functions available:

console.table is useful for displaying the contents of an array table with columns:

This also works for displaying all of the properties of a single object:

Another convenience feature of the selected element is the $0 selector functionality that is automatically applied. So for example, you can select an element, and then reference that element in the console using $0. This actually works for the previous four previously selected elements as well using $1, $2, $3, and $4, while $_ will return the result of the last evaluated expression.

The $ operator can also be used to select other elements in the page the same way you would with jQuery – whether jQuery is loaded on the page or not.

Sources Panel

One of the very new Dev Tool features is in the Sources Tab on the left side called called File System. If you add the folder with your web application to the workspace, any edits you make in Chrome get persisted to the source file. Now when you make edits in the dev tools you don’t need to go back and make the same changes in your text editor. My experience with this feature is that it works great for ts, js, html, and css files, but for something like scss files – which are used to generate css – you still need a separate text editor.

There is also a Snippets tab where you can create and save snippets of code that run in the context of the browser.

Network Tab

The network tab gives you a variety of information about all of the different files that load when a page is viewed. It also shows details of subsequent API calls that occur after the page is loaded. One feature I was not aware of is the ability to simulate a slower internet connection to see the impact it has on how your page loads and renders. You can even simulate being completely offline. WHen you application needs to provide some basic functionality when you are disconnected – then this feature is a very valuable tool.

Conclusion

A complete review of all of the Chrome Dev Tool features is beyond the scope of a single blog post (or a single conference session). But I hope there are some items here that you can add to your debugging tool-belt for web applications. The Chrome Dev Tools Team continues to add features on a regular basis, and I will cover more of them in future blog posts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s