Chrome Dev Tools: Markup and Style
It is necessary for web developers to understand and know how to use browser developer tools, and in this tutorial, I will introduce you to the Chrome Developer Tools. You’ll learn some of the basics, starting with marking up and styling a web page.
A quick note to existing developer tool users: The purpose of this tutorial is to provide a relatively basic introduction to Chrome’s developer tools. If you use any browsers’ development tool, such as Firebug in Firefox or IE’s development tools, then you may find that you already know a lot of the information covered in this particular tutorial.
Introduction
Browser development tools allow you to drill down into a web page and inspect just about everything in the page. For example you can:
- view an element’s corresponding HTML code (for example a header of some sort)
- get an overview of the CSS used in a page and how CSS applies to an element
- modify CSS in real time and visually see your changes in the browser
- view the HTTP requests made by the browser
- run JavaScript code within the context of the page
- identify performance bottlenecks and retrieve a variety of performance metrics
- poke around with offline resources to find out what data the page in question is storing locally
Browser Developer Tools
Before digging into Chrome’s developer tools, I want to give you just a brief look at the development tools provided by the major browsers. Note that this isn’t a comprehensive look at these tools and their features, but I do provide basic information for each tool.
Chrome Developer Tools
You can use the developer tools within Chrome, Chrome Canary and even Chromium.
- Browser Download: google.com/chrome
- To open: Control + Shift + i
- Documentation: developers.google.com/chrome-developer-tools
- Notes: Can also be opened by right-clicking an element on the page and selecting ‘Inspect Element’
Safari WebKit Inspector
Safari uses code from the Web Inspector repository; however, you may find that it’s not updated as often as Chrome.
- Browser Download: apple.com/safari/
- To open: Control + alt + i or “Develop” > “Show Web Inspector”
- Documentation: developer.apple.com/library/safari/documentation
- Notes: Can also be opened by right-clicking an element on the page and selecting ‘Inspect Element’