Examine and edit HTML

You can examine and edit the page’s HTML in the HTML pane.

Editing HTML

You can edit the HTML — tags, attributes, and content — directly in the HTML pane: double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately.

To edit an element’s outerHTML, activate the element’s popup menu and select “Edit As HTML”. You’ll see a text box in the HTML pane:

Edit HTML directly in the Inspector panel in Firefox 57

You can add any HTML in here: changing the element’s tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.

When you’re editing HTML, the context menu you’ll see is the normal one for working with editable text:

../../../../_images/editable-context-menu1.png

Copy and paste

You can use the popup menu to copy nodes in the HTML tree and paste them into the desired location.

Drag and drop

You can reorganize the HTML content of a page by moving nodes in the HTML tree. Just click and hold on any element and drag it up or down in the tree. When you release the mouse button, the element will be inserted at the corresponding position:



You can cancel the drag and drop by pressing the Esc key.

Inserting new nodes

There’s a “+” icon at the top of the markup view:

../../../../_images/html_tree.png

Click this icon to insert an empty {{HTMLElement(“div”)}} into the document as the last child of the currently selected element. You can then edit the new node’s content and styling just as you would any other node in the document.



You can access the same functionality using the “Create New Node” popup menu item.

Note that this button is disabled if the selected element’s type is such that adding a last-child would have no effect (for example, if it is an html or iframe element). However, it is enabled in places where it is not valid to insert a div, such as style or link. In these cases the element is added as text.