Gearing Up: Understanding & Playing with Elements Panel

In our last introductory post, we described each aspect (panel) of Chrome Developer Tools. Further we learned that Elements panel is the playground for developers, debuggers & nerds, right? That was just a glance into what each panel. I mean there’s more than just that. In this post, we are going to delve deep into Elements panel & explore it’s immense capabilities.

I’m getting rather excited, what about you? Let’s go!

Gearing up

In our introductory post we also learned about multiple ways to access DevTools. It’s time we accessed it. So go to any website you desire to edit (for fun?), right-click any of it’s elements & select Inspect element. DevTools window will open at the bottom of Chrome window. On the left is DOM tree, while on the right is CSS pane. DOM tree is an application programming interface (API) for documents involving markup languages like HTML, XML, SVG, MathML, etc. It provides structured information about a document and a set of Object and Methods for manipulating that structure. Whereas CSS pane provides a list of provides being applied to an highlighted HTML element.

What can you do with DOM pane?

There are a # of things that one can do with DOM tree. It gives a structural representation of current Web page.

Expanding & contracting nodes

Navigating through DOM tree might be confusing at first glance, but it really isn’t.

• To expand a DOM node, double-click the node or press right arrow key
• To contract a DOM node, double click the node or press left arrow key

There’s a Elements trail at the bottom that shows you exactly where in the DOM the highlighted element exists.

Editing DOM nodes

Double-clicking an element’s starting tag lets you edit it. If you alter starting tag, closing tag will alter itself by itself.

With tools provided, you can:

• Move DOM elements
• Edit node as HTML
• Add or modify attributes or their values
• Or simply, delete a node

These will be described as move forward.

Editing attributes & values

To modify an attribute or it’s value, just double-click an attribute or it’s value. Alternatively, you can right-click an element and select Add attribute. These both are edited independently of one another. Remember whatever changes you make in DevTools mode are only occurring in your browser’s current editing session. To make them live you’ll  have to make deploy changes to server hosting your website.

Deleting nodes

To delete a DOM node, either right-click node and select Delete node or press Delete key.

Editing nodes as HTML

If you’re on Windows, press F2 key to toggle edit mode to edit HTML live. Or simply, right-click node you want to edit as HTML and select Edit as HTML.

Scrolling into view

Screens may be smaller most of the times. There will be certain nodes corresponding to DOM nodes that are offscreen. If corresponding portion of an element if offscreen, you can scroll to it by right-clicking the node and selecting Scroll into view.

Highlighting corresponding elements

You must have noticed it already; that DevTools highlights any page elements that are selected in DOM tree. It is an efficient to control Box Model.

Enabling rulers

Responsive design is the new trend, did you know that? For front-end developers who develop responsive web applications, this feature might be an efficient tool. This feature gets rulers around browser window and you will be able to scale elements accordingly. To enable rulers, just go to Settings > General & check Show rulers. Similar Chrome extension is this.

Force element state

This might be a good tool for developers who rely on an element’s certain state. Want an element to act in a particular state? Just right-click an element’s node from DevTools, select Force element state. There are four different states you can apply namely :hover, :active, :focus & :visited.

Drag & drop elements

With this feature DevTools lets you move a node from one place to another. This is good if you want to experience how some element might look from a different place. To drag & drop an element, just hold-click an element and drag it wherever you want. Simple as that.

Moving towards CSS pane

We have learned certain techniques that are and will come in handy in future about DOM pane. Well, now this is about time we learned various tricks & hacks about CSS pane. To the right is CSS pane. If you’ve difficulty with adjusting panes, you can resize panes & DevTools window by using dividers. First of all you should know that CSS pane is where all CSS properties along with their respective values exist. Something that I wouldn’t need to mention is that – you can live-edit CSS and examine real-time results.

Editing CSS properties & values

You can edit, add and remove an CSS property or it’s value. Chrome offers special autocompletion functionality that let’s you explore certain applicable values of a property. Open DevTools by right-clicking element whose styles you want to alter and selecting Inspect element. Towards CSS pane, click any CSS property & modify it as you please. Pressing tab will move edit mode towards value. To enjoy autocompletion feature just remove listed value, suggestions will pop-up. There is also an option to enable or disable certain CSS property. To enable/disable a property tick or un-tick checkbox sitting besides property.

Automcompletion CSS properties & values

Confused about applicable values? Just make use of autocompletion feature. It lists certain possible values or properties. To enjoy suggestions, just add a new property suggestions will pop-up. Same goes for value suggestions.

Box Model

Box Model is one of the complicated concepts when it comes to CSS. It involves properties like width, height, border, margin & padding. DevTools provides special-color-highlighting to differentiate between these aforementioned properties. Blue stands for dimensions, green for padding, orange for border & darker orange for margin. Box model is further represented at the bottom of CSS pane.

Add selectors

You also have the capability to add selectors to elements. Enjoy!

Conclusion

That’s all for today! In today’s post we learned more about DevTools than an average DevTools user.

Here’s what we covered today:

• Learned about DOM tree
• To edit DOM nodes as HTML
• To add/edit attributes/values
• To remove a node
• To move a node
• Enabling rulers for positioning debugging
• CSS autocompletion feature
• Box Model CSS functionality
• And so much more.

Lastly I will ask for one thing; I’d like to ask you to email this article to one person. That’s it.