Skip to content

This is a simple devtools extension that adds a shortcuts-tab to the elements sidebar-pane. By adding a attribute to the elements in the DOM, the item is showing up in the list.

Notifications You must be signed in to change notification settings

inear/devtools-shortcuts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DevTools element shortcuts

This is a simple devtools extension that adds a shortcuts-tab to the elements sidebar-pane. By adding a attribute to the elements in the DOM, the item is showing up in the list.

Installation

  • Open chrome://extensions
  • Enable 'Developer Mode' checkbox
  • Click 'Load unpacked extensions...'
  • Select the folder where you cloned this repo

Usage

Add 'inspect="true"', just 'inspect' or the attribute 'data-inspect' to all elements that you want to add to the list. Saves a lot of time reaching elements if it's nested deep in the DOM. You can then right-click the items and select "Reveal in Elements panel" to inspect them.

Screenshot

screenshot

About

This is a simple devtools extension that adds a shortcuts-tab to the elements sidebar-pane. By adding a attribute to the elements in the DOM, the item is showing up in the list.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published