Elements Tab in Chrome Developer Tools

When I see people struggling with Internet Explorer Debug tools, or making a small UI change in the application and re-running the whole solution through visual studio, I feel like it's high time I write a post on Chrome Developer tools. I was discussing the Chrome's power with a friend of mine and he suggested me to write a post on it. Chrome Developer tools are far ahead in features as compared to what's available with any other tool for convenient application development and debugging.

So let's hit the F12 key (or right click Inspect Element) and start rolling. In general, there are 8 tabs, I am going to focus on the Elements tab in this post.

Elements Tab

Editable DOM

The Elements tab shows nicely formatted HTML. We can easily navigate through the DOM structure and understand how the document is laid out. We can see information for any HTML element like the class, id, divs, head etc. You can edit anything like classes or text and see how the page looks. This is great if you are debugging or see how the page will look once its rendered. We don't have to go to Visual studio, change some small text and run the solution again to see how it looks. You have the editor right here in the browser.

You can even see the DOM element structure at the bottom. When we select an element, it's parents are shown to the left. We can select any parent from the bottom line and navigate through the HTML easily.

Search/ Ctrl+F

We can search for any element in the page. We can even use XPath and CSS selectors. I use CSS selectors pretty often. For example, I want to see how many elements use this class I will use ".myClass" in my search box. I think this is really cool.

CSS Styles

On the right hand side, we see the Styles window. We can play with the css right here and see the results immediately. Once we have a satisfactory look and feel, we can just copy the css and paste it into our solution. Doesn't it make our life easy.
The CSS window allows us to check/uncheck any property, search for the properties, add new properties and edit existing ones. One thing that I want to explicitly mention which is very helpful is when I edit the color property, I can use color picker and choose which color I want to use.

Toggle Element State

If we want to see how a specific element looks in different states like focused or active, we can test it by just using these checkboxes as shown in Fig. This is particularly helpful when we have multiple nested elements and we need to see how these elements state affect one another. Hovering a mouse on them activates hover on both the nested elements. But with these we can debug each individual item separately.

New Style Rule

Plus Sign adds css style to the specific class you are currently accessing. We can add css to the specific class and we can examine the results applied to the whole class simultaneously.

Computed Tab

The computed tab shows the final computed style rules that are rendered on screen. If we click on the arrow to the left of the style, it shows the source file and line number.  

DOM Breakpoints

This is yet another useful feature while debugging. If we want to see who is adding, removing or modifying elements to a specific DOM element, we can  put a breakpoint on the DOM element. As shown, we have three options:
i) Subtree Modification 
ii) Attributes Modification
iii) Node Removal



This will stop the application at any point where the specific action is invoked. This helps us in debugging issues related to any kind of dynamic DOM manipulation. 

Properties

This window lets us edit the properties of any HTML element on the fly.  I can edit the innerText property and see the results on the fly.

Event Listeners

This is one feature that I don't like much. This shows the events attached to a specific element. However, clicking on it doesn't always navigate us to the actual callback function. For example, if I used jquery to bind click event to a specific element, navigating to the click event shows me click event in jquery file which is of not much use to me. I think this will improve in future but for now this is helpful sometimes, not always.

Conclusion

This is the power of just the Elements tab of Chrome. I will explain other tabs in future posts. I hope it was useful and you got to learn something new out of this post.

For future updates to my weekly blog, please subscribe to the blog