Chrome Dev Tools – More Advanced Tips for Better Debugging
Tags: howto, debuggingtools, developertools, testmobilelayouts
Published: 2018-12-12 22:37:41

---
title: Chrome Dev Tools – More Advanced Tips for Better Debugging
published: true
tags: How To,debugging tools,developer tools,test mobile layouts
canonical_url: https://dirkstrauss.com/chrome-dev-tools-advanced-debugging-tips/
---

Chrome Dev Tools – There are a few advanced debugging tips in the Chrome Browser for Web Developers that provide incredible valuable. [In the previous article](https://dev.to/dirkstrauss/chrome-developer-tools--easy-web-debugging-you-need-to-know-4bko-temp-slug-1396917), we looked at some basic debugging tips that you should know. In this article, we will delve a little deeper and see what else is available to web developers in [Chrome Dev Tools](https://amzn.to/2UxaIzx) (this is an affiliate link).

## Chrome Dev Tools makes debugging easy

Chrome Dev Tools are a collection of web developer tools that are built directly into the Chrome Browser. You are able to make changes on the fly without recompiling your code. You can also debug and resolve issues quicker. This helps web developers build sites faster and create more stable web applications that scale across different devices properly.

### Looking for something else? Try these links instead:

- [Chrome Developer Tools – Easy Web Debugging You Need to Know](https://dev.to/dirkstrauss/chrome-developer-tools--easy-web-debugging-you-need-to-know-4bko-temp-slug-1396917)
- [Sass CSS – This Awesome Extension Will Make You Sassy](https://dev.to/dirkstrauss/sass-css--this-awesome-extension-will-make-you-sassy-3def-temp-slug-408589)
- [The Unbelievably Powerful Multi Select. Increase Productivity Now](https://dirkstrauss.com/the-unbelievably-powerful-multi-select/)

Combine this with Sass CSS and you are able to style you web application easily by targeting specific breakpoints. Breakpoints are the points where your site’s content will be responsive to a specific device it’s being viewed on. The layout is then changed to provide the user with the best viewing experience possible.

## Making code look pretty

![Chrome Dev Tools Make Code Look Pretty](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-pretty-code-1.png?w=640&ssl=1)

Sometimes you need to gain a bit more clarity when viewing a file in the Inspector. This is especially true for script files. Luckily you can click on the curly braces and Chrome Dev Tools will open a new file with the formatted code. In the screenshot above, you can see that I am viewing a script in the **Sources** tab.

## Throttling for slow 3G

![Chrome Dev Tools Network Slow 3G](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-network-slow-3g.png?w=640&ssl=1)

Some times you need to be cognisant of the fact that some of your users will need to access your site when they do not have a fast connection. Chrome Dev Tools allows web developers to throttle their web applications to mimic slow network speeds.

On the **Network** tab, click on the **Online** dropdown and select one of the presets or add a custom Network Throttling Profile.

## Adding breakpoints to scripts

![Adding breakpoints in Chrome Dev Tools](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-add-breakpoints.png?w=640&ssl=1)

If you need to debug one of your scripts, Chrome Dev Tools allows you to do this via the **Sources** tab. Select the script in the page tree to the left and click on the line number that you want to add a breakpoint to.

The next time your script is run, the code will stop at the breakpoint you set.

![Chrome Dev Tools Step Controls](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-debugger-controls.png?w=640&ssl=1)

To navigate your script, you can click on the step controls. These are:

- Resume script execution
- Skip the next function call
- Step into the next function call
- Jump out of the current function
- Step

You can also  **Deactivate breakpoints** and  **Pause on exceptions** if required.

## Event Listener Breakpoints

![Event listener breakpoints in Chrome Dev Tools](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-event-listener-breakpoints.png?w=640&ssl=1)

Another nice feature in Chrome Dev Tools is the **Event Listener Breakpoints** window. This allows you to pause the code execution when a specific event listener executes.

In the **Sources** tab, click on the **Event Listener Breakpoints**  window and expand the events. You can then check the event you want to break for. When that event listener executes, Chrome Dev Tools will pause allowing you to inspect the code. 

## Adding Expressions

![Chrome Dev Tools Adding Expressions To Watch Window](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-add-expression-to-watch.png?w=640&ssl=1)

The **Watch** window in Chrome Dev Tools allows web developers to add expressions. These are then added to the Watch window. You can see the values of variables currently in scope from the **Scope** window.

## Log to the Console Window

![Using the Console Window in Chrome Dev Tools](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-console-window.png?w=640&ssl=1)

Chrome Dev Tools allows web developers to log information to the **Console** window. If you add _console.log_ to your script, that information will be output to the **Console** window.

You can access the **Console** window from the **Console tab**  or as a drawer that is displayed next to any of the other windows. To open it as a dedicated **Console** panel, press _Ctrl+Shift+J_ or _Cmd+Opt+J_ on Mac.

## Save your Console Output

![Save Console Output in Chrome Dev Tools](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-save-console-output.png?w=640&ssl=1)

If you need to save the output of your **Console** window, Chrome Dev Tools allows you to do this by right-clicking and selecting **Save as…** fromt eh context menu.

## Preserve Console History

![Chrome Dev Tools Preserve Console History](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-preserve-console-history.png?w=640&ssl=1)

Chrome Dev Tools allows web developers to preserve the Console History **between** page refreshes. This option is not on by default. To enable it, click on the settings icon. Then check the **Preserve log** checkbox.

Messages output to the Console window will be preserved until you clear the Consol or close the tab.

## Testing a Code Fix

![Edit code in Chrome Dev Tools](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-edit-script-code.png?w=640&ssl=1)

If you have found a bug in your script, you can edit the code right from inside Chrome Dev Tools. You don’t need to leave Chrome Dev Tools UI to change the script code. 

If your code is currently paused at a breakpoint, click on the **Resume script execution** button. Then add or edit the script as needed. You will notice that I just added a _console.log_ to output the word **Hello**. Also notice that the file is marked as modified.

To save your changes, press _Ctrl+S_ on Windows or _Command+S_ on Mac. Note that changes to this file are not saved to the file system. When you run the script again, the change I made is displayed in the **Console** window.

## Audit Website Speed

![Run site audit in Chrome Dev Tools](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-run-audit.png?w=640&ssl=1)

Chrome Dev Tools allows you to audit your website speed. It is recommended you browse your web page in **Incognito** mode. To run your page with Incognito mode in Visual Studio, [check out Scott Hanselman’s article](https://www.hanselman.com/blog/VisualStudioWebDevelopmentTipAddChromeIncognitoModeAsABrowser.aspx) on enabling this in Visual Studio.

To start the audit, click on the **Audits** tab. You can then set several options for your audit. You can select to audit the **Mobile** version or  **Desktop** version of your site.

The **Audits** option allows you to select which categories of audits to run. Because I am only interested in the performance of the site, I only selected the **Performance** option.

You can also throttle the page based on specific mobile device connections. Lastly, the **Clear storage** option allows you to delete all storage before loading your web page. This is similar to a visitor viewing your page for the first time. To audit repeat visitors, uncheck the **Clear storage** option.

### Running your Audit

When you are ready, click on the **Run audits** button.

![Chrome Dev Tools Performance Metrics](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-performance.png?w=640&ssl=1)

Because we used simulated throttling, Chrome Dev Tools now extrapolates the time your page would load on a mobile device based on how long it would take on a desktop. It isn’t actually throttling your CPU or network.

When the audit report loads, it displays your performance baseline. Your performance score is shown at the top of the report. The higher this number, the better. It also displays various metrics for your site.

You can hover over a metric to learn more about it and to access the documentation for the specific metric.

![Chrome Dev Tools Opportunities and Diagnostics](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-opportunities.png?w=640&ssl=1)

Lower down in the **Opportunities** section, the report displays some tips to improve the performance of your site. The **Diagnostics** section displays more detailed information on exactly what happened.

Chrome Dev Tools Audits can give you valuable insights as to the performance and bottlenecks of your site. There is a lot more to learn here. [Check out the excellent support article](https://developers.google.com/web/tools/chrome-devtools/speed/get-started) on Google’s Tools for Web Developers site.

## Simulate Mobile Devices

![Set device mode in Chrome Dev Tools](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-view-mobile-devices.png?w=640&ssl=1)

If you need to check the responsive layout of your site across different devices, you can let Chrome Dev Tools simulate specific mobile devices.  To do this, click on the **Toggle device toolbar** icon in the top left corner. You can also press _Ctrl+Shift+M_.

![Specify specific mobile device in Chrome Dev Tools](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/chrome-dev-tools-view-as-iphone-x.png?w=640&ssl=1)

Your browser window will now change the layout of your site as if it was being viewed on a different device. In this case I selected the iPhone X, but you can select several other devices from the dropdown.

To cater for different breakpoints, you need to target these in your stylesheets. I use [Sass CSS](https://dev.to/dirkstrauss/sass-css--this-awesome-extension-will-make-you-sassy-3def-temp-slug-408589) to easily target different mobile breakpoints in my stylesheets.

## Wrapping up

Chrome Dev Tools provide web developers a rich set of debugging tools that enable you to fine tune your web application. There is a lot more you can do in the tools (more than I can cover in a single article). [Have a look at the documentation](https://developers.google.com/web/tools/chrome-devtools/) Google provides to learn more.

The post [Chrome Dev Tools – More Advanced Tips for Better Debugging](https://dirkstrauss.com/chrome-dev-tools-advanced-debugging-tips/) appeared first on [Programming and Tech Blog](https://dirkstrauss.com).