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.
You had to change the file, save and refresh the browser. All. The. Time.
To open the Chrome Developer Tools window you can use the keyboard shortcut:
Mac: ⌥ + ⌘ + i Windows: Ctrl + Shift + i
Or use the 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 .
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.
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.
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.
Another easy way to select an element is by clicking on the magnifying glass icon 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.
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.
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.
Let's add a new span element after the input we just changed before.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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 icon, next to the + sign, on the top right.
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.
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.
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.
Also, there's a play button on the top right of the window that will give you control of the animations speed.
There are other features on the Elements tab that might become handy when inspecting a webpage:
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.
Check all the events bound to the element, by type (click, blur, focus, keyup, ...).
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.