Google Chrome

Google Chrome is the most popular browser nowadays, hands down. And is certainly the most popular browser between web developers. Not just because of his speed and simplicity, but mainly because of his almost daily realease and powerful set of ever expanding developer features that turned this browser into a must have tool.

On the old days of web development you had this horrific javascript errors that, if you were lucky, it would give you the line number where the error occured (most of the times it didn't). Remember using alert() all over the place? That was bad. And the same with the stylesheet files, where you couldn't figure it out why it wasn't showing up on the page.
You had to change the file, save and refresh the browser. All. The. Time.

This is the first of a set of articles that I'll share with you the awesomeness of Chrome Developer Tools that allows you to do code live-editing, JavaScript debugging, and a bunch of other stuff that helps you improve your webpage performance and your workflow.

To open the Chrome Developer Tools window you can use the keyboard shortcut:

Mac: ⌥ + ⌘ + i
Windows: Ctrl + Shift + i

Or use the menu menu

Menu > More tools > Developer tools

This will probably open a docked window on Chrome, but you can see it on a separate window if you want by clicking on the icon Undock window.

Elements

The first tab you see on the Developer Tools window is the Elements tab. On this tab you will see all the page HTML on the left side and the CSS of the selected element on the right side.

HTML

The HTML you see is a representation of the DOM - Document Object Model, that basically is a collection of all the elements that combined make your webpage look the way you see in your browser.
They are shown in a tree format, where you can collapse every element in a way to hide all the inner elements, by just clicking on the ► symbol, or double-clicking the element.

Another way to navigate through the DOM is using the arrow keys. Use the up (↑) and down (↓) arrows to select the immediately above and below elements, and the right (→) and left (←) to expand and collapse, respectively.

Also, when navigating through the DOM, the Elements panel shows a breadcrumb trail in the bottom bar where the highlighted node is the currently selected element, and while hovering with the mouse cursor it will reflect on the webpage. Clicking on a different node will change the selected element.

Elements breadcrumb

Inspect element

By navigating on the HTML side, when you click on an element the browser will highlight that element on the webpage, so you know which element you've just selected. But you don't have to go through all the elements on the HTML until you find the element you want.
If you right-click on the element (a button, a label, whatever you want to check) a menu will popup and you'll find a Inspect element option. Clicking on it will take you directly to it.

Selecting elements

Another easy way to select an element is by clicking on the magnifying glass icon Element selection tool on the top left of the window. Then just swipe through your webpage, it will highlight every element on it, and click on the disired element you want to inspect.

Sometimes the element you're looking for is hidden, so you won't find it with the above method. In this case you can use the search, just hit Ctrl+F (or ⌘+F on Mac) and a textbox will show on the bottom. In this case it might be handy to know the name of the id or class of the element, or any of it's content.

Add / change / delete attributes

Another great feature of Developer Tools is the ability to change the contents of the page however you like. Using the screeshot above, to change the text inside the selected button, you just have to double-click the value attribute, an edit area will show up and then you can set the value you want.

Live editing

Live editing

Live editing

If you want to stop editing the DOM just hit the esc key.

Not only you can edit existing attributes, but you can also add new attributes. Just right-click on the element (on the HTML view) and select Add attribute.

Live editing

Live editing

In case you want to change more than one thing on that element, or add a new element next to it, just click Edit HTML and change the HTML code as you like.

Live editing

Live editing

Let's add a new span element after the input we just changed before.

Live editing

Live editing

This is just a simple example, but you can change anything you want on the page. You can edit just like you would on your code editor, but with the advantage that you don't have to go back and forth between it and the browser.

In case you want to delete any of the element in webpage you can choose the option above and clear all the code inside, or just right-click the element you want and choose Delete option on the menu.

Live editing

Location

In case you don't want to change the element attributes but you're still in doubt about the best location for each element on the webpage, there's a awesome feature on Dev Tools: drag-and-drop!

Element positioning

Sometimes, when using the Developer Tools window docked with the browser view, there's little room for the webpage. In case you're selecting an element that is offscreen you can use the Scroll into view to scroll the webpage to the point where that particular element is.

Scroll into view

CSS

As you might noticed the Elements tab is divided in two. On the right side of the window is where the CSS for the currently selected element is shown. The styles you see are computed from all the stylesheet files loaded and, you might also find, some native styles from the browser's user agent.

In the image below we're selecting the Sign In button on google homepage.

Styles

On top we see the element inline styles, that is, if the selected element have a style attribute here is where the styles will be.

Next comes all the styles that were loaded from the stylesheet files. In this case the anchor element has three CSS class (gbhc, gbb, gb_a) so you'll see all the styles related to these classes and the given anchor element.

Styles

Add / change / delete styles

The easiest way to make changes is to use the checkboxes you see next to the styles. If you uncheck a style it stops beeing applied to the selected element.

Uncheck styles

As you can see on the image above, the first style (color: #666) is strikethrough. That is because there's another class that is overriding that style. If you continue scrolling down you'll find which class is applying the color and also where that class is defined.

But just like with the HTML, you can change the CSS styles the way you want. If you click on it you can set your desired value.

Edit styles

If you want to add a new style you can use the + sign at the top right corner, where you can specify the CSS selector and the given styles, or you can click near the closing bracket of the class you want to edit, and enter the property and respective value.

Add styles

While we're typing the Dev Tools show us some hints for the properties and values, and we can use the tab key (⇥) to take advantage of the autocomplete feature.

To delete a style, just click on the value and clear it. Or you can use the checkbox to unset it.

Element states

Some styles only show up when we are hovering the element with the mouse cursor, and it wouldn't be practical to set the style and then check it using the mouse everytime we change it. In these cases there's a great feature where we can force the state of the element, using the Force state icon, next to the + sign, on the top right.

Force state

If you set the hover state you can see the button styles changing. Then you can change the hover state class styles (like adding new color) and see them reflected on the webpage.

Color picker

When setting color values there is a list of color names you can use, but if you want to use a particular color you need to set the given hexadecimal or RGB code. In case you don't know the exact code you can use the color picker. Just click on the little coloured square next to the code and pick one that suits best.

Color picker

Animations easing functions

Chrome Developer Tools also allows you to edit the CSS animations right on the browser. On the left side of the CSS transition property you'll find a small purple square with an white easing function inside. Just click and play with it until you find the right easing function for your animation.

Easing functions

Also, there's a play button on the top right of the window that will give you control of the animations speed.

Easing functions

Other tabs

There are other features on the Elements tab that might become handy when inspecting a webpage:

Computed

Shows all the style of the selected element, in alphabetical order. While hovering the styles a magifying glass will show on the left, and if you click on it, it will take you to the corresponding stylesheet and class.

Event listeners

Check all the events bound to the element, by type (click, blur, focus, keyup, ...).

DOM Breakpoints

A DOM breakpoint allows you to pause execution whenever a DOM element, that was associated to the breakpoint, is modified in some way. It's like the breakpoints on JavaScript code (we'll get there) but associated to a DOM element.

Conclusion

This is the first article of a series about using the Chrome Developer Tools. On the next articles I'm going to review in details the other tabs.

You can check the Chrome Developer Tools documentation for more info.