Chrome DevTools are the web developer tools built into Google Chrome.

- Wiki
10 articles, 0 books.

How to use a waterfall chart to diagnose your website's performance pains

Measuring performance is important and so important that we need a hash tag (#perfmatters) to discuss all the difficult scenarios and topics surrounding the question “How can I make my Website faster?”

You may already be familiar with the basic features of the Chrome Developer Tools: the DOM inspector, styles panel, and JavaScript console. But there are a number of lesser-known features that can dramatically improve your debugging or app creation workflows.

Increase your web development skill-set: Over 150 animated gifs which showcase how to use Chrome DevTools.

Chances are good you've opened your browser's dev tools at some point, used the network panel (or perhaps even Lighthouse) to assess performance, and discovered opportunities for improvement. Then you've refactored code, improved performance, watched metrics improve, and congratulated yourself. A job well done! Only you're not done, because a problem still remains: The tests you've performed are synthetic. They don't tell you how your site is performing for real users in the field.

Have you mastered the way to inspect the generated HTML and applied CSS? Do you feel confident in debugging JavaScript in the browser? I hope yes, because in this post we cover some advanced techniques using the Chrome DevTools.