Front-end debugging: HTML / CSS
I imagine that at least half of you are thinking right now: “This is not even a programming language.” However … the inability to debug HTML / CSS causes serious problems when developing web applications.
Not every developer knows that he has a powerful debugger, right under his nose, which will help him track and fix bugs. This debugger is its own Chrome browser.
We will see:
- Turn Your Browser Into an IDE – Dynamically Editable HTML / CSS
- HTML breakpoints
- element state change
- Search for specific items
- practice new skills with real-life examples
- understanding styles on the Elements tab
Ok, enough introductory words. Let’s see if I can show you new tricks.
Two main ways to get to the Elements tab:
- Right-click on any item> inspect
- Use Ctrl + Shift + I (or Cmd + Opt + I on Mac) to open DevTools and select the Elements tab
The left side of the Elements tab
First of all, you can check the elements of the DOM tree. To expand, click on the triangle on the left.
By pressing the right mouse button, we open some additional options:
Add Attribute – add a new attribute to the selected item
Change Attribute – edit the attribute, available only when you click on the attribute
Edit as HTML- selecting this, you can edit the entire element; It is also useful to copy the part of the element that you want to use elsewhere
Copy outerHTML – copies HTML, including the tag itself and the child element
Copy selector – copy CSS selector (div> span> #id)
Copy XPath – copies XPath // * [@ id = “answer11208745-20”] / div / div  / time, we will explain further
Cut element – cuts out an element
Copy element – copies an element and child elements
Hide element- temporarily hide the element by adding display: none; (cmd + H / Ctrl + H)
Delete element – delete elements and child elements, can be changed to cmd + z
Expand all – expand all nodes
Collapse all – collapse all nodes
: active- sets the element in the active state
: hover- sets the element in the induced state
: focus- sets focus to the element
: visited- sets the item in the visited state
Scroll into view – immediately gets to the selected item on the web page
subtree modification- set a breakpoint when modifying a subtree
attribute modification- set a breakpoint when changing the attribute
Breakpoints – Practice
Understanding breakpoints without practice can be difficult, especially if you have not encountered them before. To help you with this, I created a simple example for you to try.
Instructions are in the HTML file.
If the debugger stops on jQuery, you can use the black box libraries (see the figure below).
Real-time item selection
Click this icon, and the Elements tab will follow your cursor on the screen, selecting nodes in real-time.
If you click on the source file, for example, styles, fonts, js files, additional options will appear.
Take a screenshot of the site
A great trick that allows you to make a png file with the selected node:
- Select the item you want to capture by clicking the left mouse button
- Open the command menu with Cmd + Shift + P / Ctrl + Shift + P
- Enter node screenshot and select Capture node screenshot
Find String, Selector or XPath
When the toolbar is open, press cmd/ctrl + shift + F and get some fun with this craftsman.
As you can see in the image below, enter inside any string, CSS or XPath selector to search for any node on your page.
Edit source files directly
You can edit the source files directly in Chrome Devtools and save changes dynamically. Changes can be applied immediately without updating the browser.
- Open open-source tab in Chrome Devtools
- Open the file you want to edit dynamically
- Right-click, as in the screenshot above:
- On Windows, you can click on the entire folder (blue on the left) by right-clicking> Add folder to a workspace
- Using macOS, you can also simply drag and drop the entire folder, and most likely, Chrome will automatically display files
- Choose Add folder to a workspace
- Now, any changes you make in your browser are also reflected in your local files.
The right side of the Elements tab
When you select an item, styles and other child tabs are displayed on the right side. In this section, we’ll dive here to fully understand the language Chrome speaks.
: hov- after deployment: hov you can activate states such as hover or focus; the same functionality is available in the DOM tree
.cls – adds a class to the selected HTML element, very useful when you save your changes in real-time
+ – adds a rule to the element you are editing, useful when creating a DOM without styles.
Styles – inside, you can find styles that match your element.
Meaning of colors and text rendering
A yellow warning sign means that you made a mistake when entering the style name or value.
Intersecting styles are overwritten by more important styles.
Styles with a gray background are active, but not editable. They are native and are installed from the browser itself.
On the right you can see gray words – the file that stores the rule for the style (w3.css: 28) is the place where you can find this style on a computer or server. By clicking here, you can open this style in the source and see where it is located.
Computed – styles
The box at the top contains values for padding, border, and margin.
For non-static elements, properties will be displayed on the top, right, bottom, and left. All values can be changed by double-clicking the left mouse button.
Below the rectangle, there is a list of rules that are displayed on the screen and ignores any others. When the left arrow points down and the styles are expanded, you can find the name of the stylesheet as a link (blue link).
Styles in the Computed tab are not editable, but you can switch to styles by clicking on the gray arrow.
On this tab, all event listeners are visible. Let’s start with the options bar at the top.
Refresh icon on the left – updates the status of your active event listeners.
Ancestors checkbox- show/hide listeners attached to the selected ancestors of the element.
All / Blocking / Passive dropdown – you can choose:
Passive Event Listeners- The new web standard, a new feature shipped in Chrome 51, which provides significant potential for increased productivity. Chrome Release Notes.
Blocking – typical old-fashioned event listeners.
Framework listeners- This parameter checks and resolves event listeners that come from frameworks. When it is selected, we will not see jquery as a link, but instead, see the place where we called the function from.
The Event Listeners tab is useful when you come across a new code for you. This helps you find the name of the function associated with the element (see Example below). “Show function definition” will lead you directly to the related function in the “Source” tab.
When you add elements with a for loop, it may happen that you bind several functions to the element or perform new bindings with each cycle. This tab will help you find such errors.
The JSFiddle from the previous section will be an excellent example of the practice of working with events. Remember to select “Framework Listeners” if you want to see the actual bindings, not jQuery. Fiddle
Each 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 very often. The only use is to check element properties without console.log and page refresh. If you have a creative way to use this tab, share it in the comments section.
Shapes and $ scope
Shapes and $ scope are additional tabs that come from Chrome plugins. These topics will be covered in future articles.
It’s all for today.
I hope you enjoyed it and see you in the next article.