# Chrome and Firefox DevTools. HTTP Protocols and WebSockets

!!! info "Architectural Context"
    Detailed reference for Chrome and Firefox DevTools. HTTP Protocols and WebSockets in the context of Developer Ecosystem.

## Table of Contents

1. [Developer Workspace](#developer-workspace)
  - [Command-Line Tooling](#command-line-tooling)
    - [JSON and YAML Manipulators](#json-and-yaml-manipulators)
  - [Diagnostics and Debugging](#diagnostics-and-debugging)
    - [Browser Developer Tools](#browser-developer-tools)

## Developer Workspace

### Command-Line Tooling

#### JSON and YAML Manipulators

  - **(2024)** [jsontoolbox.com](https://jsontoolbox.com) <span class='md-tag md-tag--warning'>[TYPESCRIPT CONTENT]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — A modern online toolkit offering unified interfaces for compression, conversion, structure validation, and mapping of raw JSON payloads without data leakage risks.
### Diagnostics and Debugging

#### Browser Developer Tools

  - **(2026)** [devtools.chrome.com](https://developer.chrome.com/docs/devtools) <span class='md-tag md-tag--warning'>[NONE CONTENT]</span> <span class='md-tag md-tag--primary'>[DOCUMENTATION]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — The documentation hub for Google Chrome's native development utilities. Explains network packet inspection, layout rendering engines, custom profile snapshots, and live Javascript debugging capabilities.
  - **(2026)** [Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/tools_toolbox/index.html) <span class='md-tag md-tag--warning'>[NONE CONTENT]</span> <span class='md-tag md-tag--primary'>[DOCUMENTATION]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — Official source files and reference manuals documenting the Firefox Developer Tools suite. Outlines its advanced grid layout debuggers, network request visualizers, and raw telemetry profiling.
  - **(2024)** [Port of Firefox's JSON Viewer](https://chromewebstore.google.com/detail/json-viewer/efknglbfhoddmmfabeihlemgekhhnabb) <span class='md-tag md-tag--warning'>[JAVASCRIPT CONTENT]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — A browser extension port bringing Firefox's native, highly interactive JSON viewer layout to Chrome. Implements folding, filtering, syntax highlighting, and visual hierarchy detection for raw JSON responses.
  - **(2024)** [twitter.com/ChromeDevTools](https://x.com/ChromeDevTools) <span class='md-tag md-tag--warning'>[NONE CONTENT]</span>  <span class='md-tag md-tag--warning'>[EMERGING]</span> — Official social channel delivering incremental telemetry upgrades, performance hacks, debugging tips, and experimental profiling capabilities integrated within the Chrome developer ecosystem.
  - **(2022)** [dev.to: My 12 Favorite Chrome Extensions as a Web Developer](https://dev.to/otomer/my-12-favorite-chrome-extensions-as-a-web-developer-56eg) <span class='md-tag md-tag--warning'>[NONE CONTENT]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — A developer-curated list of productivity-focused Google Chrome extensions. Highlights tools tailored for layout styling, security inspection, and high-density JSON schema visualization.
  - **(2022)** [blog.bitsrc.io: Google Chrome Hidden Features Every Developer Should Know](https://blog.bitsrc.io/google-chrome-experimental-features-for-developers-a9a7cc9d1b30) <span class='md-tag md-tag--warning'>[NONE CONTENT]</span>  <span class='md-tag md-tag--warning'>[EMERGING]</span> — Explores experimental diagnostic protocols, visual overrides, and command-palette functions hidden inside the DevTools application framework to streamline daily workflows.
  - **(2021)** [digitalocean.com: How To Debug Node.js with the Built-In Debugger and Chrome DevTools](https://www.digitalocean.com/community/tutorials/how-to-debug-node-js-with-the-built-in-debugger-and-chrome-devtools) <span class='md-tag md-tag--warning'>[JAVASCRIPT CONTENT]</span>  <span class='md-tag md-tag--info'>[COMMUNITY-TOOL]</span> — A comprehensive tutorial on attaching Chrome DevTools directly to Node.js backend processes. Step-by-step guidance on setting execution break points, inspecting call stacks, and detecting memory leaks.

---
💡 **Explore Related:** [Angular](./angular.md) | [Python](./python.md) | [Dom](./dom.md)