Skip to content

Devtools

Chrome DocsFirefox Docs

Filenames

Input PatternOutput Path
entrypoints/devtools.html/devtools.html
entrypoints/devtools/index.html/devtools.html

Definition

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Set include/exclude if the page should be removed from some builds -->
    <meta name="manifest.include" content="['chrome', ...]" />
    <meta name="manifest.exclude" content="['chrome', ...]" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Adding UI Elements

Chrome extensions allow you to add panels and side panes to the devtools window.

DevTools window showing Elements panel and Styles sidebar pane.

See the WXT's examples for a full walkthrough of extending the devtools window: