ChromeDevTools/devtools-frontend

Features

• Developer Tooling Interfaces - Provides a specialized client-side user interface for inspecting and debugging web applications.
• Web Application Debugging - Provides a comprehensive integrated interface for inspecting and troubleshooting DOM, CSS, and JavaScript during web application execution.
• Browser - Provides a specialized frontend for monitoring DOM elements, network traffic, and JavaScript execution within a browser instance.
• Breakpoint Managers - Tracks and controls execution pause points to facilitate step-through debugging of the code.
• Bytecode-to-Source Mapping - Translates positions between raw bytecode and original source files to enable debugging in the original language.
• Symbol Resolution Plugins - Associates loaded scripts with specific plugins based on language and symbol type to handle variable transformations.
• Document Element Inspection - Provides an interface for iterating through and identifying HTML elements and attributes in a tree structure for structural verification.
• Web Resource Organization - Tracks and organizes scripts, stylesheets, and HTML files from network, local filesystem, and browser extension sources.
• Bytecode-to-Source Mapping - Maps compiled bytecode and runtime coordinates back to original source files for accurate debugging.
• Target Lifecycle Management - Provides programmatic creation and control of browser tabs and workers as session targets.
• Web View Inspectors - Provides a specialized frontend for inspecting API objects and editing CSS properties within the browser engine.
• Network Traffic Analyzers - Displays request headers and initiator views to analyze communication between the client and server.
• Network Traffic Inspectors - Provides a diagnostic interface for monitoring HTTP requests and analyzing headers via protocol metadata.
• Interactive Protocol Testing - Inspects real-time requests and allows sending manual commands via a structured editor to test browser responses.
• Runtime Execution Debugging - Enables evaluating code snippets and managing breakpoints to inspect variable states and step through application logic.
• Runtime Expression Evaluation - Allows executing JavaScript code snippets and logging values in real-time to inspect runtime results.
• Runtime Source Mapping - Translates compiled runtime coordinates into original source locations by coordinating source maps and language plugins.
• Debugger API Control - Implements browser extension instrumentation to control breakpoints and edit live styles via debugger APIs.
• Frontend Performance Monitoring - Analyzes execution timelines and implements CPU throttling to identify performance bottlenecks in web applications.
• Browser Debugging Protocols - Monitors and manipulates real-time network traffic and WebSocket communication between the browser and server.
• Application Logging - Displays error, warning, and informational logs from the application and environment to diagnose runtime issues.
• CSS Inspection Tools - Provides a visual editor for inspecting and testing CSS properties and at-rules in real-time.
• CSS Style Editors - Provides a visual environment for inspecting, editing, and testing CSS properties and at-rules in real time.
• Event Listener Debugging - Displays active event listeners on elements and provides a configurable list of event breakpoints for troubleshooting.
• HTML DOM Manipulators - Allows direct editing of the DOM tree structure through the user interface to test layout changes.
• Disassembly Highlighting - Applies syntax highlighting to WebAssembly disassembly to improve the readability of instructions and types.
• Resource-to-File Mappings - Links resources loaded from the network to local filesystem directories to enable persistent edits and overrides.
• Executed Script Tracking - Associates parsed script objects in the engine with original source files and URLs for execution analysis.
• UI-Backend Protocol Specifications - Specifies methods and events in structured definition files to automate communication between the UI and the backend.
• Service Worker Debugging Tools - Views and manages the state and lifecycle of registered service workers through a dedicated interface.
• Web API Debugging Interfaces - Provides specialized interfaces and automatic breakpoints to implement and tune complex web platform features.
• JSON Message Bus Communication - Uses a structured JSON message bus to send commands and receive events between the frontend and the browser engine.
• Debugging Tools - Includes tools for analyzing WebAssembly disassembly, inspecting scope, and profiling binary execution performance.
• Execution Debugging - Pauses execution and navigates through WebAssembly functions using breakpoints and stepping capabilities.
• Performance Profiling - Provides dedicated profiling tools to analyze how WebAssembly binary functions impact runtime performance.
• Scope Inspection - Displays the current state of variables and types in a scope view when execution is paused.
• Source Code Formatting - Applies syntax highlighting and pretty-printing to source files to ensure code remains readable.
• WebAssembly Binary Analysis - Analyzes WebAssembly binary modules through disassembly highlighting, scope inspection, and performance profiling.
• Error Symbolization - Resolves remote error objects into a parsed representation including the error message and a symbolized stack trace.
• Headless Logic Decoupling - Isolates core business rules and state management from the view layer to enable browser-less testing.
• On-Demand Frontend Modules - Loads specific feature code on demand to minimize initial startup time and memory footprint.
• Protocol Stack Parsing - Converts raw protocol data or error strings into structured stack trace models containing synchronous and asynchronous frames.
• Runtime Stack Analysis - Collects and formats structured stack traces for runtime exceptions and syntax errors to pinpoint issues.
• Application Performance Timelines - Visualizes application runtime events and navigation breadcrumbs to identify performance bottlenecks.
• CPU Throttling Simulators - Ships configurable CPU throttling presets to simulate lower-end hardware during performance testing.
• Component-Based UI Libraries - Uses a library of reusable buttons and data grids to maintain visual consistency across tools.
• State-Synced Declarative Interfaces - Syncs the interface with state changes using templates to avoid manual DOM manipulation.
• Pretty Printing - Generates formatted versions of minified script resources to improve readability during debugging.

Star history