frontend debugging

大转转FE

Jan 21, 2025 · Frontend Development

code‑inspector‑plugin: A Frontend Development Tool for Fast Source‑Code Location and IDE Integration

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.

IDE IntegrationWebpackcode-inspector

0 likes · 24 min read

code‑inspector‑plugin: A Frontend Development Tool for Fast Source‑Code Location and IDE Integration

Rare Earth Juejin Tech Community

Apr 1, 2024 · Frontend Development

Resolving Large Number Precision Issues in Ant Design Table Selection Popup

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.

Ant DesignJSON parseJavaScript

0 likes · 5 min read

Rare Earth Juejin Tech Community

Oct 31, 2023 · Frontend Development

Debugging a Missing Footer Share Button in Production Using Chrome’s File Override Feature

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.

Chrome DevToolsFile OverrideProduction Issue

0 likes · 9 min read

Debugging a Missing Footer Share Button in Production Using Chrome’s File Override Feature

TAL Education Technology

Jun 8, 2023 · Frontend Development

Diagnosing and Fixing Web Page Memory Leaks with Chrome DevTools

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.

Chrome DevToolsJavaScriptMemory Management

0 likes · 8 min read

Diagnosing and Fixing Web Page Memory Leaks with Chrome DevTools

IT Services Circle

Mar 24, 2022 · Backend Development

Diagnosing Intermittent White‑Screen Issues Caused by Nginx Proxy and HTTP Connection Mismatch

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.

HTTP 1.0Keep-AliveLoad Balancing

0 likes · 6 min read

Diagnosing Intermittent White‑Screen Issues Caused by Nginx Proxy and HTTP Connection Mismatch

政采云技术

Dec 23, 2021 · Frontend Development

Practical Chrome DevTools Debugging Techniques for Frontend Production Environments

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.

Chrome DevToolsJavaScript MinificationLocal Overrides

0 likes · 9 min read

Practical Chrome DevTools Debugging Techniques for Frontend Production Environments

Efficient Ops

Aug 12, 2019 · Information Security

When ISPs Hijack Your HTTP Requests: A Front‑End Debugging Case Study

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.

Chrome flagsHTTP securityISP hijacking

0 likes · 7 min read

When ISPs Hijack Your HTTP Requests: A Front‑End Debugging Case Study