This article explains how the zzChromeTools Chrome extension tackles the often‑overlooked “invisible time killers” in frontend development by injecting AOP‑style hooks into the main world, capturing beacon requests, and presenting them in a lightweight DevTools panel, dramatically reducing cognitive load and debugging time.
The article introduces code‑inspector‑plugin, an open‑source plugin for bundlers like webpack, Vite, and Rspack that lets developers click a DOM element in the browser to instantly open the corresponding source file in their IDE, detailing installation, configuration, usage, implementation principles, and common troubleshooting tips.
This article recounts a production white‑screen caused by missing node polyfills after upgrading to webpack 5, explains how the undefined process.env variables triggered the crash, and shows how to diagnose and resolve the issue using DefinePlugin or a polyfill plugin.
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 guide walks you through practical techniques for reproducing and debugging hard‑to‑replicate mobile web issues using Charles rewrite rules, VConsole injection, source‑map addition, and DevTools tricks for Select and hover style debugging.
During a daily stand‑up, a team member struggled with a bug where a data‑selection modal using Ant Design's Table failed to display selected rows correctly due to large numeric IDs losing precision in JavaScript, and the issue was resolved by preventing automatic JSON parsing of 16‑digit strings.
PageSpy, now with over 3000 GitHub stars, introduces multi‑platform mini‑program debugging for WeChat, Alipay and UniApp, plus a session‑replay feature that records network requests and console logs, enabling developers to export, share, and replay logs for efficient bug investigation.
PageSpy is Huolala’s open‑source front‑end remote debugging suite, comprising three repositories for the web UI, server API, and client SDK, with plugin‑based interception of console, network, storage, and other browser APIs, plus a WebSocket‑driven debugging client and strong data‑security guarantees.
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 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.
Script Error, a generic message caused by cross‑origin restrictions, hides real JavaScript failures; this article explains its origins, current workarounds like crossorigin and CSP, compares how major sites handle it, and proposes systematic solutions for future web development.
This article details a step‑by‑step investigation of an intermittent white‑screen problem on a web application, revealing that Nginx’s use of HTTP 1.0 short connections caused mismatched static resource versions across backend servers, and explains how updating the affected server’s frontend bundle resolves the issue.
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 walks through a puzzling drag‑and‑drop sorting bug in a Vue admin table, explains why the virtual DOM diverged from the real DOM, and shows that adding a unique row‑key to the el‑table element resolves the issue while highlighting best coding practices.
This article details a severe memory‑leak crash observed on a Tencent Classroom FLV live‑stream page during IMWebConf 2020, outlines the systematic reproduction steps, identifies the culprit as a fetch‑interception mechanism in an internal reporting tool, and presents a whitelist‑based fix to prevent future crashes.
This guide shows how to integrate the Whistle proxy with frontend projects—whether using webpack devServer, a traditional setup without build tools, or custom plugins—by configuring domain‑based rules, handling CGI mocks, and leveraging exclude filters to enable seamless local debugging via real online URLs.
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.
Source maps bridge compiled code and original sources, enabling precise debugging for JavaScript and CSS; this guide explains the source map format, key fields, and practical Webpack configurations—including devtool options, module mapping, and a custom loader for CSS URL resolution—to optimize both development and production workflows.
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.
A detailed investigation reveals how ISP-level HTTP hijacking injects malicious JavaScript, causing front‑end script failures, and outlines diagnostic steps, code analysis, and Chrome flag workarounds to mitigate the security issue.
This article explains how to use SourceMap files to trace minified JavaScript errors back to their original source lines, covering overall design, code examples, error reporting workflow, CI integration, storage strategies, and future monitoring enhancements.
This guide shows front‑end developers how to use Fiddler with the Willow plugin, Switch Host, and Nginx to proxy static resources, enable mobile device testing, and forward API calls, providing practical tips, configuration steps, and common pitfalls for efficient debugging.
