web debugging | BestHub

JD Tech Talk

Feb 28, 2025 · Frontend Development

Understanding Chrome DevTools, the CDP Protocol, and Building Custom Debugging Tools

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.

CDPChrome DevToolsFrontend Development

0 likes · 11 min read

Understanding Chrome DevTools, the CDP Protocol, and Building Custom Debugging Tools

IT Services Circle

Jun 12, 2022 · Frontend Development

Diagnosing and Resolving Slow or Unresponsive Web Pages After Entering a URL

This article explains a step‑by‑step method for troubleshooting a web page that fails to load after entering its URL, covering network checks, DNS resolution, TCP/HTTP handshakes, status‑code analysis, and front‑end resource inspection to pinpoint issues such as blocked CDNs.

DNSNetwork Troubleshootingcdn

0 likes · 5 min read

Diagnosing and Resolving Slow or Unresponsive Web Pages After Entering a URL

Weimob Technology Center

Apr 29, 2022 · Frontend Development

How Hubble Transforms Front‑End Debugging with Full‑Page Session Recording

This article provides a comprehensive overview of Hubble, a front‑end session recording tool, covering its architecture, deployment methods, core features, encountered challenges, and future enhancements, illustrating how it streamlines bug reproduction and improves development efficiency.

frontendperformancerrweb

0 likes · 14 min read

How Hubble Transforms Front‑End Debugging with Full‑Page Session Recording

vivo Internet Technology

Dec 22, 2021 · Frontend Development

In-Depth Analysis of Chrome DevTools Architecture, Protocols, and Performance Tools

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.

AndroidCDPChrome DevTools

0 likes · 27 min read

In-Depth Analysis of Chrome DevTools Architecture, Protocols, and Performance Tools

WeDoctor Frontend Technology

Aug 10, 2020 · Frontend Development

Master Web Debugging with Whistle: A Frontend Engineer’s Guide

This guide explains why a flexible proxy tool like Whistle is essential for frontend development, covering its features, installation, configuration, HTTPS handling, matching rules, and common use‑cases such as host binding, request/response replacement, script injection, remote console, and Weinre integration.

HTTPSProxyWhistle

0 likes · 18 min read

Master Web Debugging with Whistle: A Frontend Engineer’s Guide

JD Tech

Aug 30, 2018 · Frontend Development

Using Whistle: A Node‑Based Cross‑Platform Web Debugging Proxy for Frontend Development

Whistle is a Node.js‑based cross‑platform web debugging proxy that lets developers view and modify HTTP(S) and WebSocket traffic, offering features like host binding, request replacement, response status manipulation, script/style injection, and powerful mock data generation for front‑end development.

MockProxyWhistle

0 likes · 9 min read

Using Whistle: A Node‑Based Cross‑Platform Web Debugging Proxy for Frontend Development

Tencent IMWeb Frontend Team

Oct 12, 2016 · Operations

Master Whistle: A Step‑by‑Step Guide to the Node‑Based Web Debugging Proxy

This tutorial walks you through installing, launching, configuring browser proxy settings, and creating rules with Whistle, a Node‑powered web debugging proxy, showing practical examples such as replacing a site’s logo and mapping directories to local files.

ProxyWhistlehttp

0 likes · 4 min read

Master Whistle: A Step‑by‑Step Guide to the Node‑Based Web Debugging Proxy