If you’re the curious developer type like me, you may have found your way to Chrome DevTools, the advanced new way to view the source and inspect the code of any webpage. The old “View Source” option (Ctrl+U) simply doesn’t cut it anymore.
In this article I am glad to introduce you to what I consider the Web Developer’s new best friend, Chrome Developer Tools. This comprehensive suite of tools were built to make the web developer’s life easier. Hopefully you will agree and enjoy some of the benefits after reading.
The Chrome DevTools inspection window is launched by several handy keyboard shortcuts such as Ctrl+Shift+I or F12 or by right clicking any area or element of a page and selecting Inspect Element.
Chrome DevTools Shortcuts
This awesome set of tools built right into your browser allow you to inspect and edit page content, HTML and CSS on-the-fly, no coding knowledge required. But, that’s just the beginning. Continue reading to discover all that DevTools has to offer.
Inside Chrome DevTools
Elements Panel
The main Chrome Developer Tools window displays the complete DOM tree of your page’s HTML code. You can select an individual element and right-click to or double-click to interact with it.
The smaller frame to the right allows you to edit CSS styles and view individual DOM properties.
Tips on Using the Elements Panel
- Click on the white-space around the Matched CSS Rules styles to add a new line.
- Use Control+F to search for text or code inside DevTools.
- Mouse over or inspect any DOM element to view its exact pixel dimensions.
- Drag and drop any node to re-arrange its position on the page.
- If you use a caching plugin for WordPress find the plugin option to disable caching for known users so you don’t have to delete the cache every time you make an update.
- If you make some edits to CSS rules that you like, simply copy and paste them directly to your source CSS file.
For more advanced developers, additional panels feature more tools which enable you to view page Resources such as scripts and images, Network performance information, script debugging information under Sources, and other useful tools for optimizing.
Below I have outlined brief descriptions of each panel and their uses.
- Resources - The resources panel allows you a clean overview of all the files, images, scripts, cookies and other data loaded by a page.
- Network - View real-time information on resources downloaded over the network. This can help identify files that are missing or taking a long time to load.
- Sources - Inspect and edit the source of scripts that are loaded by the inspected page. This is an invaluable tool for debugging JavaScript.
- Timeline - Simply hit the record button and navigate to your website to view a live stream detailing how long it takes for each resource to load. This can help you find areas for improvement.
- Profiles - Similar to the Timeline panel, the Profiles panel offers more advanced profiling of JavaScript execution time.
- Audits - Yet another tool dedicated to speed optimization (and surprisingly not the last), the Audit tool provides an analysis of your stylesheets, images, scripts and more with suggestions for improvement.
- Console - More advanced developers will enjoy the ability to enter commands and interact with JavaScript code from a command line style prompt.
Essential Bonus: Page Speed Extension
You might have guessed by the amount of focus these tools place on site optimization that page loading times are extremely important for web developers to pay attention to. Google has recently let the word out that page speed now plays a major role in search results rankings.
The PageSpeed extension for Chrome Developer Tools is an amazing tool developed by Google that scans your site, reports the loading times and grades your site.
A comprehensive set of suggestions called PageSpeed Insights are offered for optimizing your site for speed. I have checked off nearly a dozen items to get DotSauce Magazine loading super-fast, but I still have a list of things I can improve on.
Correcting errors and making the suggested updates will unsure the best experience for your users and ultimately improve your search rankings.
Advanced Bonus: Tincr Extension
Advanced developers who are working with a local staging environment, prepare to be amazed.
The Tincr extension for DevTools enables really cool features like live reloading of CSS and JavaScript edits and the ability to save changes directly from Chrome.
Browser Size & Device Testing With DevTools
I recently discovered a neat tool for device testing in the Chrome Developer Tools settings. Click the small gear icon (
) in the bottom right of the window to open the DevTools Settings overlay.
Select Overrides to access an awesome set of features for overriding your user-agent, browser window size and emulating touch events.
Further DevTools Resources
Chrome DevTools has it’s very own web series. It’s that cool.
To learn and discover insightful tutorials and time-saving tips related to Chrome Developer Tools check out The Breakpoint web show. There are currently 8 episodes featured in the series.
Want a complete step by step walk-through? Take on the free Discover DevTools course at Code School. This class features 17 video lessons to get you up to speed.
Get To Know Your New Best Friend
If you haven’t already, give it a try! Launch the DevTools window now and poke around some. I don’t mind if you peek at my code.
The more you familiarize yourself with DevTools and all its features, the more useful and time-saving it becomes.
I would love to hear how you are using Chrome DevTools during your web development work-flow or on a day-to-day basis. Please leave a comment below with your thoughts, praise or questions about DevTools.
