Chrome DevTools Debugging Techniques for Frontend and Node.js Developers

For programmers, mastering debug tools and methods is an essential part of the work. For frontend developers, Chrome DevTools is the most common debugging tool. This article introduces debugging techniques using Chrome DevTools to help developers improve their debugging skills.

01 Style Debugging

1. Quick Add/Modify Class: In the DOM panel, select an element, click the .cls button on the right side, and you can add or remove existing classes through the selection box and input field.

2. View Computed Styles: Some styles in development may require calculation to get the actual value, such as rem and percentage values. There may also be cases where different priorities cause overriding. When you want to see the actual value on the page, select the DOM element and use the Computed panel to see the element's actual dimensions and the effective styles.

3. Color Picker/Eyedropper: When debugging CSS colors, Chrome's color picker makes it easier to select colors, and the eyedropper allows you to pick colors directly from the page.

02 Functionality Debugging

1. Environment Configuration: During development, you may need to locate and reproduce issues in specific environments. Chrome provides various configurations including device model (UA), screen dimensions, network conditions, and more.

2. Optimize Source/Network Display: When you need to view the original files of a page, it may be difficult to find them in the Source panel. You can modify the display method by unchecking "Group by folder" to display files in a flat list. Similarly, in the Network panel, you can modify the sort order by clicking on column headers.

3. Copy Data and Requests: When dealing with data and request issues, you may need to copy the corresponding data and requests for further investigation. Chrome provides convenient copy methods: use the copy() function in the console to copy data to the clipboard, and in the Network panel, right-click on a request to copy it as fetch or cURL.

03 Node.js Debugging

In addition to frontend pages, we can also use Chrome DevTools to locate and analyze issues with our Node.js services. To analyze Node.js runtime status, we can use tools like v8-profiler-next (https://github.com/hyj1991/v8-profiler-next) to generate code execution profiles over a period of time. Example code:

'use strict'
;
const
fs =
require
(
'fs'
);
const
v8Profiler =
require
(
'v8-profiler-next'
);
const
title =
'good-name'
;
// set generateType 1 to generate new format for cpuprofile
// to be compatible with cpuprofile parsing in vscode.
v8Profiler.setGenerateType(
1
);
// ex. 5 mins cpu profile
v8Profiler.startProfiling(title,
true
);
setTimeout(
()
=>
{
const
profile = v8Profiler.stopProfiling(title);
profile.export(
function
(
error, result
)
{
fs.writeFileSync(
`
${title}
.cpuprofile`
, result);
profile.delete();
});
},
5
*
60
*
1000
);

After running this code in the Node environment, a profiler file will be generated. You can import this file into Chrome DevTools for analysis by navigating to JavaScript Profiler and clicking Load.

The default view is the Heavy view, where DevTools lists functions from highest to lowest impact on your application. Clicking to expand shows the full path of these functions for easy location in your code. Two important metrics:

Self Time: The execution time of the function's own code (excluding any calls)

Total Time: The execution time of this function including all functions it calls

Additionally, DevTools provides flame charts for more dimensional display. Click the top-left corner to switch to Chart view. The flame chart displays according to our CPU sampling timeline, making it easier to see the JS code execution behavior of your Node.js application during the sampling period. Two important metrics:

Aggregated Self Time: The aggregated total execution time of the function's own code during CPU sampling (excluding other calls)

Aggregated Total Time: The aggregated total execution time of this function including all functions it calls during CPU sampling

04 Summary

Chrome DevTools provides feature-rich development and debugging tools for web applications and Node.js developers. This article describes some tool usage scenarios and methods. Of course, tools are only an aid to development. To efficiently develop and fix bugs, you need to continuously accumulate and summarize experience through development practice to discover and locate issues more efficiently.