/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(59) Frequent screenshots in the Timeline Panel Styles Pane keyboard tricks (61)

Chrome DevTools: Edit HTML in the Console Panel of DevTools

21 Jul 2015
Edit HTML in the Console Panel of DevTools

The DOM node context menu you may be familiar with from the Elements panel is present in the Console Panel also.

  1. Log a DOM node to the console.
  2. Right click on it.
  3. Select Edit as HTML or Edit Text.
  4. Notice the DOM is updated on the page and also the Elements Panel.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.