Master Chrome DevTools: 15 Essential Debugging Techniques for Frontend Developers

The LEGO rendering side targets C‑end users, whose devices vary, leading to many bugs. To quickly resolve bugs, developers need flexible debugging tools, especially Chrome’s DevTools.

0x01 Dynamic modification of element class names

Adding or removing class names is common in conditional logic; DevTools allows direct dynamic modification/activation/disable of class names.

Select the element in the DOM tree.

Click to activate .cls.

Use the checkbox to toggle the class.

Use the “Add new class” input to add defined class names.

Besides modifying class names, you can also dynamically add CSS rules.

0x02 Force activation of pseudo‑classes

Some effects rely on pseudo‑classes like :active or :hover, which do not work when the mouse is over the DevTools console. Use “Force State” to activate them.

Select the element with the pseudo‑class effect.

Click :hov.

Check the desired pseudo‑class.

Debug the style in the Styles panel.

Also right‑click the element in the DOM tree → Force State → select the pseudo‑class.

0x03 Compute style to locate CSS rule

In complex DOM hierarchies, a property like font-size may be overridden multiple times. Use the Computed panel to filter the property, expand it, and jump to the effective rule in the Styles panel.

In the Computed panel, filter the property name.

Expand to see all definitions; the first line is active.

Hover to see an arrow, click to jump to the rule in Styles.

Modify the style in the active rule.

This helps identify differences such as Android’s “tiny” font size causing layout issues.

0x04 Color picker

CSS color values can be HEX, RGBA, RGB, HSLA. Chrome’s color picker lets you dynamically change colors without memorizing the 16,581,375 possible values.

Find the CSS property that sets the color.

Click the color swatch to open the picker.

0x05 Shadow picker

The shadow picker visualizes box-shadow values.

Click the offset icon next to box-shadow to open the picker.

Adjust offset, blur, spread, and inset/outset using the color picker panel.

0x06 Quick CSS value adjustment

Use the mouse wheel with modifiers to fine‑tune values: Alt + wheel for ±0.1, plain wheel for ±1, Shift + wheel for ±10, Ctrl + wheel (or Command on macOS) for ±100.

0x07 Animation debugging

Open the Console panel (Esc), click the three‑dot menu, select “Animations” to replay, pause, adjust speed, and inspect animation frames and their associated DOM nodes.

0x08 Copy console variable to clipboard

Use the copy() function to copy complex objects from the Console without data loss.

0x09 Visual page editing

Make the page editable with document.body.contentEditable="true" or document.designMode="on" in the Console.

0x0A Simulate weak network

In the Network tab, select “Online” → a throttling profile to simulate slower connections, or create a custom profile with upload/download speeds and latency.

0x0B XHR replay

Right‑click an XHR entry in the Network tab and choose “Replay”. You can also copy the request, modify parameters, and re‑execute with curl.

curl 'https://www.baidu.com/s?ie=utf-8&csq=1&pstg=21&mod=2&isbd=1&cqid=8e79bf0d0004f40d&istc=8905&ver=0QxsJN2ZOr4aje7f6_0UmO9Z20VzWyiNCYC&chk=5fc9f524&isid=F000276D55E53989&ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100&_ck=115040.0.-1.-1.-1.-1.-1&rsv_isid=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_22159_33216_33215_33185&isctg=5&rsv_stat=-2&rsv_sug7=100' \
  -H 'Connection: keep-alive' \
  -H 'Pragma: no-cache' \
  -H 'Cache-Control: no-cache' \
  -H 'Accept: */*' \
  -H 'is_xhr: 1' \
  -H 'X-Requested-With: XMLHttpRequest' \
  -H 'is_referer: https://www.baidu.com/' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100' \
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
  -H 'Cookie: ...' \
  --compressed

Copy the response JSON via the context menu.

0x0C Console variations

12.1 console.log / info / debug / warn / error

Different log levels display with distinct colors.

12.2 Placeholders

Use %o for objects, %s for strings, %d for numbers.

12.3 CSS styling with %c

Apply inline CSS to console output.

12.4 Table display

Use console.table() to render JSON data as a table.

12.5 Grouping

Organize logs with console.group() and console.groupEnd().

0x0D Screenshot

Chrome can capture area, full page, node, or viewport screenshots via the Capture tool.

0x0E Performance

Record page load, interaction, repaint, and memory usage in the Performance tab.

0x0F Source tab

The Source tab lets you view all static resources, set breakpoints, and debug JavaScript with call stack, scopes, and XHR breakpoints.

0x10 Coverage

Coverage shows JavaScript and CSS usage percentages, highlighting unused code.

0x11 Rendering

Rendering panel highlights repaint/reflow areas and shows frame rates.

0x12 Layers

Layers visualizes DOM layer relationships to diagnose rendering performance.

0x13 Mobile H5 debugging

Chrome can debug Android WebViews via chrome://inspect; Safari can debug iOS.

Summary

Chrome DevTools provides a rich set of features for web developers. Mastering these tools speeds up development and bug resolution, but practical experience remains essential.