[go: up one dir, main page]
DevTools Tips

Inspect DevTools with DevTools

Categories: Supported by:

The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect and debug DevTools with DevTools.

Chromium #

To debug DevTools in Chromium-based browsers, such as Chrome or Edge:

  1. Open DevTools on any browser tab.

  2. Undock DevTools into a separate window.

  3. Press Ctrl+Shift+I (Cmd+Opt+I on macOS) to open a second DevTools window.

    This second DevTools window now targets the first one. Anything you see in the Elements tool represents elements of the first DevTools window's user interface.

    Two Chrome DevTools windows, the first one inspects a webpage, the second one inspects the first one

Firefox #

To debug DevTools in Firefox:

  1. Open DevTools on any browser tab.

  2. Open the Settings page by pressing F1.

  3. Under Advanced settings, check the Enable browser chrome and add-on debugging toolboxes and Enable remote debugging checkboxes.

  4. Now in the main Firefox toolbar, click Open application menu (the hamburger menu).

  5. Click More tools > Browser Toolbox.

    A new DevTools window appears. This one inspects the entire Firefox browser window. The elements you see in the Inspector tool represent elements of the Firefox user interface, including its DevTools.

    Firefox with DevTools opened, and another DevTools window next to it which debugs the Firefox window

See also

Authors: Patrick Brosset

Last edit: - Edit this page