Chrome Advanced Debugging Techniques

In daily front-end development, console.log is often the first tool we reach for when troubleshooting. While it can solve most basic problems, when facing complex logic or asynchronous scenarios, it's not only inefficient but can also introduce new bugs due to frequent code modifications. This article systematically covers the core usage and advanced techniques of breakpoint debugging, helping you pinpoint issues precisely in different front-end scenarios and achieve a qualitative leap in debugging efficiency.

---

1. Common Breakpoint Methods: Precisely Locating Code Execution Flow

1.1 Conditional Breakpoint

Not every execution needs to be paused. You can set breakpoints to trigger only under specific conditions, filtering out irrelevant execution paths:

1. In the Sources panel, click on a line number to set a regular breakpoint.
2. Right-click the breakpoint → Select Edit breakpoint.
3. Enter a conditional expression, for example:
   • id > 100: The breakpoint triggers only when id is greater than 100.
   • user.name === 'admin': Triggers only for a specific user.
   • list.length > 10: Triggers only when the array length exceeds 10.

1.2 Logpoint

Logs information without pausing code execution. It's the best practice for replacing temporary console.log statements:

1. Right-click a line number → Select Add logpoint.
2. Enter what you want to print, e.g., 'Current value:', x, y.
3. When the code reaches this point, it automatically prints to the console without pausing execution.

Core Advantage: More convenient than manually adding console.log, and it doesn't require modifying the source code, avoiding the risk of accidentally committing debug code!

1.3 XHR/fetch Breakpoints

Used to trace the source of API request calls, quickly locking down the code location that initiated the request:

1. Switch to the Sources panel → Find XHR/fetch Breakpoints on the right.
2. Click the + button and enter a URL keyword (e.g., api/user).
3. When the page makes a request matching this keyword, the breakpoint automatically triggers.
4. Check the Call Stack to precisely trace back to where the request was initiated.

1.4 Event Listener Breakpoints

Used to trace the code execution entry point triggered by user interactions (clicks, mouse moves, keyboard input, etc.):

1. Switch to the Sources panel → Find Event Listener Breakpoints on the right.
2. Expand an event category (e.g., Mouse) → Check click.
3. When the corresponding event is triggered on the page (e.g., clicking a button), execution automatically pauses.
4. Check the Call Stack panel to find where the event handler function is called and the complete call chain.

Typical Scenario: When you're unsure where a button's click logic is written, enable the click breakpoint and click the button. It will directly stop at the corresponding handler function's code line.

2. Overrides

2.1 Pain Points

Have you ever experienced this desperate moment?

• A bug occurs in production, but you can't reproduce it locally.
• You want to quickly verify a CSS fix, but don't want to go through the cumbersome deployment process.
• API data is problematic, front-end logic is stuck, and you can only create fake data to get by.
• Production code is all minified/obfuscated, and adding a log statement for debugging feels nearly impossible.

Overrides can perfectly solve these problems!

2.2 What are Overrides?

Overrides allow you to persistently modify a webpage's CSS, JS, HTML, and other resources directly in the browser. The key point is that as long as the DevTools console remains open, your modifications persist even after refreshing the page. Once you close the console, the webpage reverts to its original online state. This is a perfect debugging tool!

2.3 Configuration Steps

Open DevTools and Set Up a Folder

1. Press F12 or Cmd + Option + I (Mac) to open Developer Tools.
2. Switch to the Sources panel.
3. Click the Overrides tab on the left.
4. Click + Select folder for overrides, and choose a local empty folder (it's recommended to create a dedicated chrome-overrides folder).
5. Click Allow in the prompt to grant Chrome access to the folder.

2.4 Three Core Usage Methods

Method 1: Modifying CSS

Scenario: Quickly verify a style modification plan.

1. Switch to the Elements panel.
2. Select the element to modify.
3. Modify the CSS in the Styles panel on the right.
4. Find the rule file originating from a .css file.
5. Refresh the page; the modification persists!

When a frequently visited website lacks a dark/eye-comfort mode, you can now craft one yourself.

Method 2: Modifying JS Files

Scenario: Add console.log in production code to locate issues.

1. Find the target JS file under the Page tab in the Sources panel.
2. Right-click the file → Select Override content.
3. Edit the code directly in the editor, adding debug statements.
4. Press Cmd + S (Mac) or Ctrl + S (Windows) to save.
5. Refresh the page; your modifications take effect immediately.

Method 3: Mocking API Responses

Scenario: The backend API is problematic, and you want to test front-end logic with fake data.

1. Switch to the Network panel.
2. Refresh the page and find the API request to intercept.
3. Right-click the request → Select Override content.
4. Modify the returned JSON data in the editor that opens.
5. Press Cmd + S / Ctrl + S to save.
6. Refresh the page; the API will return your modified fake data!

3. Snippets

When debugging in the browser, if you have common logic that you need to use frequently, you can save the code in Snippets. You can execute it directly on any page.

Example: Get all image links on the current page. You can store this code snippet.

Usage: Shortcut Command + P (Mac) / Ctrl + P (Win), type !, search for the snippet name you want to execute, select it, and run.

4. Console Panel

The Console panel is primarily used for debugging JavaScript code and is a core debugging tool with high frequency of use.

• Run Code: Execute any JS code, including calling existing JS objects and functions on the page.
• Console Output: Console logs and error exceptions from the code are output here.

4.1 Common console Functions

Function	Description
console.log(str)	Outputs a message to the console.
console.error(str)	Prints an error message. Similar functions include info, warn.
console.table(data [, columns])	Displays data in a table format, very practical. data is an array or object; the second parameter (array) can specify the columns to display.
console.dir(object)	Prints an object in a tree structure, especially useful for DOM objects.
console.assert(false, 'msg')	Assertion output; only outputs the subsequent message when the first parameter is false.
console.trace()	Outputs the execution stack trace at the current position (using breakpoints is more practical).
console.time(label)	Timer, used to calculate elapsed time (milliseconds). Used with timeLog(label) and timeEnd(label).
console.clear()	Clears the console and outputs "Console was cleared".

Basic console output example:

console.log('log'); // Most common log output (default black font), for general debug info
console.info('info'); // Informational output (some browsers show a blue 'i' icon)
console.warn('warn'); // Warning output (usually yellow font or yellow warning icon), alerts potential issues
console.error('error'); // Error output (usually red font with stack trace), indicates a serious error
throw new Error('An error occurred!!!'); // Actively throws a runtime exception, immediately halting execution and outputting the error to the console

Time calculation example:

function sum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    let u = { name: 'sam', age: i };
    sum += i;
  }
  return sum;
}

// Calculate the time taken by a function
console.time('sum'); // [Start timer] Ready to run the marathon from 1 to 100,000
const total = sum(100000); // [Start and finish] Complete the summation from 1 to 100,000
console.timeLog('sum'); // [Check the first stopwatch] Record how long it took to run from 1 to 100,000 (4.43ms)
const total2 = sum(1000); // [Keep running] Ran the summation from 1 to 1,000 again
console.timeEnd('sum'); // [Stop timer] Record the total time from the very beginning to now (5.04ms)

4.2 Advanced Logging Techniques: Improving Readability

When debugging, if you only output the value of a variable, it's often hard to quickly identify the corresponding variable name. In this case, it's recommended to use ES6's shorthand property names (object literal) for wrapping. This way, the console clearly displays key-value pairs, significantly improving readability. If combined with the console.table method for handling structured data, the efficiency of troubleshooting will be even higher.

const name = 'Zhang San', age = '18';
console.table({ name, age }); // Display in table format

4.3 Custom Log Styles: Format Specifiers

The console method has built-in rich format specifiers, allowing developers to flexibly control data types and display styles when outputting logs. Below is a detailed description of each specifier and corresponding execution examples:

Specifier	Description
%c	Applies CSS styles. This specifier consumes the subsequent argument as a CSS rule, adding custom styles (like color, font size) to the output text.
%o or %O	Object output. Used for printing JavaScript objects. Clicking the object name in the browser console expands it to view its internal properties and details.
%d or %i	Integer output. Formats the argument as an integer, supporting formatting operations like zero-padding similar to C language.
%s	String output. Forces the passed argument into a string format for printing.
%f	Floating-point output. Formats the argument as a floating-point number, supporting specifying the number of decimal places.

---

5. Summary: Building a Systematic Debugging Mindset

Mastering the various features of Chrome DevTools is not just about learning a few shortcuts or panel operations; it's about building a systematic, engineering-oriented front-end debugging mindset. From basic console.log to precise breakpoint control, and then to Overrides for hot-fixing production code, these tools together form an indispensable "arsenal" for the modern front-end developer.