no_mkd

Chrome DevTools

Tips & Tricks

1. Table View

console.table(arr2/obj, [arrColName]); // Displays object properties/values or multi-dimensional array keys/values in table format

2. Timing

console.time/timeEnd(str); // Used in pairs

3. Snippets

You can put your own debugging utility library in here, which is very convenient.

4. Image Color Picker

Open an image in the browser, inspect the element, set an arbitrary color value, and use the color picker to pick a color.

5. Common Shortcuts

Ctrl + Shift + f    Search across files
Ctrl + Shift + o    Find function definition
Ctrl + p            Go to Sources panel
Ctrl + Shift + c    Inspect element
Ctrl + L            Go to specific line
ESC                 Show/Hide console
Ctrl + L            Clear console

0. Main Panel

1. Common Features

Device simulation (landscape/portrait toggle), touch event simulation (enabled by default)

2. Less Common Features

Network simulation (mobile network performance optimization), geolocation and accelerometer simulation, debugging media queries

2. Elements

1. Common Features

Element selection, temporary modifications, viewing CSS rules, event listeners

2. Less Common Features

DOM Breakpoints (insert breakpoints triggered on subtree modifications/attribute modifications/node removal, corresponding to DOM Level 3 node update events), drag and drop nodes to modify DOM structure, Force element states like hover/active

3. Network

1. What can the Network panel do?

• Which resource started downloading last?

• Which resource took the longest to download?

• Who initiated that network request?

• How much time was spent loading that component?

2. Common Features

View resource loading status and resource URLs, debug Ajax (e.g., XHR for weather on Baidu), replay XHR

3. Less Common Features

View HTTP request/response headers and bodies, evaluate network performance (focusing on timing)

4. Two Important Timelines

The blue line represents the DOMReady event. The condition for this event to fire is: the browser has finished parsing the DOM structure of the entire HTML document. Generally, front-end developers listen to this event to reliably find elements in the document. Before this event fires, only half of the HTML might have been downloaded, and the desired element might not yet exist.

The red line represents the load event. The condition for this is: all JS, CSS, and images for the entire page have finished downloading. The progress bar seen by the user no longer shows a "busy" status. This is "loaded" from the user's perspective.

5. Timing Records (Resource Timing API)

1. Start

2. Redirect start

3. Redirect end

4. App cache start

5. DNS lookup start

6. DNS lookup end

7. (Secure) TCP connection start

8. TCP connection end

9. Request start

10. Response start

11. Response end

All the above data can be obtained through window.performance.getEntries(), which can be used directly in the page (similar to the console object).

6. Resource Details

• Stalled/Blocking: Preparation before sending the request, such as TCP connection reuse (Chrome supports 6 TCP connections per domain),

• Proxy Negotiation: Time spent connecting to the proxy server

• DNS Lookup: DNS query time (if the browser hasn't cached the DNS record)

• Initial Connection / Connecting: Time spent initializing the connection, such as TCP handshake, SSL connection, etc.

• SSL: SSL handshake time

• Request Sent / Sending: Time spent sending the request

• Waiting (TTFB): Time spent waiting for the response (the first byte) to return

• Content Download / Downloading: Time spent receiving the response data

4. Sources

1. Common Features

View external source files, [Conditional] breakpoints (line-of-code breakpoints / event breakpoints) debugging.

2. Less Common Features

Modify files with built-in version control, Format minified code (the {} icon), persistent script snippets (multi-line console with syntax highlighting), Blackbox scripts (exclude script files you don't care about).

3. Breakpoint Types

• Line-of-code breakpoints

• DOM breakpoints (ES5)

  • Subtree modifications

  • Attribute modifications

  • Node removal

• XHR breakpoints (intercept XHR to specific URLs)

• Event listener breakpoints (listen for specific events)

Breakpoint debugging shortcuts: F8 Resume, F10 Step Over, F11 Step Into, Shift+F11 Step Out

5. Timeline: Rendering Performance Optimization

1. Features

• Detailed timing chart (including resource downloads, script execution, rendering, repainting, etc.)

  

  The green line represents "First Paint," which may be earlier than DOMContentLoaded. "Paint" indicates Chrome requesting the GPU to draw the frame.

  

• Check for memory leaks (Force Garbage Collection)

  

  

• Event timing analysis

  

6. Profile (Performance Optimization)

1. Metrics

CPU, memory usage, script execution time

2. What can performance optimization do?

• Check if the page is using too much memory

• Check for memory leaks

• View GC frequency

3. Memory Usage

The illustration shows a blank page; around 2MB is the minimum memory usage.

(The GC mechanism of the V8 engine is not traditional reference counting/mark-and-sweep; it uses a young generation + old generation + promotion mechanism. The young generation uses the Scavenge algorithm (traversing the object tree), and the old generation uses mark-and-sweep + mark-compact.)

Checking for memory leaks combined with the Timeline panel is quite tedious. For details, please see Memory Analysis with Chrome Developer Tools, [JavaScript Memory Profiling](performance optimization/JavaScript Memory Profiling - Google Chrome.html)

It can also detect DOM node leaks, which are a type of memory leak where DOM fragments might not be recyclable in certain situations.

4. View JS Statement Timing

7. Resources

1. Common Features

cookie

2. Less Common Features

localStorage, appCache, Session Storage, IndexedDB, Web SQL, Frames (DOM object frame layer structure, separating images/HTML/CSS/JS)

8. Audits: Loading Speed Optimization

Measure page load time and provide optimization suggestions.

9. Console

1. Common Features

Calculator, test JS code

2. Less Common Features

Get element information (e.g., src of all images or count total tags), Command Line API (e.g., $, $$, $_, $x), console.assert(expr, str); equivalent to if (expr) {console.log(str)},

10. Settings

Disable JS, disable cache

11. Special Features

Special Feature 1: Remote Debugging

Two-way synchronization between Android and PC

Supports debugging in mobile browsers/native apps, supports port forwarding, supports virtual host mapping.

Prerequisites:

1. Chrome 32+

2. Android USB connection

3. Browser debugging requires Android 4.0+ and Android Chrome (the PC version of Chrome must be newer than the Android version).

4. App debugging requires Android 4.4+ and WebView.setWebContentsDebuggingEnabled(true);

Steps:

1. Enable USB debugging, open Chrome on the phone, and navigate to the page to be debugged.

2. Open Chrome on PC, go to chrome://inspect, and check "Discover USB devices".

3. Click "inspect" in the device list to start remote debugging.

[Testing on Huawei 4.2.2 Android Chrome 39, 42 and PC Chrome 43 failed for browser remote debugging; the device was not detected.]

Special Feature 2: CSS Preprocessing

SASS (SCSS), LESS, Stylus

1. Install Ruby, then install Sass or Compass via gem.

   gem sources --remove https://rubygems.org/

   gem sources -a https://ruby.taobao.org/

   gem sources -l

   gem install sass

   gem install compass

2. Enable source maps.

3. Transpile Sass and start debugging.

   sass --watch --scss --sourcemap style.scss:style.css

[Note: Watch efficiency is extremely low; it takes 2 minutes to detect changes and regenerate the map.]

Special Feature 3: Workspace

Using Chrome as an IDE

Add directories, persist changes, on-the-spot modifications, code completion, highlighting, and formatting.