Faster HTML/CSS Workflow with Chrome Developer Tools
In this tutorial I'll be looking at Chrome developer tools, specifically how they can help speed up your HTML/CSS workflow. I'll also look briefly at some other dev tools that are available.
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. At the 2012 Google's I/O conference it was announced that Chrome now has over 310 million active users - almost double the 160 million users it boasted the previous year.
Google Chrome was first released on September 2nd 2008. It was introduced as a BETA for Microsoft Windows XP and later versions, by 2009 Google had released Beta versions for both OS X and Linux. Google Chrome 5.0 was announced on May 25th 2010. This marked the first stable released to support all three platforms.
One of the reasons for its popularity amongst web designers and developers is the developer tools which bundle with the browser. These developer tools allow us to test and debug code easily and efficiently. Without these tools your workflow might be a lot more difficult.
Google describe Chrome's developer tools as
The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access into the internals of the browser and their web application. The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project.
In this article I'm going to be looking specifically at how these tools can help speed up your HTML and CSS workflow. I'll be aiming at designers who have not yet necessarily experienced Chrome's dev tools but I'm sure that even if you are familiar with them, you'll learn something along the way too.
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 to us:
On Windows and Linux, press
- Control - Shift - I keys to open Developer Tools
- Control - Shift - J to open Developer Tools and bring focus to the Console.
- Control - Shift - C to toggle Inspect Element mode.
On Mac, press
- ⌥⌘I (Command - Option - I) keys to open Developer Tools
- ⌥⌘J (Command - Option - J) to open Developer Tools and bring focus to the Console.
- ^⌘C (Control - Option - C) to toggle Inspect Element mode.
The above showing the context menu when you right click on a webpage in Chrome.
HTML Tools: The Elements Pane
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. By selecting the little magnifying glass in the bottom left hand corner of the inspector you can easily select a dom node directly on the web page you are viewing and it will be highlighted. This can be a great time saver for if you want to quickly check the name or type of attribute an element has on your page.
The Editor lets you find elements and their relating CSS ID or class quickly and easily.
You can edit the HTML of the dom nodes, by double-clicking them. From this you are able to change attributes such as values, ID's and classes or even the HTML tag type.
When you right-click on a node it will bring up a context menu, which lets you copy the html for it, or delete it completely. You can also copy the XPath of the node. The XPath is a query language for selecting nodes from a document. This can come in useful when using things such as Yahoo's Query Language (YQL).
One thing you can also do is drag HTML elements around the page. To do this select a node and drag it somewhere else in the tree. This will then be reflected on the web page that you are inspecting.
Along the bottom of the elements inspector lives a bar which allows you to navigate along the elements parents. This leaves a trail of the selected elements ancestors, allowing you to view and find parent elements quickly and easily.
Another handy little feature of the elements panel is for when you're working with images. Simply hover over the image tag and you will be greeted by a little popup displaying the image, the dimensions of the image rendered and the original image size. The rendered size can sometimes be bigger than the original image size which can be caused when adding things like borders or padding.
It's important to note that the rendered size is referring to the rendered element size and not necessarily the size of the actual image.
CSS Tools: The Styles Browser
Chrome's developer tools come in ultra useful when it comes to debugging CSS. Sometimes CSS styles can collapse causing undesired visual effects to occur. By being able to inspect which styling rules are being applied to the element by the browser, we are able to find the root of the problem and rectify the bug.
The 'computed style' section lets you see what styles the browser's rendering engine is applying to the element. This is the final set of styles that are being applied to the web page. By clicking on the little arrow to the left of a particular computed style you can see where that style is descending from. So if you can't understand the reason as to why that div is persistently being styled with a black background, or why that text just won't go bold. Have a look in the computed style section and it will allow you to see what the browser sees.
Styles & Matched CSS Rules
The 'Styles' section and 'matched CSS Rules' work in a similar kind of way to each other. They both allow you to add, remove and modify CSS rules to an element. The 'element.style' panel allows you to add properties to that particular element regardless of the id or class it has - think of these as inline styles. This differs from the 'Matched CSS Rules' section as the rules that you change in this section will reflect on any other element with that particular ID or class.
You may sometimes notice that a rule has a style crossed out. This is usually because it's being overridden by another rule from another property. To get to the bottom of why it's being overridden you can use the 'Computed style' section as mentioned above.
More designers that I've spoken to recently are moving away from the approach of designing a specific site in an editing package such as Photoshop and Fireworks and are moving towards a "design in the browser" approach. This new approach allows you to see your work as the browser sees it.
Editing tools such as Photoshop have different rendering engines to those of browsers which may mean that fonts and colours appear different. It also puts the design in situ and lets you see how it appears in the browser. Not to mention the benefits that it has when it comes to designing responsively and for the vast array of device types that we now to have to deal with. Of course, software like Photoshop still plays a big part in my workflow although I find that I'm using it to create style sets nowadays, as opposed to actual layouts.
A handy feature for this new approach is the way that you are able to select colours. By clicking the gear icon in the top right hand corner of the 'Styles' panel you are able to toggle between different colour modes. They are:
- Hex colours - ie #000000
- RGB - ie rgb(0,0,0)
- HSL - ie hsl(0, 0%, 0%)
If, for instance, you use black and then view the live web page and notice that it's a little too dark for the aesthetic that you're aiming for, then you can simply click the little colour box next to property value and it will bring up a color picker which then allows you to knock down the brightness of the black a little bit. This comes in really useful for when designing on the fly.
Chrome's color picker makes it easy to experiment with your designs in real time
By adjusting margins, paddings and positioning we are able to see in real time how much width we need to give that div to make it position correctly. This certainly saves loads of time over having to go between the browser and your code editor then having to save your document and refresh.
In the upper right of the 'styles' next to the gears icon lives a little marquee icon. By clicking on this we are able to toggle between the different states of an element. These different states are
By activating one of these the chosen state will stay on and you will be able to edit its properties.
Showing the different states that you can select.
Live Editing and Revision History
One of my favorite features of the dev tools styles inspector is the ability to be able to quickly find whereabouts in your stylesheet the property that you are editing lives. If you look to the right of the property you are editing you will see the name of the stylesheet and line number as to whereabouts it is. By clicking on the link you are taken to the 'sources view'. This basically shows your stylesheet in full. From here you are able to work on it just as you would in your code editor. The only difference being is that you see your results in realtime.
You can also save your stylesheet by sliding out the side panel. If you right-click on the name of it a new context menu opens where you can choose to open the stylesheet in the browser and save it. The great thing about this is that by clicking on 'Local Modifications' you are able to see a complete revision history of all the changes you've made. So if you've messed up and want to revert to some changes you made ten minutes ago then Chrome has your back.
You can now save your edited stylesheet directly in developer tools. This also gives you a revision history of the changes you've made recently.
Back over in the Elements sidebar we have the metrics panel. With this panel you are able to view and make changes to the current element's box model parameters. This gives a visual representation of these parameters which include:
Chrome Developer tools feature amongst the most useful tools for speeding up my HTML/CSS web design workflow.
Of course there are many other usages for them, such as analyzing page load times and performance of scripts. There are also other tools which do similar kind of jobs such as Firebug for Firefox. The latest version of Firefox also comes with some helpful tools that have not yet been implemented in Chrome's equivalent, although hopefully they will be one day soon. These include things like '3D' view. 3D view allows you to see a 3d representation of a web site that you can rotate and orientate around. This makes it easy to visualize the nesting of your content. They have also introduced "responsive mode" which puts the website inside a frame which you can resize to see how it will appear at different breakpoint sizes.
I'm not necessarily saying Chrome's developer tools are the best out there. For me, its the only one that I have ever used and I know how much time it has saved me and my workflow. That's why I wanted to share with you some of the tips that I have discovered and hope that they save you a bit of time too!