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, 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 (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
- Sass CSS – This Awesome Extension Will Make You Sassy
- The Unbelievably Powerful Multi Select. Increase Productivity Now
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
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
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
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.
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
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
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
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
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 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
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
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 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.
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.
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 on Google’s Tools for Web Developers site.
Simulate Mobile Devices
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.
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 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 Google provides to learn more.
The post Chrome Dev Tools – More Advanced Tips for Better Debugging appeared first on Programming and Tech Blog.
Top comments (0)