Inline Code Finder

Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them:

  • Inline JavaScript events
  • Inline style
  • javascript: links

In terms of inline events and javascript: links, it is generally frowned upon, and should instead be implemented in an unobtrusive fashion.

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

More information and a summary report

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

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

Firebug add-on

A picture of the Inline Code Finder panel for Firebug

Settings

Naturally, since this tool sets out to be of interest to both JavaScript and/or CSS developers, you can set your own preferences with what to check for:

Stand-alone version

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

Firebug add-on

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

Availability

It is available as a stand-alone Firefox extension, stand-alone Google Chrome extension or as a Firebug add-on. 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 (Firefox)

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

Firebug add-on

A picture of the Inline Code Finder panel for Firebug

Downloads

53 Comments