1 views collected around this technical thread.
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 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 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 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 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 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 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.