Obtrusive JavaScript Checker – Greasemonkey script and Firefox extension to find inline events

In my work, part of it is analyzing both other people’s code as well as my own. Now I have created Obtrusive JavaScript Checker to help me out with that!

Why?

One common and tedious task when improving code is to find inline events in the HTML code, and make sure they are implemented in an unobtrusive fashion instead (more about unobtrusive JavaScript). The web is riddled with inline events, and I strive to make it a better place. :-)

What is Obtrusive JavaScript Checker?

Obtrusive JavaScript Checker is a tool to traverse through all elements in a web page, and when it finds a HTML element with inline events (which is bad, JavaScript should be unobtrusive), it highlights it with a red border.

A picture of the Google start page with red borders around elements with inline events

Availability

It is available both as a Greasemonkey user script and a Firefox extension. The Greasemonkey user script can be customized to only work for certain domains (default is all domains), while the Firefox extension can only be turned on or off.

Downloads

12 Comments

  • Interesting, Robert!

    A suggestion of what you might also want to include, is a check for links that point to "javascript:", or "#". (only if these links are present in the original, unaltered source of course, because imho it's not a bad practice to generate such links with Javascript itself.)

  • Robert Nyman says:

    Harmen,

    I did think of that, but felt that it was somewhat of a different topic. Sure, they're mostly related, but javascript: links for instance can be bookmarklets and other things, so it's not that easy to distinguish how to value them.

    However, creating one more Greasemonkey script checking for javascript: and # links in general is an easy feat, and most likely something I'll do in the future! For now, though, the most important thing is getting rid of inline events, I think. :-)

  • For it's purpose, of assisting you in writing reviews of other peoples code, it's certainly interesting, as it will highlight problems very quickly. Thank you for sharing your selfmade tools with the rest of the world :-)

    I downloaded the XPI version, to take it for a spin, and it turns out that you have to restart the fox every time you need to enable/disable it, which certainly makes the XPI version a little annoying.

    I have previously toyed around with Tarantula, and was wondering if I should try to extend it to provide warnings for inline javascript as well as inline styles (as they can be equally deadly). In my little world where rigorous quality control is a must, I'd like to fail builds in CruiseControl when people use inline javascript and inline styles … as well as when I accidentally forget to remove Firebug statements from javascript :-)

  • Robert Nyman says:

    Morgan,

    Personally, I'd recommend using the Greasemonkey version instead. That way you can enable/disable it with a single click, customize it for different domains etc.

    The Firefox extension was just provided for those who like it, but it's much more of a hassle to control this with extensions, and to be honest, at the time I didn't have the time nor motivation to take the extension further.

    Try the Greasemonkey version, and I'm sure you will be delighted! :-)

    And hush about inline styles, that's my next one! :-)

  • Oops, sorry for "outing" you ;-)

  • Greasemonkey version is MUCH nicer!

    Thanks again for sharing :-)

  • Robert Nyman says:

    Morgan,

    Yes, please be quit. ;-)

    Told you about Greasemonkey, didn't I? Much easier to use and customize, and probably the route I'll take for developing add-ons, instead of full-on Firefox extensions.

  • HB says:

    Very cool, I just installed the Greasemonkey script (mainly because I've only installed one script since getting the thing… gotta put that monkey to work!).

  • […] I launched Obtrusive JavaScript Checker, I immediately felt it had more potential, and I definitely had more features to add to make it […]

  • Robert, you don’t even need javascript for revealing presence of inline events: attribute selector used in userstyle can make it as well (see http://userstyles.org/styles/11825 (or this copy) and try it with Stylish or any other way).

    Anyway, I think this functionality should be added to the famous Web Developer toolbar by Chris Pedrick into “Information” section — I think that most of tools in this section are in fact “just userstyles” using the same trick as above.

  • Robert Nyman says:

    Michael,

    Thanks, that’s an interesting option! However, why I like the JavaScript approach is that it allows me a lot more customization, like the one released in the 0.7 version of Obtrusive JavaScript Checker.

    Also, it gives me the possibility to easier turn it into a Greasemonkey script, Firefox extension and a Ubiquiy command at the same time.

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>