This is part of a series on utilizing the Chrome Developer Tools. View all posts in this series.
Google Chrome has gained immense popularity in the past few years for its speed, ease of use, and integration into the Google suite of products. For developers, it also offers some of the best testing and debugging tools around. Outside of Google search itself, the Chrome Developer Tools have become one of the most useful resources our team relies on in our daily development workflow.
What are they?
The Chrome Dev Tools are like a Swiss Army Knife for web developers. They give developers the ability to view and manipulate pages, debug and test code, audit for performance and accessibility, and much more. Best of all, they’re available in the browser for free; no extra software or extensions to install.
How do I use them?
Probably the easiest way to see the power of Dev Tools is by doing some basic prototyping/page manipulation. With Dev Tools, you can make quick changes to any element on a page and preview the results in real-time before diving into any code.
Try it: right-click any element on a web page and then choose “Inspect” from the menu. This will launch the Dev Tools “Elements” panel and show you the underlying HTML of the page you’re on (with that element highlighted). In the corresponding “Styles” panel, you can see which CSS styles are directly affecting that element and tweak their values.
Try changing some properties like
padding and watch the element update immediately. Pretty cool!
Keep in mind the changes are only temporary. Refresh the page and things go back to their previous state. But if you need a quick and dirty way to test an idea, it’s hard to beat the immediate feedback you get from that visual editing experience.
You don’t need to be a developer to get some value out of these tools. In the coming weeks, we’ll dive deeper into some of the more powerful features of Chrome Dev Tools, and talk about some practical ways they can help you get the most out of your website. Stay tuned!