This article presents eight practical Chrome DevTools techniques—including designMode editing, request replay, local overrides, quick fetch copying, request filtering, DOM selection shortcuts, on‑the‑fly npm installation, and fast source navigation—to boost debugging efficiency and streamline front‑end workflows.
This guide shows how to capture a page's HAR file with Chrome DevTools, analyze it using a Python script, and generate an Excel report that lists each menu's access time, highlighting requests that exceed a configurable timeout threshold.
This article reviews practical Model‑Chat Plugins (MCP) that front‑end developers can integrate into their workflow—covering Figma, Apifox, Context7, and Chrome DevTools MCPs—explaining setup steps, code examples, and how they dramatically improve efficiency and code maintainability.
Facing page white‑screens, slow first‑paint metrics, and endless compatibility screenshots, developers can now use Chrome DevTools MCP—a new AI‑driven protocol that packages all DevTools capabilities into callable interfaces—to automate debugging, performance analysis, and testing directly from editors like Trae and VSCode, boosting efficiency threefold.
This article explores V8's memory management mechanisms, explaining how browser crashes often stem from memory issues and providing insights into garbage collection, memory leaks, and optimization techniques.
This article explains the components and principles of Chrome DevTools, provides a detailed overview of the Chrome DevTools Protocol (CDP) and its workflow, and guides readers through creating custom debugging tools for platforms such as Android WebView, Roma, and Harmony, highlighting technical challenges and implementation steps.
This article explains Chrome DevTools architecture, the Chrome DevTools Protocol (CDP), its core features and workflow, and guides you through creating custom debugging tools for web, Android WebView, and cross‑platform frameworks like Roma, complete with practical examples and screenshots.
The article explains how Chrome's Recorder feature lets developers capture, replay, edit, and export user interaction flows, turning repetitive manual testing into a one‑click process that speeds up debugging, performance monitoring, and automated test creation.
Chrome 130 adds a suite of visual badges—such as scroll, grid, flex, overflow, container, slot, and media—to the Elements panel, letting developers quickly identify scrollable areas, layout containers, ad frames, and other key page elements for faster debugging and layout diagnosis.
This article walks through a real‑world Vue2 memory‑leak case on a 1 GB industrial control device, showing how DOM nodes balloon during tab switches, how Chrome DevTools can pinpoint the leaking components, and which three code changes finally eliminate the leak.
Chrome DevTools now shows a Self‑XSS warning when an inexperienced user tries to paste code, using a simple heuristic that checks for at least five console‑history entries, requiring the user to type “allow pasting” before execution, to protect against social‑engineered attacks that could steal data or hijack accounts.
The article walks through a real‑world Vue front‑end production bug where a footer share button disappears, explains how to locate the responsible code, and demonstrates using Chrome DevTools’ file‑override capability to modify and test the script until the issue is resolved.
This article explains the fundamentals of Remote Procedure Call (RPC), explores how data moves across OSI layers, compares HTTP and RPC, and provides a complete Node.js JSON‑RPC example with code, error handling, and real‑world use cases such as Chrome DevTools Protocol.
This article explains the fundamentals of breakpoint debugging for web applications, covering the Douyin mini‑program developer tool, Chrome DevTools Protocol basics, browser‑side breakpoint communication, VS Code’s debugging architecture, launch configuration, source‑map handling, and how these concepts can be applied to IDE mini‑program debugging.
This article introduces the fundamentals of source-level debugging for WebAssembly, explains core debugging principles, discusses native and managed program debugging, examines various debugging information formats such as SourceMap and DWARF, and compares several practical debugging solutions—including Chrome DevTools, LLDB with wasmtime or iwasm, and WasmInspect.
This article introduces Chrome DevTools, explains Selenium 4's native CDP support, and provides Java code examples for device‑mode emulation, geolocation, network throttling, HTTP request/response capture, console logging, performance metrics, and basic authentication, enabling more powerful automated web testing.
This article walks through diagnosing V8FatalErrorCallback OOM crashes in an Electron‑based PC Taobao Live client, explores stack analysis, disables compilation cache, adjusts V8 heap limits, compiles a custom Electron without pointer compression, and uses Chrome DevTools Memory and Performance tools along with runtime monitoring to locate and fix the underlying memory leak.
This article explains what web page memory leaks are, identifies common sources such as timers, event listeners, closures, and DOM references, and demonstrates step‑by‑step how to locate and resolve them using Chrome DevTools' Performance and Memory panels.
This article explores the evolution, core principles, and practical solutions for remote debugging of mobile web pages, covering protocols, transport channels, toolchains, and future directions to help front‑end engineers efficiently troubleshoot white‑screen issues on phones.
This article explores the evolution, core principles, and practical techniques of remote debugging for mobile web pages, covering USB and Wi‑Fi transport, protocol details, tool comparisons, and best‑practice recommendations for developers working on hybrid and native‑web applications.
This article explains what Lighthouse is, how to run it via Chrome extensions, DevTools, CLI or Node.js, details its internal architecture, driver and pass configuration, gatherer and trace processing, and shows how audits generate performance reports with scoring based on HTTP Archive data.
This article explores the architecture and implementation of VS Code’s JavaScript Debugger, detailing its use of the Debug Adapter Protocol, breakpoint handling, JavaScript Debug Terminal, automatic browser debugging, profiling, and debug console features, while also showing how OpenSumi adapts the latest debugger version.
This comprehensive guide walks developers through Chrome DevTools' powerful editing, debugging, and override features—including quick CSS/JS tweaks, workspace setup, console utilities, breakpoint strategies, and even Node.js/Deno debugging—empowering efficient front‑end development without leaving the browser.
This newsletter highlights the formation of a JavaScript runtime interoperability group, new Chrome 102 DevTools features, Google’s performance‑boosting private prefetch proxy, a comparison of Vue and React performance, Node.js advantages for microservices, and several recent articles on frontend tooling, image optimization, and modern JavaScript language features.
This article provides a detailed walkthrough of Chrome DevTools configuration and usage—including global settings, shortcuts, element inspection, network throttling, and code extraction—to help Python developers efficiently collect web data, with step‑by‑step instructions, screenshots, and code snippets.
The article walks frontend and Node.js developers through essential Chrome DevTools debugging techniques—including quick class editing, computed style inspection, color picking, environment configuration, source and network panel tweaks, data copying, and using v8-profiler-next to generate and analyze CPU profiles—empowering more efficient issue identification and resolution.
This article explains how the NetEase Cloud Music team built a custom React Native debugging tool by extending Chrome DevTools, covering the devtools frontend module loading, React Native Debugger internals, Chrome DevTools Protocol, and a proxy-based solution to display network requests within the inspector.
This article explains the Chrome DevTools Protocol (CDP), its architecture of frontend, backend, protocol and channels, and provides step‑by‑step instructions with code examples for launching a CDP server, connecting a client, and performing remote debugging of JavaScript, CSS and DOM through WebSocket or other transports.
This article details a systematic debugging process for resolving a Google Maps black screen issue within iOS Safari iframes, demonstrating how to intercept DOM manipulation, utilize Chrome DevTools Overrides to modify third-party scripts, identify initialization dimension constraints, and implement a reliable post-load refresh solution.
This comprehensive guide explores essential Chrome DevTools techniques for debugging frontend applications in production environments, covering methods to distinguish frontend and backend errors, efficiently locate problematic code using global search, debug minified JavaScript with local source maps, and apply real-time code modifications through local overrides.
The article offers a thorough technical examination of Chrome DevTools’s client‑server architecture, the JSON‑based Chrome DevTools Protocol, and performance tooling within Android Chromium 87, guiding front‑end developers and engineers through its history, core implementation, code examples, JavaScript evaluation, performance diagnostics, and broader ecosystem impact.
The article shows how to detect and stop memory leaks in web pages with Chrome DevTools—using heap snapshots, allocation‑instrumentation timelines, and the Performance panel—to expose leaks from globals, closures, detached DOM nodes, excess elements, or console logging, and offers practical coding guidelines to avoid them.
This article presents a collection of practical Chrome DevTools debugging techniques—including various breakpoint types, logpoints, performance profiling, event tracing, setTimeout tricks, SSR inspection, and a binary-search style approach—to help frontend developers locate and resolve bugs more efficiently.
Discover a collection of powerful Chrome DevTools shortcuts and functions—including copy, Store As Global, $ selectors, getEventListeners, monitor, Preserve Log, inspect, and animation tools—that streamline debugging, DOM manipulation, and performance analysis for web developers.
This article provides a practical, experience‑based guide to Chrome DevTools for front‑end engineers, illustrating common features and real‑world scenarios to help developers efficiently debug, profile, and optimize web applications, overcoming the limitations of generic feature‑only tutorials.
This guide walks through Chrome 90 DevTools new features, including the CSS flexbox debugging tool, Core Web Vitals overlay, updated Issues tab, console string formatting, Trust Tokens panel, color‑gamut media feature, PWA warnings, Remote Address Space, performance boosts, and several experimental accessibility and contrast enhancements.
This article explains JavaScript memory leaks, covering their definition, how JS manages stack and heap memory, automatic garbage collection, Chrome DevTools profiling techniques, and common leak patterns such as improper closures, global variables, detached DOM nodes, console logging, and forgotten timers, with detection and mitigation strategies.
This guide explains how to locate the JavaScript responsible for generating URL parameters by inspecting event listeners and searching source files in Chrome, observe its execution with breakpoints, and then replicate the logic in Python using js2py to obtain login credentials.
This guide walks through dozens of Chrome DevTools features—including dynamic class editing, forced pseudo‑classes, computed style inspection, color and shadow pickers, quick CSS value tweaks, animation debugging, console utilities, network throttling, XHR replay, performance profiling, source navigation, coverage analysis, rendering layers, and mobile H5 debugging—to help frontend engineers efficiently troubleshoot and optimize web applications across devices.
The first part of the San DevTools Technical Analysis series explains its dual usage (Chrome extension or npm‑based standalone), outlines the overall architecture—including frontend UI panels, backend injection, a JSON‑based remote debugging protocol, and message‑channel transport—plus core modules such as Bridge, Hook, and Agent, and demonstrates initialization and remote‑debugging flows, setting the stage for deeper protocol exploration.
This guide walks through Chrome DevTools features—including inspecting pseudo‑class styles, temporarily toggling classes, making pages editable, checking placeholder styles, testing performance and SEO, viewing network details, examining event handlers, searching code globally, recording runtime performance, using rendering diagnostics, and exploring application storage—providing step‑by‑step instructions with code snippets and visual examples.
The article explains how to diagnose and improve frontend performance using Chrome DevTools—particularly Lighthouse for synthetic audits and the Performance panel for runtime profiling—while covering key metrics, automation via the Chrome DevTools Protocol, and the distinction between synthetic monitoring and real‑user monitoring.
This comprehensive guide walks you through Chrome DevTools panels—including Console, Elements, Network, Sources, Performance, Lighthouse, Security, and advanced commands—detailing shortcuts, core methods, debugging techniques, performance metrics, and practical tips for front‑end developers to optimize and troubleshoot web applications.
This article explains how to use Chrome DevTools' Performance panel to record and analyze page load, interaction, network, rendering, memory, and flame graph data, helping front‑end developers identify bottlenecks such as long white‑screen times, resource loading delays, and heavy scripting.
This article explains the challenges of debugging a wide range of OTT platforms, reviews existing tools like Eruda, vConsole, and ADB, and introduces a custom remote debugger built on Chrome DevTools Protocol that unifies debugging, JavaScript execution, and data inspection across devices.
This article explores the components of Chrome DevTools, explains the DevTools Protocol structure, details the frontend architecture, and provides step‑by‑step guidance for remote debugging, custom extensions, and session replay using WebSocket forwarding and server‑side recording.
This article compiles and translates the latest Chrome DevTools enhancements from versions 74 to 78, detailing new UI highlights, debugging shortcuts, performance metrics, service‑worker insights, and other practical tools that front‑end developers can immediately apply to improve their workflow.
This article presents twelve practical Chrome DevTools tricks—from quickly locating code lines and inspecting pseudo‑classes to visualizing DOM hierarchies and filtering network requests—helping front‑end developers boost debugging efficiency and master hidden browser features.
This article introduces Chrome DevTools console shortcuts—including $0‑$4 for element references, $ and $$ for query selectors, $_ for the last expression result, and $i for importing npm libraries—explaining their usage to streamline front‑end debugging and testing.
This article explains how to reduce HTTP requests and page load time for H5 web pages by leveraging Chrome DevTools and its WebSocket‑based protocol to capture network metrics, render trees, and screenshots on both PC and Android, providing step‑by‑step debugging and performance‑testing guidance.
This guide reveals dozens of lesser‑known Chrome DevTools features—from enabling Canary builds and experimental flags to powerful console shortcuts, DOM selectors, conditional breakpoints, network overrides, and Node debugging—helping developers debug faster and more efficiently.
This article explains why resource loading optimization is vital for mobile web development, shows how to measure page load speed with Chrome DevTools, breaks down the resource loading lifecycle, and provides practical solutions for queueing, high TTFB, and long download times.
Learn how to efficiently locate and fix JavaScript bugs by reproducing errors, setting breakpoints, stepping through code, inspecting variables with Watch expressions, and editing code directly in Chrome DevTools, all demonstrated through a concrete addition calculator example.
This guide explains how to identify performance bottlenecks in WebGL applications by examining CPU and GPU workloads, using tools such as stats.js, Chrome DevTools, Web Tracing Framework, and offers concrete optimization strategies for shaders, draw calls, state changes, and resource management.
This article explains how GPU acceleration can keep web pages within the 16 ms frame budget, details the browser rendering pipeline, shows how to use Chrome DevTools to inspect composited layers, and outlines practical steps and pitfalls for enabling GPU‑accelerated animations.
Discover 15 powerful Chrome DevTools shortcuts—from quick file search and regex source scanning to multi‑cursor editing, color picking, device emulation, and workspace file editing—that dramatically boost debugging speed and productivity for web developers.
