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
Install the Chrome Extension: CSS Selector Finder for Chrome Devtools
- 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
- Does not work with IFRAMEs
- Clone this project
- npm install
- npm run build-dev
- The built files will be created in the /dist directory
- Navigate to chrome://extensions
- Click the "Developer mode" switch if not already enabled
- Click "Load unpacked". Select the /dist directory as the extension directory.
This extension uses Anton Medvedev's CSS Generator tool GitHub
v0.1 Initial release