Some devtools tricks
Developer tools for productive web development.
  • JavaScript
  • Chrome
  • Devtools

Inspecting an element

You can use when you inspect an element (with the inspect tool of the devtools) is $0. After inspecting an element you can access it in the console by typing $0:

DesignMode

Let's imagine the following scenario: You are working on styling a component that holds text inside it. And you want to test some edge cases by changing the text of the component, like for example putting an insanely long text or no text at all.

While you could achieve this by editing the HTML of the component in the DOM tree or in your source code, the easiest way is to set the designMode property of the document to 'on', then changing the text directly on the web page.

In the devtools run: document.designMode = 'on':

Credits

This post It's a resume of original post on DEV Community