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

A picture of google.com when Inline Code Finder is enabled

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

A picture of when the inline event information is being shown

Inline style information

A picture of when the inline style information is being shown

javascript: link linformation

A picture of when the javascript: link information is being shown

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.

A picture of the summary report, for the stand-alone version of Inline Code Finder

A picture of the statusbar icon for the stand-alone version of Inline Code Finder

Firebug add-on

Shows as a separate Firebug panel with a summary, functions and options.

A picture of the Inline Code Finder panel for Firebug

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.

A picture of the preferences dialog for the stand-alone version of Inline Code Finder

Firebug add-on

Click Options in the Inline Code Finder panel for Firebug, and you will be able to choose what to check for.

A picture of the Inline Code Finder preferences for Firebug

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).

A picture of the Tools menu item, with keyboard shortcuts displayed

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? :-)

23 Comments

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>