# chromedevtools/devtools-frontend

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/chromedevtools-devtools-frontend).**

3,945 stars · 679 forks · TypeScript · BSD-3-Clause

## Links

- GitHub: https://github.com/ChromeDevTools/devtools-frontend
- Homepage: https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/README.md
- awesome-repositories: https://awesome-repositories.com/repository/chromedevtools-devtools-frontend.md

## Topics

`chrome` `chrome-devtools` `devtools` `instrumentation` `javascript`

## Description

This project is a specialized browser debugging interface designed to monitor DOM elements, network traffic, and JavaScript execution. It provides a client-side user interface for inspecting and debugging web applications, allowing for the real-time modification of CSS styles and the investigation of the JavaScript runtime.

The toolkit includes dedicated analysis tools for WebAssembly, featuring disassembly highlighting, scope inspection, and binary execution profiling. It also provides a network traffic inspector for analyzing HTTP requests and a CSS style editor for testing properties and at-rules.

The system covers a broad range of capabilities including DOM tree modification, frontend performance profiling with CPU throttling, and service worker debugging. It also handles source resource management, such as mapping network assets to local files and pretty-printing minified code, while supporting multi-language localization.

The project is developed using TypeScript and employs a component-based architecture with on-demand module loading.

## Tags

### User Interface & Experience

- [Developer Tooling Interfaces](https://awesome-repositories.com/f/user-interface-experience/developer-tooling-interfaces.md) — Provides a specialized client-side user interface for inspecting and debugging web applications. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/README.md))
- [CSS Inspection Tools](https://awesome-repositories.com/f/user-interface-experience/css-inspection-tools.md) — Provides a visual editor for inspecting and testing CSS properties and at-rules in real-time. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/))
- [CSS Style Editors](https://awesome-repositories.com/f/user-interface-experience/css-style-editors.md) — Provides a visual environment for inspecting, editing, and testing CSS properties and at-rules in real time.
- [Event Listener Debugging](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/dom-event-listeners/event-listener-debugging.md) — Displays active event listeners on elements and provides a configurable list of event breakpoints for troubleshooting. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/))
- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Uses a library of reusable buttons and data grids to maintain visual consistency across tools.
- [State-Synced Declarative Interfaces](https://awesome-repositories.com/f/user-interface-experience/template-based-ui-systems/state-synced-declarative-interfaces.md) — Syncs the interface with state changes using templates to avoid manual DOM manipulation.

### Web Development

- [Web Application Debugging](https://awesome-repositories.com/f/web-development/web-application-debugging.md) — Provides a comprehensive integrated interface for inspecting and troubleshooting DOM, CSS, and JavaScript during web application execution.
- [HTML DOM Manipulators](https://awesome-repositories.com/f/web-development/html-dom-manipulators.md) — Allows direct editing of the DOM tree structure through the user interface to test layout changes. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/feature-specs/))
- [Pretty Printing](https://awesome-repositories.com/f/web-development/code-minifiers/pretty-printing.md) — Generates formatted versions of minified script resources to improve readability during debugging. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/resource_management.md))

### Development Tools & Productivity

- [Browser](https://awesome-repositories.com/f/development-tools-productivity/application-debugging/remote-debugging/browser.md) — Provides a specialized frontend for monitoring DOM elements, network traffic, and JavaScript execution within a browser instance.
- [Breakpoint Managers](https://awesome-repositories.com/f/development-tools-productivity/breakpoint-managers.md) — Tracks and controls execution pause points to facilitate step-through debugging of the code. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main))
- [Bytecode-to-Source Mapping](https://awesome-repositories.com/f/development-tools-productivity/compiled-language-debugging/bytecode-to-source-mapping.md) — Translates positions between raw bytecode and original source files to enable debugging in the original language. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/language_extension_api.md))
- [Symbol Resolution Plugins](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/debugging-inspection-tools/debugging-and-inspection-tools/runtime-debugging/debug-symbol-stripping/binary-debugging-support/debug-symbol-extractors/symbol-resolution-plugins.md) — Associates loaded scripts with specific plugins based on language and symbol type to handle variable transformations. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/language_extension_api.md))
- [Document Element Inspection](https://awesome-repositories.com/f/development-tools-productivity/element-metadata-inspection/document-element-inspection.md) — Provides an interface for iterating through and identifying HTML elements and attributes in a tree structure for structural verification. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/))
- [Web Resource Organization](https://awesome-repositories.com/f/development-tools-productivity/source-file-management/web-resource-organization.md) — Tracks and organizes scripts, stylesheets, and HTML files from network, local filesystem, and browser extension sources. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/resource_management.md))
- [Bytecode-to-Source Mapping](https://awesome-repositories.com/f/development-tools-productivity/source-map-generators/event-to-source-mapping/bytecode-to-source-mapping.md) — Maps compiled bytecode and runtime coordinates back to original source files for accurate debugging.
- [Target Lifecycle Management](https://awesome-repositories.com/f/development-tools-productivity/targeting-utilities/browser-target-discovery/target-lifecycle-management.md) — Provides programmatic creation and control of browser tabs and workers as session targets. ([source](https://chromedevtools.github.io/devtools-protocol))
- [Web View Inspectors](https://awesome-repositories.com/f/development-tools-productivity/web-view-inspectors.md) — Provides a specialized frontend for inspecting API objects and editing CSS properties within the browser engine. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/playbook.md))
- [Executed Script Tracking](https://awesome-repositories.com/f/development-tools-productivity/executed-script-tracking.md) — Associates parsed script objects in the engine with original source files and URLs for execution analysis. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/resource_management.md))
- [UI-Backend Protocol Specifications](https://awesome-repositories.com/f/development-tools-productivity/protocol-definitions/ui-backend-protocol-specifications.md) — Specifies methods and events in structured definition files to automate communication between the UI and the backend.
- [Service Worker Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/service-worker-debugging-tools.md) — Views and manages the state and lifecycle of registered service workers through a dedicated interface. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main))
- [Web API Debugging Interfaces](https://awesome-repositories.com/f/development-tools-productivity/web-api-debugging-interfaces.md) — Provides specialized interfaces and automatic breakpoints to implement and tune complex web platform features. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/playbook.md))

### Networking & Communication

- [Network Traffic Analyzers](https://awesome-repositories.com/f/networking-communication/network-traffic-analyzers.md) — Displays request headers and initiator views to analyze communication between the client and server. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main))
- [Network Traffic Inspectors](https://awesome-repositories.com/f/networking-communication/network-traffic-inspectors.md) — Provides a diagnostic interface for monitoring HTTP requests and analyzing headers via protocol metadata.
- [Interactive Protocol Testing](https://awesome-repositories.com/f/networking-communication/traffic-protocol-inspection/interactive-protocol-testing.md) — Inspects real-time requests and allows sending manual commands via a structured editor to test browser responses. ([source](https://chromedevtools.github.io/devtools-protocol))
- [JSON Message Bus Communication](https://awesome-repositories.com/f/networking-communication/json-based-communication-protocols/json-message-bus-communication.md) — Uses a structured JSON message bus to send commands and receive events between the frontend and the browser engine.

### Programming Languages & Runtimes

- [Runtime Execution Debugging](https://awesome-repositories.com/f/programming-languages-runtimes/expression-evaluators/javascript-runtimes/runtime-execution-debugging.md) — Enables evaluating code snippets and managing breakpoints to inspect variable states and step through application logic.
- [Runtime Expression Evaluation](https://awesome-repositories.com/f/programming-languages-runtimes/expression-evaluators/javascript-runtimes/runtime-expression-evaluation.md) — Allows executing JavaScript code snippets and logging values in real-time to inspect runtime results. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/javascript.md))
- [Runtime Source Mapping](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-source-mapping.md) — Translates compiled runtime coordinates into original source locations by coordinating source maps and language plugins. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/using_source_maps.md))
- [Debugging Tools](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/webassembly/debugging-tools.md) — Includes tools for analyzing WebAssembly disassembly, inspecting scope, and profiling binary execution performance.
- [Execution Debugging](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/webassembly/execution-debugging.md) — Pauses execution and navigates through WebAssembly functions using breakpoints and stepping capabilities. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/webassembly.md))
- [Performance Profiling](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/webassembly/performance-profiling.md) — Provides dedicated profiling tools to analyze how WebAssembly binary functions impact runtime performance. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/webassembly.md))
- [Scope Inspection](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/webassembly/scope-inspection.md) — Displays the current state of variables and types in a scope view when execution is paused. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/webassembly.md))
- [Source Code Formatting](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-formatting.md) — Applies syntax highlighting and pretty-printing to source files to ensure code remains readable. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/javascript.md))
- [WebAssembly Binary Analysis](https://awesome-repositories.com/f/programming-languages-runtimes/webassembly-binary-analysis.md) — Analyzes WebAssembly binary modules through disassembly highlighting, scope inspection, and performance profiling.

### Software Engineering & Architecture

- [Debugger API Control](https://awesome-repositories.com/f/software-engineering-architecture/feature-extensions/browser-extension-apis/debugger-api-control.md) — Implements browser extension instrumentation to control breakpoints and edit live styles via debugger APIs. ([source](https://chromedevtools.github.io/devtools-protocol))
- [Error Symbolization](https://awesome-repositories.com/f/software-engineering-architecture/error-handling/error-object-creation/error-symbolization.md) — Resolves remote error objects into a parsed representation including the error message and a symbolized stack trace. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/using_source_maps.md))
- [Headless Logic Decoupling](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling.md) — Isolates core business rules and state management from the view layer to enable browser-less testing.
- [On-Demand Frontend Modules](https://awesome-repositories.com/f/software-engineering-architecture/module-loading-systems/on-demand-frontend-modules.md) — Loads specific feature code on demand to minimize initial startup time and memory footprint.
- [Protocol Stack Parsing](https://awesome-repositories.com/f/software-engineering-architecture/stacks/stack-trace-formatters/stack-trace-demystifiers/protocol-stack-parsing.md) — Converts raw protocol data or error strings into structured stack trace models containing synchronous and asynchronous frames. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/using_source_maps.md))
- [Runtime Stack Analysis](https://awesome-repositories.com/f/software-engineering-architecture/stacks/stack-trace-formatters/stack-trace-generation/interpreter-stack-traces/runtime-stack-analysis.md) — Collects and formats structured stack traces for runtime exceptions and syntax errors to pinpoint issues. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/javascript.md))

### System Administration & Monitoring

- [Frontend Performance Monitoring](https://awesome-repositories.com/f/system-administration-monitoring/application-performance-monitoring/application-performance-monitoring/frontend-performance-monitoring.md) — Analyzes execution timelines and implements CPU throttling to identify performance bottlenecks in web applications.
- [Browser Debugging Protocols](https://awesome-repositories.com/f/system-administration-monitoring/browser-debugging-protocols.md) — Monitors and manipulates real-time network traffic and WebSocket communication between the browser and server.
- [Application Logging](https://awesome-repositories.com/f/system-administration-monitoring/diagnostic-tools/diagnostics/telemetry-and-log-collectors/application-logging.md) — Displays error, warning, and informational logs from the application and environment to diagnose runtime issues. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/policy/console-policy.md))
- [Application Performance Timelines](https://awesome-repositories.com/f/system-administration-monitoring/execution-path-visualization/thread-execution-state-visualizers/execution-timeline-visualizers/application-performance-timelines.md) — Visualizes application runtime events and navigation breadcrumbs to identify performance bottlenecks. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main))

### Part of an Awesome List

- [Disassembly Highlighting](https://awesome-repositories.com/f/awesome-lists/devtools/webassembly/disassembly-highlighting.md) — Applies syntax highlighting to WebAssembly disassembly to improve the readability of instructions and types. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/checklist/webassembly.md))

### Data & Databases

- [Resource-to-File Mappings](https://awesome-repositories.com/f/data-databases/resource-to-file-mappings.md) — Links resources loaded from the network to local filesystem directories to enable persistent edits and overrides. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/docs/resource_management.md))

### Testing & Quality Assurance

- [CPU Throttling Simulators](https://awesome-repositories.com/f/testing-quality-assurance/cpu-throttling-simulators.md) — Ships configurable CPU throttling presets to simulate lower-end hardware during performance testing. ([source](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main))