Grow Volume 2: Becoming a Full-Stack Web Design Freelancer
Get your free copy of Grow Volume 2: Becoming a Full-Stack Web Design Freelancer sent to your inbox.
EmailBy entering your email - well also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.
Firstly, heres a quick refresher on how you would typically use Chrome Developer Tools. You would:
At this point, you can continue to inspect the elements on the page, and observe how the styles within the Styles Pane update. Note: the Styles Pane is part of the Elements panel and is labelled Styles.
With that out of the way, lets cover a few useful features youll find in Chrome Developer Tools [tested with version 86].
Its easy to get hung up on workflow-based features, but its worth remembering that sometimes these features help us as developers more than they help the user. The Performance Monitor, however, is primarily focused on metrics which do impact the user and their experience in using the website.
In fact, you cant get some of these metrics elsewhere: you wont find them in your code editor! Therefore, the Performance Monitor is certainly worth using, or at least worth learning about.
The Performance Monitor is a visualization of various front end performance metrics. Before we continue, heres how to open it up:
By following those steps, you should notice various metrics change over time.
To give you an example, as part of the Shopify editorial process, Im typing this article into Google Docs in my web browser. As I type, the Performance Monitor shows that the CPU usage fluctuates. When I stop typing, it drops to near zero percent. Interestingly, JavaScript memory usage [labelled as JS Heap Size within Chrome Developer Tools] remains high, yet fairly static throughout the writing process.
Bonus Tip: Creating event listeners in JavaScript, amongst many other operations, will consume memory [typically known as RAM]. The more memory your JavaScript consumes, the less memory that will be available to other tabs, and even other operating system applications.
The Performance Monitor is especially powerful in that it persists throughout page navigation. This means, given a common website use case, such as a shopping cart checkout or user registration, you can ask questions like these:
As a reminder, fluctuating metrics, or even high values for those metrics, do not always correlate with poor UX. While the Performance Monitor is great for a high level overview of the page, youll want to use more advanced performance profiling tools to determine the effects of such metrics. Such tools include the Chrome Developer Tools Performance panel and the Chrome Developer Tools Profiler.
Looking at the Performance Monitor, youll notice metrics like the following:
Ultimately, the metrics alone wont be enough to fix a problem. Chrome Developer Tools will inform you what is happening, but its for you to figure out why, and then create a fix!
You might also like: The 10 Most Useful Browser Dev Tools for Front End Developers.
The Media panel is one of those features which you could go most days without using, but its still helpful to know it exists for when you do need it.
The Media panel supports inspecting media, such as video, on the current page. To try it out:
If a .MP4 video is being played in a webpage, for example, you can view the following tabs within the overall panel:
Unless you are doing deep debugging, the data shown in the Properties pane will be enough to answer your questions, such as:
These questions can be extra useful when youre debugging a video with a custom video player.
High level pieces of information like these should be enough for most people, but if you need more detail, the Events pane can give you much more granular information, such as the internal video event which triggered during the lifecycle of the video. For example kBufferingStateChanged, is an event described as: ...a change to the buffering state of the video caused by either network slowness or decoding slowness.
Media debugging surfaces helpful information which was traditionally hidden away within the Chrome internals. Next time youre watching a video, open up the Media panel to see what properties your media has.
You might also like: The 20 Best Visual Studio Code Extensions for Front End Developers.
Accessibility tooling has existed in Chrome Developer Tools for a while, but now its even more robust.
You can emulate the effects of vision loss on your clients website to improve the user experience and ensure that its inclusive and usable by as many people as possible. One example is blurred vision, and there is an option to emulate it from within Chrome Developer Tools.
To emulate blurred vision, do the following:
If you want to view all the available vision loss emulations , follow these steps:
Some of the options include:
How you use this feature depends on your clients use case, website, audience, internal requirements, and in some cases, even legal requirements. Its possible that no changes are needed based on what you see from the emulations applied to your clients website. But, its important to be aware that this feature exists and to understand how to use it.
You might also like: What's New in HTML: 6 Native Elements You Can Use Today.
The code coverage feature in Chrome Developer Tools can inform you as to which parts of your code are unused. However, before continuing, its worth understanding what youre quantifying, i.e., at which point does the code count as unused?
For example: JavaScript, which is set to execute after the load event, will report as being unused before the load event. This sounds obvious, but its something to keep in mind. Unused code is not always a bad thing, since it depends on when you stopped recording and what the intentions are.
"Unused code is not always a bad thing, since it depends on when you stopped recording and what the intentions are."
Lets take a brief look at code which would be considered partially unused:
In the code example above, observe how the main.js file only requires one out of the two exported functions from animals.js. The function dog[], is essentially unused code, and its this which the code coverage feature of Chrome Developer Tools can bring to our attention.
With that out of the way, heres how to use the code coverage tool:
Youll find the following information in a code coverage recording:
In addition, you can click on a resource to view the exact lines of code which were unused.
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign upIn this article, we covered the following. You can:
All of the features we covered in this article can be accessed from the Chrome Developer Tools Command Menu [Cmd + Shift + P / Ctrl + Shift + P]. It features fuzzy search, so if you forget the full name is Performance monitor, you can type in Performance and scroll through the list of possible options until you find it.
Chrome Developer Tools has a heap of features which can highlight potential performance bottlenecks in your clients webpage. We covered a small subset of features, but its worth noting that Chrome Developer Tools includes many more panels which can assist you on your development and debugging journey.
Watch this space! Chrome Developer Tools is bringing more to the table, from CSS Grid Inspection, to a new version of Lighthouse. If you want to live on the edge and experiment with new features, you can give Chrome Canary a try.
What is your favorite Chrome developer tools feature? Let us know in the comments below.
Umar Hansa
Umar Hansa is a web developer and Google Developer Expert based in London, with a focus on writing tips and tutorials for the modern web. He blogs, tweets web tips, and has a course on Chrome Developer Tools.
Get design inspiration, development tips, and practical takeaways delivered straight to your inbox.
No charge. Unsubscribe anytime.
Youll start receiving free tips and resources soon.