Skip to content

abbadata/devtools-css-selector

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

CSS Selector Finder for Chrome Devtools

Find CSS Selectors directly from the Chrome Devtools Elements Panel Sidebar.

  • Unique CSS selectors are continuously generated as the selection is changed in the Chrome Devtools Elements panel
  • Highly configurable. Settings can easily be changed interactively and results can be seen immediately.
    • Enable/Disable usage of IDs, Class names, and Tag names for selector generation
    • Filter out specific values of IDs, Class names, and Tag names
    • Use custom attribute names and attribute name/value pairs
    • Various settings to control robustness and optimization of selectors

Project home page

Installation

Install the Chrome Extension: CSS Selector Finder for Chrome Devtools

1-Minute Demo

1-Minute Demo

Running

  • Open the Chrome Devtools by inspecting a page element. (Right click on a page element and click "Inspect")
  • There will be a "CSS Selectors" option on the sidebar. Click this.
  • Click on DOM elements in the Elements panel. The CSS Selector will be updated dynamically.
  • Customize CSS Selector generation by enabling/disabling ID/Class/Tags, filtering out specific values of ID/Class/Tags, and using custom attributes.
  • Customize CSS Selector generation using settings to control robustness and optimization. Please see GitHub for setting details.
  • Click "Generate" to regenerate the selector after settings are changed or after navigating to a different page

Limitations

  • Does not work with IFRAMEs

Development

Building

  1. Clone this project
  2. npm install
  3. npm run build-dev
  4. The built files will be created in the /dist directory

Loading

  1. Navigate to chrome://extensions
  2. Click the "Developer mode" switch if not already enabled
  3. Click "Load unpacked". Select the /dist directory as the extension directory.

Screenshots

Screenshot Screenshot

Credits

This extension uses Anton Medvedev's CSS Generator tool GitHub

Changelog

v0.1 Initial release

About

Find CSS Selectors from Chrome Devtools Elements Panel Sidebar

Resources

Stars

Watchers

Forks

Packages

No packages published