Chrome DevTools are the web developer tools built into Google Chrome. Note from the DevTools team: we are more likely to be able to answer your question if you include a minimal, complete, and verifiable example!

- Wiki
9 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.