I had a coach who loved to say “you play like you practice.” He meant it as a rallying cry; approach every practice with the same tenacity and focus as an important game. Otherwise, we wouldn’t be sharp when it came time to play in actual games. He was right. One offseason, I didn’t practice, so when the next season started, I didn’t play.
After taking our Build Website UIs Pro Intensive this winter, I learned that a similar principle applies to coding. Without the structure of a course, my skills started to fade. I want to stay sharp, but I don't want to fire up a dev environment every time I need a refresher on the difference between
padding. That’s where browser developer tools come in.
Browser developer tools are the most convenient way to practice web development skills, quickly edit a webpage for mockups, and to learn about the technical building blocks that support everything you see online. To see why that’s true, let’s get interactive and modify the style and content of this article as you read it.
Why Use Developer Tools?
With your browser’s developer tools, you can practice your HTML and CSS skills and stay steeped in the world of code any time you’ve got your browser open, whether you’re casually browsing the web, catching up on emails, or slacking off at work (not that you'd ever do such a thing).
These tools are also a great way for non-developers to learn more about the corners of the web we interact with every day. Say you’re a marketer who comes across a landing page that inspires you, and you want to get a sense of how it was made. Or say you’re a designer, and you want to preview how a new font or site feature will look on a mobile device. Browser developer tools allow you to do that in minutes, without having to leave the warm embrace of your web browser, and without having to bug your engineering team.
Just about every browser has a version of these tools, but because Google Chrome is far and away the most popular web browser worldwide, let’s learn how to use Chrome’s native browser developer tool—DevTools.
How to Access DevTools
To access DevTools in Chrome, right click anywhere on this page, and then select "Inspect." DevTools will appear as a window on either the bottom or right-hand side of your screen. It should look something like this:
How to Modify CSS Styles With DevTools
Browser developer tools allow you to quickly collect a wide array of important information on websites, but one quick and easy way to get familiar with it is by modifying HTML content and CSS rules.
To try it out, let’s change the font color of the body of this article. Right-click on this paragraph, click “Inspect,” and then click on the Styles tab. Scroll down to the section labeled “Inherited from
body.post-template”. The first rule in that section should say
color: #3c484e;. Click the dark gray square to select a new color. Once you’ve selected a color, press "Enter" (or "return"), and take in the changes you’ve made.
There are a few things to keep in mind when using DevTools to modify a web page:
- When you modify or change a CSS rule, you may be affecting more than one element.
- DevTools provides easy-to-use tools when you modify certain CSS rules. (For example, when you changed the font color of this article, DevTools provided you with a color picker.)
- DevTools is only a sandbox tool, meaning that any changes you make to the web page will not be saved. Make sure to make a note of any changes you'd like to hold onto when experimenting with DevTools on your own web page!
Add New CSS Styles
In addition to modifying existing CSS rules, you can use DevTools to add new rules as well. Let's continue playing with the design of this article.
This sub-heading doesn’t have a background color. How boring!
- Right-click on the heading above and click "Inspect" in the menu that appears. DevTools will highlight the corresponding HTML element.
- Take a look at the
Stylestab and click on the
+icon in the top-right corner of the right pane–notice that this creates a new, empty CSS rule for the sub-heading element.
- Within the sub-heading's selector, click and add a new CSS declaration between the curly braces. If you’re unsure of where to start, copy and paste the following example:
You should see the background color of the sub-heading change to lime green.
When making the above changes, you may have noticed that some CSS styles are crossed out with a horizontal black line. The
Styles tab shows all styles applied to that element. Rules can often be overwritten by more specific rules, so the horizontal black line through some CSS rules denotes that that rule is not being used.
To view only the styles applied to that specific element, click on the
Computed tab directly next to the
Styles tab. In this pane, you will see only the styles that are being applied to that element, also known as the computed styles.
This is a great way to troubleshoot styling on your own websites. For example, if you’ve made a change to your CSS that’s not being reflected on the page itself, you can use the
Computed tab to examine where the applied styling is coming from.
(Note: If the
Computed tab is not appearing for you, your browser may be sized too small. Expand the width of the browser until it appears.)
Modify HTML With DevTools
DevTools also lets you directly modify the HTML content of a web page. Let's try this out with the next paragraph:
This paragraph is pretty useless. Doesn’t contribute anything to this article, and worst of all, it’s not even entertaining. We’re very sorry that you had to spend time reading it.
- Right click on the above paragraph and click "Inspect.”
- DevTools will automatically highlight the HTML code in the left pane associated with the paragraph you right clicked on.
- Double click on the heading text between the
<p>opening and closing tags in the Elements pane.
- Make the paragraph say something more interesting, and press Enter.
At this point, you should see the content of the paragraph change to your much more interesting version.
You can also add HTML of your own. Let's add another paragraph directly below the one you just modified.
- In the Inspector, right click on the
<p>element you just modified. A menu should appear. Click on "Edit as HTML." (You can also delete elements using this menu.)
- A large text field should appear. Directly edit the HTML by adding another
<p>element below the one you’ve already written. (be sure to add a closing
</p>tag after your new paragraph!)
- To complete/view your changes, click on any other element in the Elements window pane.
As you work on your own websites, DevTools is a great way to quickly test out any HTML elements you’d like to add without having to repeatedly save and view those changes manually.
That can mean new text:
And new, more complex elements:
Remember, these are sandboxed changes, so unfortunately the tweaks you’ve made to this article will not be saved. Be sure to screenshot your changes and share them with us in the comments below!
Now, go forth and make the internet a more beautiful and interesting place.