20 Chrome Dev Tools
tricks

/ SprUng, CODING, LEARN, Quick-Notes, TOOLS / 1 minute of reading

RESOURCES

  • LEARN
  • https://developers.google.com/web/tools/chrome-devtools/workspaces
  • https://developers.google.com/web/tools/chrome-devtools
  • https://www.codecademy.com/articles/use-devtools


20 TricksOverview - Workspace

Chrome DevTools – 20+ Tips and Tricks

https://developers.google.com/web/tools/chrome-devtools

Table of contents

Google Chrome is currently one of the most popular web browsers used by developers today. According to StatCounter, as of September 2019, Google Chrome holds 63.72% browser market share across the globe. The Chrome DevTools can greatly improve your workflow by helping you develop, test, and debug your websites right within your browser. Many of you probably use Chrome DevTools on a regular basis, but check out these additional tips and tricks to enhance your productivity.

What are the Google Chrome DevTools?#

The Google Chrome Developer Tools, also known as Chrome DevTools, are web authoring and debugging tools built right into the browser. They provide developers deeper access into their web applications and the browser. You can do everything from testing the viewport on a mobile device to editing a website on the fly, and even measuring the performance of an entire website or individual assets.

To use the latest version of the developer tools, you may want to use Chrome Canary, which is the experimental version of Chrome that is updated nightly. Chrome Canary can be run side by side with Chrome so you can check any issues that may arise.

You can enhance your development by going to chrome://flags and enabling the Developer Tools experiments feature. You can then use the settings panel in developer tools to toggle individual experiments.

We will be mentioning some of the Chrome DevTools keyboard shortcuts below, but you can see a full list of them on the Google Developer website.

Opening Chrome DevTools#

There are a few ways to open Chrome DevTools, which means you can use the method that works best for you.

Open from browser menu#

You can open Chrome DevTools from the Chrome menu. Go to More Tools and then click Developer Tools.

Open by right clicking#

You can also open Chrome DevTools from the right click menu. Right click on any page element and then click Inspect (or Inspect Element).

Open with keyboard shortcuts#

You can also use the following shortcuts:

  • Mac: Cmd + Opt + I
  • Windows: F12 or Ctrl + Shift + I

Tips and tricks#

Below are just a few of the hundreds of things you can do with Chrome DevTools. It also makes for a good crash course on the tools if you haven’t used them before.

Quick file switching#

You can easily access any file within a current project or web page by pressing Cmd + P (Ctrl + P) when Chrome DevTools is open and searching for the name.

Pretty print#

Did you know Chrome DevTools has a pretty print featured built in? You can easily change the formatting of your minimized code by clicking on {}.

Edit HTML element#

You can edit HTML on the fly and preview the changes by selecting any element, choosing a DOM element within the panel, and double clicking on the opening tag to edit it. The closing tags are automatically updated for you. Any changes will show up in your browser as if the change had actually been made to the source code.

Edit CSS property#

Just like with editing HTML, you can also change CSS in Chrome DevTools and preview what the result will look like. This is probably one of the most common uses for this tool. Simply select the element you want to edit and under the styles panel you can add/change any CSS property you want.

Search source code#

You can quickly search all of your source code by pressing Cmd + Opt + F (Ctrl + Shift + F).

JavaScript breakpoints#

When debugging JavaScript it is sometimes useful to set breakpoints. You can set breakpoints in Chrome DevTools by clicking on the line number you want to break at then press Cmd + R (Ctrl + R) to refresh the page. The page will then run right to that breakpoint.

Go to line number#

You can automatically skip to a line in your code by pressing Cmd + O (Ctrl + O) and using the line syntax. In the example below we entered :375:18 to go to line 375, column 18.

Multiple cursors#

Ever have multiple lines you need to add something to? You can easily add multiple cursors by pressing Cmd + Click (Ctrl + Click) and entering information on multiple lines at the same time.

Dock position#

You can also change the Chrome DevTools dock position. You can either undock into a separate window, or dock it on the left, bottom, or right side of the browser. The dock position can be changed by pressing Cmd + Shift + D (Ctrl + Shift + D) or through the menu.

Clear cookies#

You can also easily clear cookies from the Chrome DevTools. This can be especially useful when testing and debugging third party plugins. In the Application panel go to Storage > Cookies to either clear all cookies or an individual cookie.

Device mode#

You can test your website and media queries to see if your responsive design is breaking anywhere by going into device mode. Or perhaps you need to see at what resolution the page is breaking at so you know where to apply a media query.

To enter device mode click on the small phone and tablet icon in Chrome DevTools or press Cmd + Shift + M (Ctrl + Shift + M). You can then choose what device and resolution to emulate, add a network throttle, and even define the device orientation.

Color palette and picker#

The custom color palette will pull from the website style sheet. You can access them by simply clicking on the color block in the style panel. There is also a color picker that can be used to pick out colors from a web page directly.

Change color format#

You can toggle between RGBA, HSL, and hexadecimal formatting by pressing Shift + Click on the color block.

Toggle element state#

Have you ever tried to figure out where a hidden style is coming from, say the :hover selector? In Firefox Developer Tools you can see this when selecting the element, but not in Chrome DevTools. However, there is something better, called Toggle Element State. This allows you to force an element state, like :hover, so that you can then use the styles panel to see the properties.

Copy image as data URI (base64 encoded)#

You can save any image from a webpage out as a data URI or rather base64 encoded. There is no need to use a free online converter as it is already built into Chrome DevTools. In the Network panel click on an image and then right click on it to have the option to Copy image as data URI.

You will get the image in the following format:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAIAAADdvvtQAAAgNklEQVR42u2dd5gVZZbG/WNn1dmdWXdmNu88O7uz7uzO7jozKiqCSFJERUQFBARBRAREcm5yzlmBBprcQJNBck6SY5MbJOfO+XY3d39wd3qaqltfV9X9qm71vd/31OMfcu/tCm+d75z3vOecJ...

Network filmstrip#

The network filmstrip feature allows you to see how your page renders from start to finish by grabbing screenshots throughout the loading process. This can be a great way to see how your font is rendering and if you’re dealing with issues such as FOIT or FOUT.

In the Network panel click on the settings icon, check the Capture screenshots option, and then press Cmd + R (Ctrl + R) to refresh the page. After the page has refreshed it will show you how your page rendered from start to finish.

Monitor performance#

The performance feature allows you to easily see what is costing you the most time and resources. The performance details can be broken down in many different ways, such as the time, activity, and source.

In the Performance panel press Cmd + E (Ctrl + E) and then Ctrl + R (Cmd + R) to refresh the page. Record the amount of time that you want to be monitored. You can then click Stop and evaluate the results.

DOMContentLoaded#

We have a great article on blocking the DOM and how to fix it. This feature allows you to see the exact DOMContentLoaded time and total load time. Checking these values can be beneficial in improving the overall performance of your website or application.

In the Network panel click on the settings icon, check the Show overview option, and then press Cmd + R (Ctrl + R) to refresh the page. A blue line will show up for DOMContentLoaded and a red line for total load time. Normally everything that is left of or touching the blue line are assets that are blocking the DOM, or also referred to as render blocking resources.

Network throttling profiles#

You can now also add custom networking throttling profiles. This can be beneficial if you are wanting to test more accurately at a specific speed.

In the Network panel click the Throttle drop down and then Add.... In the Network Throttling Profiles click Add custom profile... and add the profile with your specifications.

Security check#

The Security panel can be very useful to check if the SSL/TLS certificate is valid, whether or not the connection is secure, and if all resources are served securely. This is great for for debugging HTTPS migrations and quickly fixing mixed content warnings.

In the Security panel press Cmd + R (Ctrl + R) to refresh the page. It will then display the relevant security information.

Validating Google AMP HTML#

Google AMP is an open source initiative to speed up the web using lightweight HTML pages. For Google to index the AMP version of your page you must make sure it is validated.

In the Console panel append #development=1 to the AMP version in your browser’s address bar and then press Cmd + R (Ctrl + R) to refresh the page. It will display if it successfully validated below. Read more about AMP validation errors.

Summary#

As you can see Chrome DevTools has numerous features to help you develop better, debug faster, and measure more efficiently the performance of your website or application. The tips mentioned above are just a few of the many features available. Do you have a favorite DevTools feature that we missed? If so, let us know in the comments below.

  • Read more in-depth about Chrome DevTools on the official Google Developers page.
  • Subscribe for Chrome DevTools updates on their web update page.

Chrome Dev Tools

A good grasp of how to use Chrome (or equivalent) Dev Tools are one of the most fundamental skills a web developer must have. From monitoring network calls to debugging Javascript to testing out CSS style changes, Dev Tools provides a useful repertoire of functions to help you develop, test, and optimize a web page.

Why Chrome?

There is not a particular reason why I chose Chrome Dev Tools over other browsers, other than that I use Chrome and Chrome Dev Tools more than other browsers. Chrome Dev Tools does offer a lot of useful features, some of which may apply to cutting-edge web development standards, that may not be present on other browsers.

Opening Chrome Dev Tools

Windows: F12 or Ctrl+Shift+I Linux: Ctrl+Shift+I Mac: Cmd+Opt+I

CDT and the DOM

DOM stands for Document Object Model. It’s a convention for representing and manipulating objects in HTML, XML, and XHTML documents (characterized by the angle brackets).

What can I do?

  1. Inspect any element
  2. View and change CSS rules
  3. View the element’s box model

Inspecting Elements

There are several ways to select and inspect a particular element. One can:

Click on the element selection tool, then click on an element to jump to that position in the document.

Click on a specific element in the Dev Tools Elements view.

What Can I Do With These Elements?

Now that you have selected an element, you can right-click on the element to see some of the actions you can do:

Especially notable is the ability to toggle states such as active, hover, etc.

Styling

One of the most useful aspects of Dev Tools is the ability to change styles easily.

With an element selected, you can easily view its styles.

The “Styles” tab contains all of the CSS rules that govern the selected element.

We can see that the selected element has an id of “overlay”, and a class of “shell”, and that there are CSS rules defined for those selectors. The overridden styles are struck through. You can also toggle element state in this tab.

If you have animations or transitions with a timing function defined, you can also use the cubic bezier editor to help you with your animations.

Box Model

The Computed Box Model provides the final computed values of margin, padding, width, height, etc. This is particularly useful when creating responsive layouts, or when there’s an awkward gap in your layout that you can’t find the source of. You can access this view by clicking on the computed tab.

Network

Another very useful aspect of Dev Tools is the Network tab. This allows you to view all requests made from this webpage. This includes requests for images, files, fonts, scripts, etc.

It also helps you determine if there is a major bottleneck to page load times. In this image, try to find at least one request of each of the following types:

  1. HTML Document
  2. Font
  3. Stylesheet
  4. Javascript File
  5. Image

Example Case Study

Cubemania is a Rubik’s Cube timing website that allows users to save their times. I use it a lot. Let’s analyze some of the requests it makes, specifically when a user logs in.

Now let’s open up Chrome Dev Tools and switch over to the Network Tab.

Make sure that the red “record” button in the top left is active.

Now I’ll click log in and see what requests are made.

We’re hit by a barrage of requests. Let’s look at the most interesting ones…

There’s a POST request at the very top. Usually these are for form submissions. Let’s click it open and take a more detailed look.

This a lot of information! We can deduce some things about how Cubemania works on the server side! For example, we now know that this POST request is making a call to the http://www.cubemania.org/session endpoint, and that our session is stored in a _Cubemania_session cookie. We can also see all of our request headers, which we might be able to use to recreate this request manually. If we scroll further down, we see the really interesting bit: the form data.

Now, I blacked out my password, of course, but as you can see, we know exactly what fields are passed into the POST request! Now, you might notice that there is also an authenticity_token field. This is generated on the server side to try to make sure that you cannot spoof these requests. A bit of light Googling reveals that this is common in Ruby on Rails web apps. However, if we access the contents of the HTML first, we will be able to find the token and pass it into the POST request.

Resources Tab

The resources tab contains information on the majority of client-side storage options. This includes local storage and cookies.

Local Storage

If we click open the local storage section, we can find that Cubemania stores all of my times in the local storage.

Cookies

We can also view the cookies that Cubemania has stored. In here we do indeed see the _Cubemania_session cookie we saw mentioned previously.

Exercises

1) Go on the Cubemania website and answer these questions:

  • Click on the ‘Users’ tab. What type of CSS selector is used to apply the yellow background on hover effect?
  • Search for “naitian” in the search box. Monitor the network traffic. What is/are the query string parameter(s) of the search query? What is/are the value(s) of the parameter? Is this request a GET request or POST request? Why does that make sense?

2) Visit this wonderful lawn care website: http://kamronsoldozy.github.io

  • Look in the Console. What are some errors? Are any of these errors related to each other?
  • Based on these errors, what part of the home page is broken? What is it supposed to do?
  • How can we fix this?

Bonus) Solve a Rubik’s cube in under 30 seconds.

Further Reading

Chrome Developer Tools has a lot more to offer than just what we covered here. If you’d like to find out more, here are some materials to keep you occupied.

Exercise Answers

1a.) #content a

1b.) Parameter: q, Value: naitian, GET request, There is no need for a POST request, since this value does not need to be kept confidential.

2a.) There are three errors. The failure to load jquery.min.js is directly tied to the Uncaught ReferenceError: $ not defined.

2b.) By viewing the details of the ReferenceError, we see that we need jQuery in image_slide.js, which is supposed to provide an image slider.

2c.) If we load in jQuery, the image slider should no longer be broken, and will alternate between the 2 images.

Scroll to Top