Introducing Element Finder for Sublime Text 2

I am pleased to announce that Element Finder is now available as a package for Sublime Text 2. Installation is via Package Control.

Edit: NodeJS is required for Element Finder to run. You can install NodeJS from http://nodejs.org and then you will be able to install Element Finder from Package Control. NodeJS is required because JavaScript is the most effective way to search through HTML documents.

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.

The Sublime Text 2 package and command line app are open source and on GitHub.