Element Finder is a tool for web developers to find which HTML files contain elements matching a specific CSS selector. You might be new on a project, returning to a project that you haven’t worked on for a while, or maybe a CSS selector is just unclear and you’re not sure exactly which pages it will effect. Just copy a CSS selector into Element Finder and you will quickly see all of the HTML elements in your project which match that selector. For example if you search for `div.main`, it will show you all the DIV elements with a classname of `main`.
The Sublime Text package makes a number of improvements over the command line app I released three months ago. The filenames in the results page are clickable links so you can quickly open them. The results page also includes a preview (the first two lines) of each matching element.
To use Element Finder, right-click on a folder in the Side Bar and select `Find Elements in Folder`. Then enter the CSS selector you want to search with and hit Enter. The results will look like this:
Element Finder can only search through HTML files, so if your project doesn’t have HTML templates and is only contained in a CMS, I would recommend using `wget` to crawl your site and download all of the pages as HTML. Then you can search through these pages with Element Finder.
The package is currently available for Windows and Mac. Linux should be supported in the future but I don’t have Linux so I haven’t been able to compile or test it.