Twitter: raymondcamden

Address: Lafayette, LA, USA

Friday Puzzler: Get off your butt and learn your browser tools!

08-16-2013 3,644 views Development, JavaScript 23 Comments

Ok, pardon the link-bait title. If you are a regular reader of this blog you know that on some Fridays I do a simple puzzler. This is a coding challenge that - typically - only requires about 5 minutes to solve. Today I've decided to do something a bit different. Maybe it will work - maybe it won't.

As you know - I am a huge advocate of making use of the debugging tools that modern browsers provide. I can't tell you how often I get emails from people who say their code isn't working and have absolutely no idea why.

The goal of this challenge (and the others that may or may not follow) is to simply debug a broken web application. I'm going to provide a link to a web page. In this case, a simple form that asks for two numbers and does math on them with JavaScript. As I said, the application is broken, but how it is broken is the task you need to solve. To be clear, if you already know how to use your browser dev tools then this challenge is probably not for you. But I bet you work with a few people who don't know squat about their browser. Or maybe you're like me and primarily a Chrome user. This would be a great opportunity to try the tools in another browser. Heck, maybe you'll learn something in the process.

When you figure it out, describe the process you took in the comments below. Most likely people will reach the solution via the same method and that's perfectly fine.

Today's challenge is rather easy I think - but if folks dig this I promise to ramp it up next time:


These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Kevin A #
    Commented on 08-16-2013 at 9:01 AM
    test.html, Line 35: The ID for the element is misspelled as "#numbertoo". Should be "#numbertwo".

    Diagnosed in Chrome via Uncaught TypeError: Cannot read property 'value' of null.

    That was fun!
  • Commented on 08-16-2013 at 9:05 AM
    I'm going to be picky. "Diagnosed in Chrome" - where in Chrome. :)
  • Jonathan Martel #
    Commented on 08-16-2013 at 9:09 AM
    While in FF, open Firebug, get "TypeError: document.querySelector(...) is null, line 35".

    Check the source and find the misspelled id.
  • Kyle #
    Commented on 08-16-2013 at 9:14 AM
    I used the IE debugger (F12), since that is what I am most familiar. The script console is pretty intuitive and easy to use.

    SCRIPT5007: Unable to get property 'value' of undefined or null reference
    test.html, line 35 character 6

    var two = document.querySelector("#numbertoo").value;

    element ID is actually "numbertwo".
  • Commented on 08-16-2013 at 9:15 AM
    Kyle - just curious - what version of IE?
  • Piyush B #
    Commented on 08-16-2013 at 9:16 AM
    In the debugger tool of FireFox, i got this error:

    [20:00:19.506] TypeError: document.querySelector(...) is null @

    which leads to

    var two = document.querySelector("#numbertoo").value;

    It should be #numbertwo instead of #numbertoo
  • doug #
    Commented on 08-16-2013 at 9:18 AM
    Open error console in the Web Developer 1.2.5 for Firefox, click on the error, see highlighted line, look up to the form ID, see misspelling. Done.

    It's fun to see the different tools people use. I'd be curious how people might tackle a harder error.
  • Kyle #
    Commented on 08-16-2013 at 9:22 AM
    Right now I am using IE10. Our web application where I work uses some VBScript that we can't get rid of, so I have become intimately familiar with the F12 tool :)
  • Rob #
    Commented on 08-16-2013 at 9:27 AM
    I used the Chrome javascript console to see the error and line number. I clicked on the file:line# to see the location in the source. Then I was able to see the typo.
  • Commented on 08-16-2013 at 9:27 AM
    @Kyle: VBScript still works in IE10?
  • Kyle #
    Commented on 08-16-2013 at 9:35 AM
    Unfortunately not. We have to run the newer IE versions in incompatibility mode. It works surprisingly well, though.
  • Commented on 08-16-2013 at 9:45 AM
    Are you kidding? The JavaScript code of the page is totally crap. I don't care about a typo, say, numbertoo id; what I actually care is the code itself.

    1. You've just imported jQuery 1.9.1, from that's very strange and confusing to me. I believe the original address should be

    2. If you are going to use jQuery, why are you using event listeners or invoking querySelector directly? Aren't you supposed to use "ready handler" and the "jQuery selectors", as well as the "submit" utility function and the "html" set function instead of those shaky code?

    3. You need to pass the second argument to parseInt, or else, on some browser & based on entered data, users could get wrong results. (I'm addressing radix parameter which is by default 8 on based on a given string).

    Keep up the good work,
  • Commented on 08-16-2013 at 9:49 AM
    Thanks for the feedback Mehdi. I had loaded jQuery initially when I built my first 'broken app', but I changed directions and decided to do something else. Therefore the jQuery load should be removed. Doing so now.

    "You've just imported jQuery 1.9.1, from that's very strange and confusing to me"

    This is a supported way of loading by major version number. It means, "Give me the latest in the 1.X branch.

    "If you are going to use jQuery, why are you using event listeners or invoking querySelector directly?" A mistake. You've made your point twice already about this so not sure why you're harping to it.

    "You need to pass the second argument to parseInt, or else, on some browser & based on entered data, users could get wrong results."

    Good point. Added ,10 to both.
  • Dennis Nagel #
    Commented on 08-16-2013 at 9:53 AM
    ctrl-shift-I: show console tab... play with the page. Click add; observe error "Uncaught TypeError: Cannot read property 'value' of null test.html:35 (anonymous function)" inspect the ID in question in the html source of the page and notice that the ID is spelled incorrectly "too" instead of "two" in the JS. If this were a local file, you would be able to edit in place and save the file to retest your solution. Chrome offers a "local changes" option that would show what it took to repair your solution.
  • Commented on 08-16-2013 at 11:00 AM
    @Raymond Camden: Thank you. I didn't know about the 1.x branch... But I'm curious to now if it's used in real-world applications since this could easily break existing/tested code as soon as a new version is released. Right?
  • Commented on 08-16-2013 at 11:03 AM
    I'd say it's rare for jQuery to add backwards-compat issues. I don't think it is something folks would have to worry about all the time, but sure, if it concerns you, just include a specific version. Normally I'd use 2.X as well, but my snippet hasn't been updated.

    So.... hopefully you've gotten past the 'totally crap' aspect. ;)
  • Commented on 08-16-2013 at 11:07 AM
    > So.... hopefully you've gotten past the 'totally crap' aspect. ;)

    Yeah sure. :) It now looks rational.
  • Bill King #
    Commented on 08-16-2013 at 11:55 AM
    In both Firefox and Chrome I right-click to 'inspect element' see the error in the 'Console' tab/region, then click on the line number on the right-hand side and the line number of the issue is selected.
  • Commented on 08-16-2013 at 12:05 PM
    If you use the developer tools (F12 key) in Chrome, you will get this error

    "Uncaught TypeError: Cannot read property 'value' of null"

    Cause of error:-
          var two = document.querySelector("#numbertoo").value;
  • Kevin A #
    Commented on 08-16-2013 at 2:40 PM
    @Ray: In Chrome, Ctrl-Shift-I brings up the developer tools, which is very similar to Firebug, in some ways better, in some ways not.
  • Matt N. #
    Commented on 08-16-2013 at 4:56 PM
    Thanks for the example. I'm a bit new and appreciate the kick start to learning. I've identified the numbertoo as well, but was trying to change it in Chome Developer Tools/Sources dynamically to see if I could get the page to work. I put in a breakpoint and then renamed the var:
    var two = document.querySelector("#numbertwo").value;
    When I resume the code, it now errors with:
    Uncaught TypeError: Cannot read property 'value' of null

    Is this type of editing possible?
  • Commented on 08-17-2013 at 7:24 AM
    @Matt: As far as I know, Chrome supports this, but only when the JS you run is in it's own file.
  • Commented on 08-17-2013 at 9:52 AM
    I found this too