Faster HTML/CSS Workflow with Chrome

Chrome has fast become a popular choice amongst web designers and users for its speed, ease of use and support for adopting early experimental features such as modern CSS3 properties. One of the reasons for its popularity amongst web designers and developers is the developer tools which bundle with the browser. Under the hood, Chrome Developer Tools is a web application that is written in HTML, JavaScript and CSS. The app is triggered at Javascript runtime. Once triggered it allows you to interact with web pages and play around with them. In this article Aaron Lumsden is going to be looking specifically at how these tools can help speed up your HTML and CSS workflow.

First off, you’ll need to open up Chrome and navigate to a page of your choosing. The dev tools can be accessed in one of three ways. You can right-click on a web page and select “Inspect Element”, you can select the spanner wrench in the top right hand corner of Chrome and select “Tools > Developer Tools”. The third and final way is to use a series of shortcuts that Chrome has made available. If you’re a web designer you’ll find yourself spending quite a bit of time in the ‘Elements’ section of the app. This app lets you see everything in the document object model (DOM for short). It displays the DOM like a tree, so that you can easily find your way around the html document. The great thing about the inspector tool is that as you hover over a DOM element in the tree it will highlight the relevant tag on the web page you are viewing.