---

4: Change HTML and CSS.

With Chrome DevTools we can not only inspect our webpage, but we can also temporarely change the HTML and/or the CSS of the page.

Before we start, remember this:

Whatever you change in the HTML or styles inside the page with DevTools, those changes are lost, as soon as your browser reloads the page.

Reloading can be done by you, deliberately, but it can also be done by the browser, because the file or directory is being watched for changes.
(for more about watching see: Stylesheets and Defaults. )

So make sure you know the temporary changes you made, are written down somewhere, or saved outside DevTools, before reloading the page you are working on.

We will first start with looking at the HTML.

---

4.1.: Change the HTML of a webpage with Chrome DevTools.

For this we will go back to the example we used before. You can (temporarely) edit the HTML:

The h1-element is clicked and can be changed.

After clicking the h1-element it can be changed, for instance into a h3-element.

The h1-element is clicked and can be changed into a h3-element.

As soon as we do that, the corresponding end-tag is changed in h3 too ! Furthermore, in the styles pane we now see the styles for a h3-element!

The element that is changed now also has the corresponding styles.

With Chrome Devtools we can change many things in the HTML of the page: Add another class, remove a class, change a class. We can change text. But there is more, look at this screenshot:

The ul-element is clicked/selected and has 3 dots in front of it.

You can see 3 little dots in front of the selected element. Clicking the dots gives an extra menu with a lot of options:

Extra popup menu behind 3 dots in front of selected element in the HTML pane.

This is a very important menu in the elements pane:

• Add an attribute to the selected element.
• Edit as Html This opens the element and all its siblings inside a separate box, so you can edit whatever you want. This also gives you the opportunity to copy part of it to use that somewhere else. Try it out to see what it does.
• Duplicate element When you have selected a li-element for instance it gives you another empty li one in front of the selected one.
• Delete element. Does what it says so carefull with this one.
• Copy is a submenu:
  

  

  Popup menu in elements pane, Copy entry.

  As you can see the Copy-menu has many possibilities. You can copy a complete element from a page to use it elsewhere.
• Hide element In the example the second li-element is hidden with this command, this is the result:

  

  Popup menu in elements pane, Hide entry.

  As you can see the second li-element no longer shows on the webpage, and there is a black dot in front of it in the elements pane. You can unhide it by clicking the popup hide submenu again. The popup on the webpage itself, clearly states it is hidden by the web-inspector.
• Force state is also a submenu:

  

  Popup menu in elements pane, Force state entry.

  This is an extremely usefull submenu. It gives you the possibility of setting an element to a fixed state. Otherwise you would never be able to debug pseudo states like :active or :hover.
  Suppose you have defined different styles for the :active state of a menu for instance, than setting this Force state to :active, forces all styles you defined for the :active state, to be visible in the styles pane so you can inspect them!
• Break on This has to do with debugging and breakpoints in. Javascript. So far I did not use that but there is more information about it here:
  Javascript: Pause your code with breakpoints."
• Expand recursively expands all siblings of the selected element.
• Collapse Children The opposite of Expand recursively, so it collapses all children, just as it said.
• Capture node screenshot takes a screenshot of the selected node. See:
  Hidden Gem: Take screenshots using built-in commands in Chrome/Edge.
  for more ways to take screenshots.
• Scroll into view Pressing this, scrolls the selected element into view on the webpage itself. Which is especially handy on long webpages.
• Focus so far could not find an explanation for that.
• Store as global variable, Used when debugging javascript.
• Show webpage as on mobile screens.

  

  Showing webpage on different devices.

  The elements tab has a special icon almost to the left. When you press it, it shows your page on mobile and other devices. So you can see how they will look on that.

  

  Showing webpage on different devices, here on mobile.

  The top of this "mobile" screen has a couple of selection boxes and more, with which you can choose the device to show your page on. Change the size of the screen on that device and more. You can even choose between portrait and landscape mode. To the top-right there is another menu behind the three dots with more possibilities like show media queries, capture screenshot, add other device types, and more.

---

4.2.: Change the CSS of a webpage with Chrome DevTools.

What we did with the HTML in the previous sub-chapter, we can also do with the styles in the styles pane. But before we do that first look at some styling and colors in the style pane, that have a special meaning:

Special colors in the style pane.

• The blue square with the mark inside, means you can mark or unmark this property, that way switching it on or off. It appears as you hover your mouse over the property. If no marks appear, the property can not be switched off. Empty squares mean the property is switched off. It will be striked through then too.
• The yellow triangle with the exclamationmark, means this is a non-existing property, or some other error in the declaration. (here it should have been color, not coor)
• The gray background of this class ul means it is specified in the user agent stylesheet and is not editable.

How to edit a property?

Clicking on a property in the styles pane, makes that property editable, you can see it because it turns blue:

Clicking on the color-property of a class of an element.

When we have a #-value for a color as in the next screenshot, we can open the color-picker, by clicking in the little colored square:

Color picker of a CSS style property.

You can do a lot of things with the colorpicker:
Not only are there a lot of sliders and buttons to get to the color you want, but you can also click on the little Eyedropper:

Color picker-Eyedropper of a CSS style property.

This gives you a way of selecting a color from your webpage. When you have clicked it, you will see a small circle and a zoomed area so you can easily pick a color.

Color picker-Eyedropper of a CSS style property.

Figure 26 on the page: CSS features reference." gives you all possibilities of the Color-picker of the Chrome DevTools.

When you click on the :hov in the styles tab, as in the next screenshot you get:

Styles-tab: setting states like :hover.

This way you can force states of an element, just as you could with the popup menu we described.

Styles-tab: setting (extra) class.

By clicking on .cls you can add (extra) classes. Below the box you see a list of classes this element already has assigned. You can toggle the blue checkmarks before each of them to turn them on or off.
With the little +-sign to the right of it, you can add a rule. You can experiment with all that with the DevTools example.

In the next screenshot, look at the styling for the selected li-element:

Styles-tab: li-element properties.

The styling of this li-element, comes from 3 places:

• At the red arrow you see the property Font-size. This styling comes from the stylesheet: devtools-example-01.css. (highlighted in green) These styles can be edited.
• At the blue arrow you see 2 properties coming from the user-agent stylesheet, those are not editable.
• Highlighted in yellow, you see an empty: element.style This styling is always present with every element. It is an empty placeholder for styling you want to add for testing purposes.

So in fact there are only 2 places to edit styles for this li-element:
You can add or edit styles at the red arrow. If you change anything there, the styling changes are valid For each and every li-element on this page.
That might not be what you want. You might only want to change this special li-element, and none of the other li-elements on this page. If that is what you want, you have to add and change styling in the empty element.style highlighted in yellow. Styling that is added there is only valid for the element it belongs to, in this case the selected li-element. It is written in the webpage source as an inline style.

---