Master Chrome DevTools: Console, Elements, Network, Sources, Performance & More

Console Panel

Li Huaxi, front‑end developer at Weiyi Cloud Services, loves tinkering and is a typical cat owner.

Open justwe7.github.io/devtools/console/console.html to follow along. The Console panel records page execution information via console statements and acts as a shell to execute scripts and interact with the page, document, and DevTools.

Shortcut keys:

Windows: Control + Shift + J Mac: Command + Option + J Methods under the console object:

console.clear()

Clears the console.

console.log(), console.info(), console.warn(), console.error()

Common logging methods. Historically info displayed a blue badge before Chrome 2016; now it behaves like log.

console.log('普通信息')
console.info('提示性信息')
console.error('错误信息')
console.warn('警示信息')

Placeholders:

// Multiple arguments separated by commas
console.log(1, '2', + '3')
// %s placeholder
console.log('今晚%s 老虎', '打', '？？？')
// %c placeholder for CSS styling
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')

Supported placeholders: %s – string %d – integer %i – integer %f – floating‑point number %o – object link %c – CSS style string

console.time() / console.timeEnd()

Used together to measure execution time of a code block.

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t') // t: 28.18603515625ms

console.count()

Counts how many times a function is called; can group by a label.

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}
foo('A') // A: 1
foo('B') // B: 1
foo()    // default: 1
foo()    // default: 2
foo()    // default: 3
foo('A') // A: 2

console.trace()

Shows the call stack without setting a breakpoint.

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

Displays tabular data for arrays or objects.

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

console.dir()

Prints an object in a readable format.

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () { alert('justwe7') }
}
console.log(obj)
console.dir(obj)

console.assert()

Shows an error message when the expression is false, without stopping execution.

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代码往下执行呢啊')

console.group() / console.groupEnd()

Groups log output, which can be collapsed/expanded.

console.group('分组 1')
console.log('分组 1-1111')
console.log('分组 1-2222')
console.log('分组 1-3333')
console.groupEnd()
console.group('分组 2')
console.log('分组 2-1111')
console.log('分组 2-2222')
console.log('分组 2-3333')
console.groupEnd()

$ Selector

$_

Stores the result of the last evaluation for reuse.

$0, $1…$4

References the last five inspected DOM nodes.

$ and $$

$(selector)

– wrapper for

document.querySelector()

$$(selector)

– wrapper for

document.querySelectorAll()

$x

Evaluates an XPath expression and returns an array of matching nodes.

$x('//li') // all li elements
$x('//p') // all p elements
$x('//li//p') // p inside li
$x('//li[p]') // li with p

Element Panel

Open justwe7.github.io/devtools/element/element.html to follow along. The Elements panel shows the DOM tree and allows live editing of elements.

Shortcut keys:

Windows: Control + Shift + C Mac: Command + Option +

C

CSS Debugging

style

Select a node, go to the Styles pane, and toggle pseudo‑classes via :hov.

computed

Use the Computed pane to view the final computed styles when many rules overlap.

Adjust numeric values

When a property is selected, use + / - to change by 1 unit, Alt + Arrow for ×10, Ctrl + Arrow for ×100, and Shift + Arrow for ÷10.

HTML Debugging

Toggle visibility

Press H on a selected node to toggle visibility: hidden while keeping layout space.

Store as global variable

Right‑click a node and choose “Store as global variable” to reference it in the console.

Scroll into view

Use “Scroll into view” to jump to a node’s position in a long page.

Edge 3D view

Edge’s DevTools provide a 3‑D view of the DOM hierarchy, useful for visualizing nesting.

DOM Breakpoints

Set breakpoints on attribute changes, subtree modifications, or node removals to pause JavaScript when the DOM changes.

Network Panel

This panel shows detailed information about network requests.

Shortcut keys:

Windows: Control + Shift + I Mac: Command + Option + I Key areas:

Controls – options for request display and appearance.

Filters – choose which resource types appear in the Requests Table.

Overview – timeline of resource loading phases.

Requests Table – list of each request with columns such as Name, Status, Type, Initiator, Size, Time, and Timeline.

Summary – total requests, transferred size, total time, and key events (DOMContentLoaded, load).

(1) Controls & Filters

Use large resource rows

– expands each request row. Capture screenshots – shows a thumbnail when hovering over a waterfall bar. Show overview – displays the overall timeline.

(2) Overview

Shows request count, total transferred size, total time, and markers for DOMContentLoaded and load events.

(3) Requests Table Columns

Name – resource name.

Status – HTTP status code.

Type – MIME type.

Initiator – who started the request (Parser, Redirect, Script, Other).

Size – transmitted size (compressed) and actual size.

Time – total duration and time to first byte.

Timeline/Waterfall – visual timeline of each request.

Network Optimisation Tips

Reduce request queueing by using multiple sub‑domains (for HTTP/1) or avoid it for HTTP/2.

Keep Time‑to‑First‑Byte (TTFB) under 200 ms; investigate network conditions or server processing.

Minimise content download size (e.g., compress images) to improve the Content Download phase.

Sources Panel

Open justwe7.github.io/devtools/debug-js/get-started.html to follow along. This panel is used for JavaScript debugging.

Snippets

Save reusable code fragments (e.g., debounce, throttle) in the Snippets tab for quick access.

Setting Breakpoints

Breakpoint panel

Shows all breakpoints and allows enabling/disabling them.

Specific line breakpoint

Click the line number in the source view to add a breakpoint, then trigger the code.

Global event breakpoint

When the exact location is unknown, set a breakpoint on XHR or other events to catch the code path.

Blackboxing

Mark third‑party scripts as black‑boxed to hide them from the call stack.

DOM Breakpoints

Set breakpoints on DOM modifications directly from the Elements panel.

Performance Panel

Open justwe7.github.io/devtools/jank/index.html in incognito mode to avoid extensions interfering with measurements. The Performance panel records detailed loading timelines, including scripting, rendering, painting, and network activity.

Main Areas

Controls – start/stop recording and configure captured data.

Overview – summary of FPS, CPU usage, and network activity.

Flame Chart – timeline of main thread events with markers for DOMContentLoaded, First Paint, and load.

Details – deeper view of selected events (Bottom‑Up, Call Tree, Event Log).

FPS

Higher green bars mean smoother frames; long red blocks indicate jank.

CPU

Area chart shows time spent on Loading (blue), Scripting (yellow), Rendering (purple), Painting (green), Other (gray), and Idle (white).

Network (NET)

Horizontal bars represent each resource; length shows total time, with a lighter portion for waiting (TTFB) and a darker portion for download.

Flame Chart Details

Vertical lines: blue – DOMContentLoaded, green – First Paint, red – load. Sub‑markers include FP, FCP, FMP, LCP.

Main Thread

X‑axis is time; Y‑axis is call stack depth. Colored bars indicate activity type.

Details Tabs

Bottom‑Up – shows activities that consume the most time directly.

Call Tree – shows root activities that lead to heavy work.

Event Log – chronological list of recorded events.

window.performance API

The Performance interface provides high‑resolution timing and resource data.

performance.now()

Returns milliseconds elapsed since performance.timing.navigationStart with sub‑millisecond precision.

performance.navigation

redirectCount

– number of redirects. type – 0 (navigate), 1 (reload), 2 (back/forward), 255 (undefined).

performance.timing

Contains timestamps for navigation milestones (redirect, DNS lookup, TCP handshake, request/response, DOM loading, DOMContentLoaded, load).

function getTiming() {
  try {
    var timing = performance.timing;
    var timingObj = {};
    var loadTime = (timing.loadEventEnd - timing.loadEventStart) / 1000;
    if (loadTime < 0) { setTimeout(getTiming, 0); return; }
    timingObj['Redirect Time'] = timing.redirectEnd - timing.redirectStart;
    timingObj['DNS Lookup Time'] = timing.domainLookupEnd - timing.domainLookupStart;
    timingObj['TCP Handshake Time'] = timing.connectEnd - timing.connectStart;
    timingObj['HTTP Request/Response Time'] = timing.responseEnd - timing.requestStart;
    timingObj['Time to First Byte'] = timing.responseEnd - timing.navigationStart;
    timingObj['DOM Complete Time'] = (timing.domComplete || timing.domLoading) - timing.domLoading;
    timingObj['DOM Parsing Time'] = timing.domInteractive - timing.domLoading;
    timingObj['Total Network Time'] = timing.responseEnd - timing.navigationStart;
    timingObj['Time to Interactive'] = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
    timingObj['First Contentful Paint'] = timing.domLoading - timing.navigationStart;
    timingObj['Onload Event Time'] = timing.loadEventEnd - timing.loadEventStart;
    timingObj['Full Page Load'] = timingObj['Redirect Time'] + timingObj['DNS Lookup Time'] + timingObj['TCP Handshake Time'] + timingObj['HTTP Request/Response Time'] + timingObj['DOM Parsing Time'] + timingObj['DOM Complete Time'];
    for (var item in timingObj) { console.log(item + ':' + timingObj[item] + '(ms)'); }
    console.log(performance.timing);
  } catch (e) { console.log(performance.timing); }
}
window.onload = getTiming;

performance.memory

Shows JavaScript heap usage: usedJSHeapSize, totalJSHeapSize, and jsHeapSizeLimit. If used exceeds total, a memory leak may exist.

performance.getEntries()

Returns an array of PerformanceEntry objects for each resource, with properties such as name, duration, entryType, and initiatorType.

performance.getEntriesByType()

Filters entries by type (e.g., 'resource') to retrieve specific timing data.

performance
  .getEntriesByType('resource')
  .filter(item => item.name.includes('logo-1024px.png'))

Lighthouse (Audits) Panel

Lighthouse is an open‑source tool that audits page performance, accessibility, best practices, SEO, and PWA compatibility.

The report provides actionable suggestions to improve loading speed and user experience.

Security Panel

Detects whether the page is served over HTTP (insecure) or HTTPS with mixed content.

Mixed content occurs when an HTTPS page loads HTTP resources, exposing the page to man‑in‑the‑middle attacks.

Command Menu (Ultimate Shortcut)

Press Ctrl + Shift + P (Windows) or Command + Shift + P (Mac) to open the Command Menu for quick actions.

Screenshot

Node screenshot – captures the selected DOM node.

Full‑size screenshot – captures the entire page.

CSS/JS Coverage

Open the Coverage panel via the Command Menu, click Reload to start, and view used (blue) vs unused (red) code for each file.

Media Queries

In device mode, enable “Show Media queries” to see which CSS rules apply at the current viewport.

References

Chrome Network – why Size and Time have two rows

Chrome DevTools documentation

Google Chrome‑DevTools guides

Performance panel tutorials

MDN Performance API

Browser rendering process

Setting breakpoints in Chrome

Network Summary analysis