The Web Inspector (Developer Tools)

The Developer Tools is available in any browser, and it lets us see the HTML and CSS code of a page; any page. All the secrets exposed!

Let’s see:

• what we can do with it
• how to active the developer tools
• a quick example

What Can We Do With the Developer Tools

Among other things the pro use it for:

• it lets us see the elements of a page, their properties and values;
• hence, we’ll find the selectors we need
• it also tells us where in the theme’s style sheet, the properties and values have been declared.

How to Activate the Developer Tools

In Safari

You should see in your browser’s menu bar a tag named “Develop”.

If you don’t – as the Safari User Guide states -:

1. choose Safari > Preferences,
2. click on “Advanced” and select “Show Develop menu in menu bar.”
3. to access the tool: a) right click, and then click “Inspect element”, or b) press “CMD + alt + i.”
4. be sure to be on the “Elements” tab of the DevTools to inspect the elements

In Google Chrome

Simply right click wherever you want on any page, and then click on “Inspect”, as the Tools for Web Developers says.

Then also, be sure to be on the “Elements” tab of the DevTools to inspect the elements

An Example

Here’s an example to expand the width of the Twenty Twenty Theme; we’ll begin by checking the entry’s content:

• On the first slide, on (1) we see that a p element inside a div element has the class entry-content; which means, the selector to apply changes to it “could be”: .entry-content p.
• We also see its value on the second column: 58rem which equals to 580px (as you can see in the Box Model)
• On Slide 2: by clicking on the value “58rem” and write instead “70rem”, we’ll see how it would like right there

Question 1: Is it entry-content p the selector we need to change the width of the entry’s content?

No. From the same screenshot, we can see:

• (3) the selector we need is .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) 
• and (4) this value comes from the style sheet at line 3590

Question 2: Is that selector enough to change the width of the whole theme?

No. There’s a lot more to consider before using this selector. At the section “Climbing the tree” of the Twenty Twenty CSS series, we understand why and we practice how to use the Developer Tools as we find the selectors we need.