5 Ways DevTools Made My Life Easier

By Enhancing Interactions with the Web

Jye Sawtell-Rickson
Nov 1, 2018 · 10 min read
Image for post
Image for post
Image Credit: Nathan Laytka, influencive.com

A few days ago in our office, a marketing colleague had a problem with one of our landing pages because the call-to-action didn’t stand out. He wanted to let our dev team know how they could change the colour and text to give it more prominence on the page. His plan was to take a screenshot, load it into photoshop, edit the colour and then send this edited screenshot to our dev team to show them how it should look. To me, who knows a little about the Google Chrome DevTools, this seemed like the longest possible way to achieve what he wanted, but then it hit me — DevTools are still remarkably underused.

DevTools provide a powerful set of tools to interact with the web. Anyone in web analytics must have a good grasp on how to use the DevTools, but I also believe that more than that, anyone working with the web should have a basic understanding. Whether you do marketing, product management or business development, DevTools can greatly enhance your productivity.

The Google Chrome DevTools have many uses, but for those who aren’t web developers, I believe the most common and impactful are:

  • Investigate competitors
  • Debug what’s not working with add-ons (e.g. Hellobar, Hotjar)
  • See all sorts of views
  • Understand page load timings
  • Edit the web

The Basics

What is a DevTool?

Let’s start by exploring. There are a few ways to access the DevTools: F12, Cmd+Shift+C, or Right-Clicking on the page and selecting Inspect. Any of these options will open up a panel on the right which is a window into the web that you interact with.

This window is the DevTools environment and is made up of many different tools split into various sections. I’ve found that the most important sections are:

  • Elements: What is the page made out of?
  • Console: Your portal to interact with the page.
  • Network: What’s going on in the background?
  • Application: Explore cookies and more.

Let’s explore these by investigating the five use-cases I mentioned above.

Investigate Competitors

Being able to understand competitors is valuable for any business. With the DevTools you’re able to explore what is happening on your competitor’s websites in more depth. This can guide product choices in your own organisation as well as to understand the direction in which competitors are headed. I wrote a whole post about taking data found using the DevTools to create a summary of their data here, but here let’s just talk about the first part.

Using the Elements section it’s possible to see the code that any site is made from. By searching for terms such as googleanalytics or optimizely , you can see what tools competitors are using. For example, they may be using Optimizely to run product tests or you may find that they don’t even use Google Analytics, opting for their own in-house tracking.

An alternative to the above method is a great app called Wappalyzer that I strongly recommend. It detects most technologies as described above and displays it on a simple list. While this covers most cases, knowing how to use the DevTools can give you more insights into how they structure their analytics.

Not only can you see the technologies that companies use, but it is also possible to see much, much more. In particular, you can combine information from the Elements tab with information that is being sent across the site in the Network tab.

In many cases, I’ve found that companies unwillingly leak information about their performance such as how many reservations they have or how many items they have sold. Pairing this with a scraping system can lead to a very robust model of performance which can be helpful for any company who wants to have a competitive advantage.

Debug What’s Not Working

Image for post
Image for post
You get an error, you get an error, everyone gets an error! Credit: codebeast.

How many times have you been a part of the implementation of an add-on or third-party product to find that it was not working perfectly? Often there are display issues, bugs causing performance to be erratic or any number of problems. By using DevTools it’s possible to quickly debug basic problems and save your team time.

The Console tab in DevTools reports any errors that crop up during the loading or operations of a page as shown above. For example, you may have implemented a third-party tool that allows for the display of pop-up notifications but for some reason, it won’t load on the page. You could open up the Console and probably you would find that some error is thrown, potentially a naming issue like this:

Uncaught ReferenceError: hello_bar is not defined

This can then be fed back to the add-on customer service team and save needless back and forth. Alternatively, if you’re tech-savvy enough you can even troubleshoot your own solutions now that you know the error causing the problem.

Another important area for troubleshooting is the Application tab. Within the Application tab, you can see all the cookies associated with the current website. This can be very helpful if you’re using an AB Testing tool such as VWO as you can edit the cookie to manually force a different variation.

The screenshot below shows Skyscanner’s website which uses a cookie called abgroup to set the cookie. This could be edited to the id of a different variation if you would like to see it in your browser. The alternative to this is continually opening Incognito sessions or wiping your cookie until you get lucky enough to be placed in the group you want to see. This will eventually work but can get very frustrating if you have multiple variations and an unlucky streak!

Image for post
Image for post
Choose your own AB Test Group

Upgrade Your Viewport

A handy tool in the DevTools is the ability to change your viewport to both predefined sizes and anything in between. Let’s see this in practice. Once we launch DevTools we can use Cmd+Shift+M to open up this option. We then have the ability to select a device we’d like to view from the dropdown menu. Here can be seen three different views of AirBnB’s homepage created using the Device Toolbar in DevTools.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Three different views of AirBnB’s homepage created using the Device Toolbar

When working with a website it’s easy to forget that not everyone views your product through the one screen that you spend most of your day looking at. When performing analyses, or deciding on product changes, it’s important to always consider how users on different device perceive things differently due to their screen sizes.

For example, with the AirBnB images above it can be seen that each presents a different view. Starting with Desktop we first see the header containing different menu options, followed by the category choice below as well as the introduction to Plus.

The tablet image is fairly similar but we can see that the menu has now disappeared; how would this affect user navigation? We can also see that “Homes around the world” is now in first view; how does this affect the clicks?

Moving to mobile we see a more compressed version of what we saw on the tablet. All three sections are shown on first-view but the restaurants card is partially hidden; does this lead to fewer clicks?

Using the DevTools it’s possible to quickly switch between the views without the hassle of resizing the screen, with the added bonus of being able to see the view for specific devices. This can help you to quickly pick-up on display issues or discover potentials for improvement.

Understand Page Load Timings

Continuing along the vain of understanding how the web is experienced by different users, we can use the DevTools to investigate page load timings.

When a user initially lands on a website there is a lot information that they must load, including layouts, product data and images. Needless to say, the decision process for how each of these parts is loaded is very complex. When working from an office with a high-speed internet connection it’s rare to see any problems, but this can be different for users with a mobile internet connection or from regions with poorer internet connections.

Using the Network tab it’s possible to do two things:

  1. Throttle the connection speed
  2. See the timeline for the page load

Throttling the connection speed means that we can step into the shoes of those with worse internet connections. It effectively mimics what it’s like to have a different connection. In the example below, the network is set to a slow connection by selecting the Slow 3G option in the menu revealed by clicking the arrow in the top right of the Network tab in DevTools.

Once throttled, it is easy to see that not everything loads at once as you might expect from using a high-speed connection. To see the exact order, the Timeline shows snapshots of the page at different points in the load time. It can be created by simply refreshing the page once you have the Network tab open.

Image for post
Image for post
How the timeline displays snapshots.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Some of the different views of Lazada seen by guests with slower internet connections.

Armed with an understanding of the load timings, it is possible to start improving the user experience.

In the first Lazada screenshot shown above it can be seen that they load frames to show where the products will eventually be; this gives the user an idea of what to expect and shows that the page is still working to get information for the user. In the second screenshot, the product information has loaded which allows the user to start interacting with the page without needing to wait for the imagery. Doing this allows them to save precious time where the user would have otherwise been waiting. Finally, the full page is loaded and the user can interact with all the features available.

Edit the Web

Now let’s explore how we can use DevTools to edit the web that we see.

Using the Elements tab, it’s possible to interact with the static elements of the page and change them to what is convenient for us. For example, if you right-click on anything on the page and click Inspect it will open that section in elements as shown below. On the right are all the CSS properties of that item. In the screenshot, I’ve edited the colour from black to red for the title, as well as made some other cosmetic changes.

Image for post
Image for post
If your grandmother was Etsy’s design lead.

In the case above, the design is inarguably worse, but as mentioned at the start of the article, it can be useful for team members to take this approach to show minor changes they would like implemented by their dev teams.

Changes aren’t just limited to colour, it’s possible to change all sorts of things such as the spacing around blocks, the text, any images or even the font size. Most things that can be changed by a dev team can also be changed by you.

Now DevTools aren’t all work and no play. One of my favourite uses of DevTools is to edit Google search results, such as the one below.

Image for post
Image for post
The State of Jye — what a marvellous country.

Countless times in the office we’ve been arguing over random facts such as the diameter of the Earth or the number of countries. If the side you’re arguing for is incorrect, you can always ‘edit the truth’ until it works in your favour.

This is possible with the following command entered in Console (remember, navigate there with Cmd+Shift+C):

document.designMode = 'on';

With this, the text on any page becomes editable like a word document (this actually has to do with how Medium works).

While this may not achieve anything useful, it is certainly good for a laugh!

Wrapping Up

We’ve shown how it’s possible to use Chrome DevTools to investigate competitors, see what’s not working with add-ons, change your viewport, understand page load timings and edit the web; all of which can help digital marketers, product managers or anyone working with a website to do their job more efficiently. It’s a tool which I use every day and I hope that you will too!

Finally, if you want to test your new found skills, try editing the sentence below:

_______ is awesome.

If you’re not sure what to fill it with, you can always try Jye.

If you’d like to read about how I’ve used the DevTools to create an auto-follow script, check this out:

If you enjoyed reading this, please don’t forget to leave a clap or two, or three… 👏👏👏🔄

Already an expert in the DevTools? What’s your favourite feature? Let me know in the comments.

Image for post
Image for post
Image for post
Image for post

The Startup

Medium's largest active publication, followed by +732K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app