A Marketer’s Guide to DevTools: Part 1

A Marketer’s Guide to DevTools: Part 1

Broken code. We’ve all been there, right? It goes something like this:

You open your landing page or email in a browser and it doesn’t look right. Maybe an image is mis-aligned, or your text is the wrong size or color. So you go back to Oracle Eloqua (or your building platform of choice) or your editor, sift through your code, try to find the problem, make a change, cross your fingers that it’ll work, and reload the page. Dang. Still broken. Sound familiar? If only there was a way to preview on-the-fly changes and know the exact line in your code to change. Ah, but there is! Meet browser-based developer tools.

Developer tools are web authoring and debugging tools built into your browser that provide an in-depth view into your code. Chrome, Firefox, Safari and IE each have their own flavors, but the functionality is basically the same. For this demo, I’ll be using Chrome’s DevTools, but feel free to explore the other ones as well.

For today’s demo, we’re going to look at a broken landing page and explore how we can use DevTools to debug the code and fix the problem. Side note: You can use DevTools for debugging emails as well, but be sure to run it through a testing software, like Litmus, to make sure things are optimized for your preferred email clients. Before we dive in, let’s get familiar with the interface.

To launch DevTools, go to Chrome and click View —> Developer —> Developer Tools. Alternatively, Command + Option + i (Mac) or Control + Alt + i (PC) will also do the trick.

DevTools-Open

Once it’s launched, you should see something like this:

DevTools-Bottom


There are two different views to choose from: bottom or side of screen. You can customize your view by clicking the menu at the top right and selecting your preference.

DevTools-ViewPreferences


Next, I’d like to call your attention to the different menu tabs. By default, DevTools will start on the Elements tab, which offers a view of all the html on the page and the css rules that correspond to those elements.

DevTools-Elements


There are several other tabs that complete this diverse and powerful toolset, but since our main focus is on basic html/css debugging, we’re going to stay on Elements. If you want to learn more about the other areas, you can get your nerd on here.

Now that you’ve got the lay of the land, let’s look at a landing page to see how we can use DevTools to fix a bug.

DevTools-BrokenPage


As you can see, our landing page has broken header. It’s way too small and shifted to the left.

To start debugging, we want to look at that header element and see what styles have been applied so we can fix the positioning and size. The Elements tab is divided into two main parts: html and css. The html view allows you to see the structure of your code as it is rendered by the browser. As you hover over the different elements in the html, they will appear highlighted on the screen.

DevTools-HoverView


In this example, I hovered over the body tag. The blue section is the actual width and placement of the body. At the top, the light green band signifies padding, or extra space that’s been added inside the body tag. In other selections, you may notice orange bands as well, which denote margins (space on the outside of the element). Also note the little helper tag, which provides details about the element’s size and any id’s or classes it may have.

Dragging your cursor through the html is a good way to get a feel for how the various elements are structured, but it can be tricky to pinpoint a specific element, which, in this case, is our header. There are a couple ways to do this.

Option 1: DevTools has a selector tool in the upper left corner. Click the selector icon (or use “Command + Shift + C” (Mac)/ “Control + Alt + C” (PC)) and then drag your cursor around your landing page. You’ll notice that the elements are highlighted in the same way. Simply click on the element you want to inspect.

DevTools-Selector

Option 2
: Right click on the element you want to view. In the pop-up menu, select “Inspect”.

DevTools-Inspect


Once your element is selected, the html of that element will be highlighted in the DevTools Elements tab.

DevTools-Selected


In this case, we’re changing div with an id of “u81-4”. But what changes should we make, and how will we know if they work? Get ready, guys. This is the fun part.

On the right, you’ll see a list of CSS style rules that have been applied to this element.

A few things to note about the CSS section:

  1. Typically, the most element-specific styles are listed at the top. So, if your element has some inline styles (in the html tag), those would be at the top, followed by any style rules based on classes or id’s. More global styles (like body and html) will be found near the bottom.
  2.  For each style rule listed, you can see the selector for the style rule (usually an id, class or a combination of both), and the document and line number where this rule can be found.

DevTools-Css


In this case, the most element-specific style is the one for our element’s id, #u81-4, which is found in the index.css file on line 80. This will save us some time when we update our code.

So, we’ve selected the element we want to fix and have identified the css rule we want to change. Ready for the magic? Here it goes.

  1. Click on a specific style property or value. In this case, we want to target the font-size, so we’ll click the 12px.
  2. Change the value either by typing it in or using the up/down arrows. Let’s bump it to 44px.
  3. Watch in awe as the header changes before our eyes. See? I told you. Magic!

DevTools-Fixfont


That was fun, right? Let’s fix the positioning, too. This element has a left margin of 5px. What if we increase that to see how it changes the alignment? Click on the 5px and then press your up or down arrow key to change the value. Watch (again, in sheer awe) as the element moves right or left. Looks like 100px is perfect.

DevTools-MarginFixed


Now, this might feel a bit scary at first, but it’s important to know that you’re not actually changing your code. By working through DevTools, you’re simply auditioning changes without affecting anything permanently. If you ever want to set your code back to its original state, just refresh your browser.

Now that we’ve fixed our header in the browser, we’ll want to update our css file to actually apply these changes. And with DevTools, we know that we’ll be updating the font-size and left properties in our #u81-4 style rule on line 80 of our index.css file. Kinda cool, huh?

I hope this write-up gave you a useful introduction to DevTools and how you can leverage its awesomeness for your own debugging challenges. But, don’t worry, there’s more where that came from. I’ll be sharing other tips and tricks with the Elements tab in a future post, so stay tuned. Until then, happy debugging!

By | 2017-10-25T03:37:07+00:00 October 19th, 2016|Design, Eloqua, Oracle Marketing Cloud|0 Comments

About the Author:

Kate started as a Front End Developer at Relationship One after completing a certificate in web and interactive media at a technical college. During her first two years, Kate honed her skills as an email developer, taking on Gmail, Outlook and all things responsive. More recently, Kate has shifted her focus to app development, building complex web applications that integrate with Oracle Marketing Cloud and crafting rich user experiences. Besides nerding out at her job every day, Kate enjoys yoga, food blogs, and crossing things off to-do lists.


Thank you for subscribing!
Subscribe to our Thought Leadership Today