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.

46 thoughts on “Introducing Element Finder for Sublime Text 2”

  1. how about integrating it into the default search?
    then we could use sublimes text highlighting and minimap to quickly find the html affected by the selector.
    That would be great to debug some of the rather tricky CSS selectors.

    The next step then would be to navigate from a selector in the CSS file to it’s corresponding HTML files (kinda like resharper).

    1. Hi Sven, I don’t know about integrating with the default search but I certainly agree that it would be nice to have the matching HTML elements highlighted. The problem I need to solve is how to map a DOM element to a line number in the source code, and that’s not as easy as it sounds.

    1. Hey Jorge. I have removed some dependencies from Element Finder to simplify it and speed it up. Previously there was a dependency which had to be compiled, but now its just JavaScript, so it should work on Linux too now.

  2. Great, but it unfortunately doesn’t work on my computer. Whenever I right-click on a folder, select “Find Elements in Folder” and than paste the selector, I get an error message like “Invalid response from Element Finder CLI: Could not be found”, no matter what I enter.

    1. Hi Christian, this error is due to NodeJS not being installed. Sorry I really should have made it clear in the blog post that NodeJS is required. I have updated it now. You can install NodeJS from http://nodejs.org. It sounds like I will also need to improve the error message that appears when NodeJS is missing.

          1. Hi Marco, it looks like you’re on a Mac. Open Terminal and type `which node` (without quotes). If there is no output, you need to install NodeJS. If NodeJS is installed, you will see its path. Check that this path is equal to “/usr/local/bin/node”. If it is not, you will need to go to “Sublime Text 2 > Preferences > Package Settings > Element Finder > Settings – User” and add the following setting:

            {
            “node_path” : “/path/to/node”
            }

          2. P.S. if you have to edit the Element Finder settings, make sure you use normal quotation marks. In my previous comment WordPress converted them to curly quotes.

          3. Hey Marco, I have removed some dependencies from Element Finder which simplify it quite a bit. Can you please try again because this may have resolved the problem for you.

  3. Really awesome Sublime Text package and it’s working great with real html files.
    Only when I am working on projects I use a lot of .shtml files before it goes to the backend development. I tried to add shtml to the settings file and searching works great but when clicking on the page link it crashes.

    Is there a way to get this working because this package is a real timesaver.

    1. Hi Ischa, its interesting that clicking the links crashes Sublime. I will investigate this. However you will need to bear in mind that Element Finder isn’t going to process your serverside include statements. To do a full search, Element Finder needs static HTML files. Maybe you can use `wget` to download all the static HTML files from your preview server: http://keegan.st/2012/06/21/use-wget-and-elfinder-together-to-search-for-a-css-selector-in-all-pages-of-a-remote-site/

    1. Hey Chen, could you please tell me which version of Windows you are using and which version of NodeJS? You can find the Node version with `node -v`.

  4. This seems to be a great tool, but as I only use HAML, I can’t really use it (except using wget like you describe). It would be really great, if you could support HAML too!

  5. Seems like an awesome tool. However I always get only the header (Selector, Dir, Filetype, Ignore patters and number of files to search) and then receive this error:
    Invalid response from Element Finder CLI: ~/Library/Application Support/Sublime Text 2/Packages/Element Finder/lib/elfinder/node_modules/jsdom/lib/jsdom.js:171

    Mac OS X 10.6.8
    $ which node
    /usr/local/bin/node
    $ node -v
    v0.8.11

  6. Hi Keegan, thanks for the great plugin!
    I’ve run into a little problem recently. I used to use Element Finder extensively on OS X. Today I switched to a Windows computer and discovered that one needs to change the node_path value to in settings in order to make EF work correctly. I use Dropbox to sync ST2 profile. How could we combine the EF settings in a platform-specific way so each OS uses the right path to Node?

    1. Hey Alexander, that’s a good idea. I’m going to add three new settings to the .sublime-settings file: “node_path_osx”, “node_path_windows” and “node_path_linux”. I will make a change to the plugin so that if these settings are present they will override the “node_path” value for that OS.

      Cheers,
      Keegan

    2. Hey Alexander, I have released version 0.3.1 to address this issue. It should become available in Package Control within the hour. If your “node_path” setting is correct for Mac, you should add a “node_path_windows” setting and set it to “node” for Windows.

      1. Thank you for such a quick correction! Putting just ‘node’ value on Windows didn’t work for me, as well as setting ‘node.exe’ or full path to Node.js as ‘C:\Program Files\nodejs\node.exe’ (which leads to an error about unescaped space – but i’m unable to correct it). I tried to copy node.js program folder to the root of C: drive to workaround the problem with space, but then Element Finder is just blank without any ‘Path not found’ error.

          1. Hi Alexander, I think there was a defect present which was preventing the plugin from working on Windows. I have released version 0.3.2 which I think fixes the problem. I’ve tested this on a couple of Windows machines successfully. I used a path of “node”. Let me know how it goes.

      2. Thank you! Now it works as expected.
        By the way, thanks also for the wonderful Specificity calculator, we used it to teach CSS specificity to students.

          1. It’s an HTML/CSS/JS course at the Russia’s MSU, Faculty of journalism, with a huge focus on modern CSS.
            Got some other problems with EF, unfortunately. Will try to deal with them, otherwise will open an issue on GitHub so they’d be easier to tackle.

  7. This is awesome! I think this is the only ST2 package available doing that. And as someone wrote above, it would be great that it can support HAML too, since it’s a html framework largely used.
    Keep the good work!

  8. I got a problem using this in Sublime text 2.
    Each time i’m going to search it does that in the wrong directory.
    As you can see below, the directory where it search it’s where the package is installed.

    Selector: .item.active
    Directory: /Users/erwingaitano/Library/Application Support/Sublime Text 2/Packages
    Filetypes to search: html, htm, xhtml
    Patterns to ignore: .git, .svn
    Number of files to search: 20

    Tip: to fold all result summaries, press Command K 1
    Found 0 matches in 0 files (0.583 seconds).

    1. Hey Erwin, try right-clicking on a folder in the sidebar and choosing “Find Elements in Folder”. This way you can easily define which directory to search in.

Leave a Reply

Your email address will not be published. Required fields are marked *