How to debug Front-end: HTML/CSS

Michał Witkowski
Pragmatists
Published in
8 min readDec 18, 2017

--

I have a strong feeling that at least half of you are thinking right now — “It’s not even a programming language”. Still… poor skill in HTML/CSS debugging causes major problems during web application development.

Not every developer knows that he has a powerful debugger, right under his nose, that will help him track and eliminate those bugs. This debugger is his own browser, Chrome.

This article is part of How to debug Front-end series:

I will cover:

  • turning your browser into IDE — dynamically edited HTML/CSS
  • HTML breakpoints
  • changing element state
  • searching for specific elements
  • practicing new skills on real-life examples
  • understanding styles in the Elements tab

Ok, enough of the introduction. Let’s see if I can show you some new tricks.

Two basic ways to get into the Elements tab:

  • Click any element with right mouse button > inspect
  • Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools and pick the Elements tab

Left side of the Elements tab

Dom tree

First of all, DOM tree elements can be inspected. To expand, click on the triangle on the left side.

By clicking the right mouse button, we open some additional options:

Add attribute — add a new attribute to the selected element
Edit attribute — edit an attribute, available only when you click on the attribute
Edit as HTML — by picking this one, you can edit the whole element; also useful to copy part of an element that you want to use somewhere else

Copy:

Copy outerHTML — copy tag, including a tag itself and a child element
Copy selector — copy of a CSS selector (div > span > #id)
Copy XPath — copy of an XPath //*[@id=”answer11208745–20"]/div/div[3]/time, more in further reading
Cut element — cuts element
Copy element — copy element and children elements
Hide element — hide element temporarily by adding display: none; (cmd + H / ctrl+H)
Delete element — delete element and children elements, can be reversed by cmd + z
Expand all — expand all nodes
Collapse all — collapse all nodes
:active — set element in active state*
:hover — set element in hover state*
:focus — set element in focus state*
:visited — set element in visited state*
Scroll into view — gets you immediately to the selected element on web page

Break on:

subtree modification — set breakpoint on subtree modification**
attribute modification — set breakpoint on attribute modification **
node removal **

*check the results in tab on right in styles
**can be checked in DOM breakpoints on the right side of the Elements tab

Breakpoints — Practice

Understanding breakpoints without practice might be hard, especially if you haven’t encountered them before. To help you with that, I’ve created an easy example for you to try yourself.

Instructions are in the HTML file. Let me know if everything is clear.
If the debugger happens to stop on jQuery, you can blackbox the library (picture below).

Hope you’ll like it!

Live elements inspect

Click this icon and your Elements tab will follow your cursor on the screen, selecting nodes live.

Source node

If you click on the source file like styles, fonts, js files, there will be some additional options.

Capture node screenshot

A cool trick which allows you to make a png file with a selected node:

  • Select the element you want to capture by clicking the left mouse button
  • Open the Command Menu with Cmd + Shift + P / Ctrl + Shift + P
  • Type node screenshot and select Capture node screenshot

Look up for string, selector or XPath

When the elements panel is open, click cmd /ctrl + shift + F and have fun with this little fellow.
As you can see on the picture below, type inside any string, CSS selector or XPath to search for any node on your page.

Edit Source Files Directly

It’s possible to edit source files directly within Chrome Devtools and save changes dynamically. Changes can be applied immediately without refreshing the browser.

  • Open source tab in Chrome Devtools
  • Open file you want to edit dynamically
  • Click right mouse button like on the screenshot above:
  • In Windows, you can click on the whole folder(blue one on the left) directly by clicking the right mouse button > Add folder to workspace
  • Using MacOS you can also just drag and drop the whole folder, and most likely Chrome will map files automatically
  • Pick Add folder to workspace
  • Now any change you make in your browser is also reflected in your local files

Right side of the Elements tab

Styles

When you have the element selected, styles and other sub-tabs appear on the right-hand side. In this section, we will dive into it, ensuring you fully understand the language that Chrome is speaking.

:hov — after expanding :hov you can activate such a state as hover or focus; the same functionality is available in the DOM tree
.cls — adds class to the selected HTML element, very useful when you are saving your changes live
+ — adds a rule to the element you are editing, useful when you create DOM without styles yet

Styles — inside, you can find styles adequate to your element.

Colour and text decoration meaning

The yellow warning sign means that you made some kind of mistake when typing the style name or value.

Crossed styles are overwritten by more important styles.

Styles with a gray background are active but not editable. They are native and coming from the browser itself.

On the right, you can see some gray words — the file which is continuing the style rule (w3.css:28) is the place where you can find this style in the computer or server. By clicking on this, you can open that style in source and see where it is.

Computed — styles

The rectangle on top contains values for padding, border and margin.

For non-statically positioned elements top, right, bottom and left properties will be displayed additionally. All values can be modified by double clicking the left mouse button.

Below the rectangle, there is a list of rules that are rendered on the screen and ignores any other. When the arrow on the left is pointing down and the style in extended, you can find the style sheet name as a link (blue link).

Styles in computed tabs aren’t editable, but you can go into styles by clicking the gray arrow.

Event Listeners

In this tab, all event listeners are visible. Let’s start with the option bar on the top.

Refresh sign on the left — refreshes state of your active event listeners.
Ancestors checkbox — show/hide listeners bound to selected element ancestors.
All/Blocking/Passive drop down — you can choose between those:
Passive events listeners — an emerging web standard, new feature shipped in Chrome 51 that provide a major potential boost to scroll performance. Chrome Release Notes.
Blocking — typical old fashioned event listeners.
Framework listeners — this one checks and resolves event listeners which come from frameworks. When it is checked we won’t see jquery as the link, but instead a place where we called a function.

Everyday use

The Event Listeners tab is useful when you encounter code that is new for you. It helps you find the name of a function bound to an element (look at the example below). “Show function definition” will take you directly into the bound function in Source tab.

When you are appending elements with “for” loop, it might happen that you bind more than one function to an element, or do a new binding with every loop. This tab helps you find such bugs.

JSDiddle from the previous section will be just fine to practice with Event Listeners. Remember to check Framework Listeners if you want to see actual binds, not jQuery. Fiddle

Properties

Every selected HTML element is a DOM object. It has properties. The Properties tab shows the inheritance hierarchy of the selected DOM object.

Honestly, I do not use it myself very often. The only use is to check element properties without console.log and page refreshing. If you have some creative way to use this tab, please share it in the comments section.

Shapes and $scope

Shapes and $scope are additional tabs that come from Chrome plugins. Those topics will be covered in upcoming articles.

Ending

That’s all for today. If you want to explore more, look into Command Menu, or further reading.

Hope you liked it, and see you soon in the next article.

Further reading

--

--