Inline Code Finder Firefox extension - find inline JavaScript events, inline styling and javascript:links
When I first coded and released Obtrusive JavaScript Checker, I had some more ideas with it, as well as some great feedback I have received and wanted to see to. The result is Inline Code Finder, which looks for inline styling as well as what the Obtrusive JavaScript Checker offered, and it comes in two versions!
Description
Just as Firebug has made my development life a lot easier, I want to offer the most simple way to find inline code which doesn’t meet the principles of separation between content (HTML), presentation (CSS) and interaction (JavaScript). Inline Code Finder looks through all HTML elements for any of these:
- Inline JavaScript events
- Inline style
javascript:links
Detailed information
When you hover over an element with an inline event, inline styling or a javascript: link, it will show you more information about it:
Inline event information
Inline style information
javascript: link linformation
Inline Code Finder versions
Following a lot of suggestions, Inline Code Finder is available both as a stand-alone version and as an add-on to the excellent Firebug. This means that for all of you who wanted it integrated into your regular workflow with Firebug have a new tab for Inline Code Finder.
The stand-alone version shows up in the status bar of your web browser window, while the Firebug version integrates into the existing Firebug installation and is offered as another panel, with its own command buttons and settings.
Stand-alone version
At the bottom left corner of the window, you will be presented with a summary report of the number of javascript: links, inline styles and inline events in the current web page, and each type of inline event summarized.
Firebug add-on
Shows as a separate Firebug panel with a summary, functions and options.
Settings
Since the aim of this tool is to be of interest to both JavaScript and/or CSS developers, you can set your own preferences with what to check for - just check the applicable items. There’s also an Autorun option if you want it to happen automatically for every page you enter.
Stand-alone version
Find your settings through Tools > Add-ons, choose Inline Code Finder and click Preferences.
Firebug add-on
Click Options in the Inline Code Finder panel for Firebug, and you will be able to choose what to check for.
Keyboard shortcuts
To be able to work with this tool, it supports a keyboard shortcut to swiftly toggle on and off the Inline Code finder: Cmd + Shift + Option + I (Mac) and Ctrl + Shift + Alt + I (windows).
Downloads
Use it now - test your score!
So now you know what I will definitely check for if you ask me to review a web site. Inline Code Finder also offers a total ICF Score, which is meant to be of some guiding to how many things you need to take care of in the code, and the overall code quality and level of separation.
What’s your ICF Score? 
