Welcome back, marketers and code ninjas! Today, I’ll be sharing more features in Chrome’s DevTools, which will make debugging your code faster and less painful. If you need an introduction to developer tools or just want to brush up, check out Part One of this “Intro to Dev Tools “series to get you started.
In part one, we learned how to launch Chrome’s DevTools, select an element and adjust the CSS for that element in order to fix a layout issue on a landing page. Those things alone are pretty handy, but here are a few more tips that are useful when troubleshooting a broken landing page or email. For consistency’s sake, I’ll use the same landing page for my examples.
Tip #1: Move HTML Elements
Let’s say you want to see how a part of the landing page would look somewhere else on the page. DevTools lets you drag html elements around so you can preview how their placement would affect your layout.
To see this in action, launch DevTools (Option + Command + i) and select an element that you want to move. If you’re not sure how to do this, check out Part One for detailed instructions. In this case, I’ll select the Relationship One Cares logo in the upper left. In the Elements tab, you should see your html element highlighted in the code.
Ready for the fun part?
Click on the highlighted section of code and drag it up or down to reposition it within the html. In this case, I’m going to move the image out of its container until it’s the first element inside the body tag, like so:
In this case, shifting the image placement caused it to move all the way to the left, which isn’t what we want. Not the point. The point is that should you need to experiment with the structure of your html, DevTools allows you to do it on the fly so you can see the results instantly. The beauty of using DevTools is that you’re not actually changing your code. So if things get a little crazy pants, just refresh the page and start over.
Tip #2: Audition Text
What if you want to audition a copy change on your page? Yup, DevTools can do that. In DevTools, use the selector tool to select an element that contains text. In this example, I’ll choose our header “The Season of Giving.”
In the highlighted html, double click on the text and type in the desired change.
Fun, right? Let’s do some more!
Tip #3: Add New Styles
In Part One, we discussed how to change the existing style rules of an element, but you can also add your own style rules in a similar fashion. There are two ways to do this:
Option 1: Add to existing
Select the element you want to change and find the styles that correspond to that element. Let’s select the div that contains our header. This div has an id of “u81-4”. If we look at our CSS panel, we can see that there are many style rules assigned to #u81-4.
(Quick tip: “#” is used to identify id’s, and “.” is used to identify classes).
To add another style rule, click anywhere in the list of rules and hit “Enter” to drop down to the next line. From here, you can add any rule you want and see the changes live. In this case, I’ll change the font styling to italic.
Note: If you add style rules to a class, those rules will be applied to any element with that class. If you’re adding rules to an id, they will only be applied to the single element that has that id.
Option 2: Add new
Instead of adding to existing style rules, you can also create new ones. With our div container selected, check out the CSS view again, and notice the empty style rule with a selector of “element.style”.
If you click on this area, you can add any styles you want and they will be applied directly to that element. It’s the same effect as adding inline styles, which are styles applied directly within an html tag. In fact, when you add styles this way in the CSS view, they’ll actually get added to the html tag that you’ve selected, so you can see exactly how you would need to update your code.
Neat, huh? Okay, one more tip. It’s a goodie, I promise.
Tip #4: See Element’s Pseudo Class States in CSS View
Some elements, like buttons or links, have pseudo classes that define the element’s style for certain states. For instance, a link can change color when a mouse hovers over it, and change again once it’s clicked. When debugging elements like this, it’s helpful to be able to see these pseudo class style rules, so you can figure out exactly what to change.
On our page, we have three buttons that are white with yellow borders in their “normal” state, but change to all yellow when you hover over them.
What if we want to change the color of the hover state? How could we see this in DevTools in order to audition this change? First, we’ll select our button and check out the CSS view panel.
This button has a yellow border, a transparent background, and some other positional style rules related to margins and padding. But what about its hover state? How can we tell what styles are being applied when we mouse over that button?
In the CSS panel’s upper right corner, click the “:hov” link to view a list of several element states.
With your button selected, choose an element state and watch the styles change. In this case, we’ll select “hover.”
Now, our button has a yellow background, and we can see the styles that are being used to create that affect. To audition a different color (or any other style), simply modify that style rule. Here, I’ve changed the background color to red.
The main thing to keep in mind when using DevTools (or any other browser’s developer tools) is that you’re not actually changing your code. The minute you hit refresh, your page will go back to its original state. Leveraging DevTools is simply a way for you to find and fix problems faster and audition changes without risk.
I hope you’ve found these tips useful. Questions? Hit me up. I’d love to help you out. Until next time, happy debugging!