Chromium DevTools Docs

HTML Edit View in Elements Tree

Overview

The HTML Edit View allows developers to freely edit the HTML of a DOM node directly in the Elements panel. When active, it replaces the standard tree item representation with a fully functional CodeMirror editor instance.

Requirements

  1. Triggering: Users can trigger the HTML edit view via keyboard shortcuts (F2 on a selected node), or via the Context Menu (“Edit as HTML”).
  2. Editor UI: When activated, the tree element's inline attributes, tags, and descendant nodes are hidden. A CodeMirror editor instance is shown in place of the node.
  3. Behavior:
    • The editor is populated with the node's outerHTML (or relevant subset).
    • It supports syntax highlighting, auto-completion of tags, and proper indentation.
    • If the user clicks outside the editor or presses Cmd+Enter / Ctrl+Enter, the edit is committed.
    • If the user presses Escape, the edit is aborted.
  4. State Management: Upon committing or aborting, the tree element restores its standard view, and any updated DOM state is reflected.