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.
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.
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
source: net.tutsplus.com
