DOCSEARCHbyAlgolia
Submit Docs

Chrome DevTools Frontend

repository·main·Indexed 26 days ago

https://github.com/chromedevtools/devtools-frontend

The client-side implementation of Chrome DevTools, containing the TypeScript and CSS for the DevTools web application. This documentation provides guides for contributing new WebIDL/DOM interfaces, CSS pseudo-classes, network request types, and storage features, as well as TypeScript and UX style guides and development workflows.

Tokens
103.9K
Snippets
201
Records
577
Agent score
88%

What's inside devtools-frontend

  1. Overview of Project Lantern

    main
    Project Lantern is an initiative designed to reduce Lighthouse run time and improve audit quality. It achieves this by modeling page activity and simulating browser execution rather than relying solely on traditional throttling methods. This approach aims to provide a faster way to estimate performance metrics while maintaining high accuracy relative to standard Lighthouse runs.

  4. Overview of DevTools development scripts

    main

    The DevTools frontend uses two types of scripts for development workflows:

    1. Python Scripts: Used for older build processes (bundling and minifying) and tasks that integrate with Chromium's infrastructure.
    2. Node.js Scripts: Used for newer workflows, including testing and hosted mode. These are the standard toolchain for modern web applications.

    To see a full list of available Node.js commands, use npm run or refer to the primary DevTools frontend README (../readme.md).

  5. Overview of Third Party Web project

    main
    Third Party Web is a project that quantifies the impact of third-party scripts on web performance. It uses data from the HTTP Archive (crawled via Lighthouse) to attribute JavaScript execution time to specific origins and entities. The goal is to help developers make informed decisions about which third-party scripts to include on their sites based on their performance cost.

  7. Understand the MCP entrypoint

    main
    The mcp directory serves as the entrypoint for the chrome-devtools-mcp project. Note that the build output of this specific entrypoint is not directly consumed by other parts of the devtools-frontend repository. Instead, the chrome-devtools-mcp project integrates the files exported from this directory and their transitive dependencies into its own independent build process.

  9. Understand DevTools Resource Management Core Concepts

    main

    DevTools manages resources (like scripts and HTML) using a hierarchical structure of Projects and Workspaces:

    • Project: An interface to a collection of resources. Projects are categorized by type (e.g., filesystem, network). Depending on the type, a Project can perform file operations like creating, renaming, deleting, or modifying resource contents.
    • Workspace: A singleton collection of all active Projects, implemented via WorkspaceImpl.ts.
    • UISourceCode: The actual resource identified by a unique URL. This includes scripts, stylesheets, and other ResourceTypes like XHR, WebSocket, or EventSource.

  10. Understand the Device Mode Emulation Frame architecture

    main

    DevTools implements device mode emulation using a dedicated frame called the "device mode emulation frame". This frame is separate from the main devtools_app context.

    Key architectural constraints for developers working with this frame:

    • Inspection: The device mode emulation frame cannot be inspected using DevTools itself.
    • Communication: The frame communicates with the devtools_app context via window.opener.
    • Cross-Frame Limitations: Because communication is cross-frame, you can only use Web APIs that support cross-frame communication.
    • UI Reconstruction: Due to cross-frame limitations, some DevTools UI features cannot be reused directly and must be explicitly reconstructed within the emulation frame.
    • Data Access: The emulation frame cannot access devtools_app data (like localStorage or settings) directly. All such requests must be mediated through APIs in the devtools_app frame.

  11. Use pyjson5 for JSON5 data format in Python

    main

    pyjson5 is a Python implementation of the JSON5 data format. It extends standard JSON to support features common in configuration languages, such as:

    • JavaScript-style comments (single and multi-line).
    • Unquoted object keys (if they are legal ECMAScript identifiers).
    • Trailing commas in objects and arrays.
    • Single-quoted strings and multi-line string literals.

    The library provides a reader and writer implementation that mirrors the standard Python json module API for ease of use.

  12. Understand Chrome DevTools Protocol (CDP) Concepts

    main

    The Chrome DevTools Protocol is structured around two primary concepts:

    • Domain: A group of CDP methods and events. Domains can typically be enabled or disabled individually and are supported by different types of targets.
    • Agent (in blink) or Handler (in browser): The backend implementation of a domain that synchronizes with the frontend.
      • Agents are implemented in the renderer process (e.g., in Blink or V8).
      • Handlers are implemented in the browser process (e.g., by the content layer or embedder).
      • A single command can be handled by multiple layers (embedder, content browser, blink, V8) in sequence. An agent can either complete the handling or allow the command to fall-through to the next layer.