Debugging with Firebug

Previously: Debugging Isn’t Always Fun

After the wasted hours spent thinking I was debugging my code during which it seemed absolutely nothing worked I, eventually, thought I’d just wait until I got home and finally use these Developer Tools and Consoles in Firefox, Chrome, and all the IDEs I’ve been downloading and installing. I’ll finally do some hardcore for real debugging, developing, and hacking. I’ll be a pro. Troubleshoot just like in Khan Academy, Codecademy, and FreeCodeCamp. It’ll be easy. I’ll forget all about the hours I’ve just wasted because I’ll be glowing with new knowledge and skills.

This is what I thought real-life consoles would be like:

Codecademy.png

Codecademy‘s slick, user-friendly learning interface

Above, the student can make changes to relevant files (with all three linked files visible and accessible) and instantly see the consequences. Below, pretty much the same thing (having access to the jQuery files wouldn’t help much so they’re not displayed).

FCC.png

FreeCodeCamp‘s equally awesome learning interface.

The online, interactive How to Think Like a Computer Scientist has similar features I geeked-out over and loved.

InteractivePython.png

How to Think Like a Computer Scientist: Interactive Edition

So, I’m expecting to open a file in Firefox, Chrome, whatever, and:

  1. Make changes
  2. Run my code
  3. Repeat

Fun, productive, good times.

I thought, for example, I could write a little JavaScript app that might ask me questions using console.log instead of prompt and I’d also answer them in the console. I thought, if my js file had an array and a function that would log something to the console, I could type

randomImage(homeImages);

in the console and it might log the random number and the file name of the resulting random image as output.

As it turns out, these tools work nothing like that so I was in for hours of even more notFun. I did, eventually, figure out what I could and couldn’t do. And, eventually, the console told me the value of “masthead” was null so I Googled that and found the cause and solution. But, man, I SWEAR I’d already tried it. Regardless of how or what code, changes, and/or environment made the difference, it all works now.

Ta-da!

Firebug console displaying output

That’s my code stripped down to identify the smallest working parts that could be broken.

Using the Firefox Firebug Console

That’s the state of my code before I spent far too many hours ripping it apart trying to find out what the non-existent problem was.

Here’s my final js file:

JavaScript code for random images

As you can see, I commented out the function so I could put it on each page as so:

HTML code linking to an external js file

The aforementioned “null” problem taught me the reason people put their links to external files just before the closing body tag–because my script can’t put a src into an img that doesn’t yet exist. And I knew that. I just didn’t … you know … put it into practice.

Update: All of the work described in this post and the previous post was done on the home page. After I made my victory lap, I uploaded that page, copied and pasted lines 97-99 from that last image into all my other pages (there aren’t many), and uploaded those. After some WTF exasperation and more frustration, I “learned” a couple things from that:

  • If your code refers to some images, you might want to upload those images
  • If your code is targeting an img element, it’s a good idea to make sure you haven’t commented out that line of code
  • If your code refers to id=”masthead”, you should probably have an element with that id somewhere on the page

Yep, and were those the first things I checked? Not by a long shot. Once again, I scoured my javascript over and over again, eventually pasting it into the console and–well, how about that–“masthead” is null again (but for a different reason this time). That made the placeholder image appear (there in case JS is disabled or … whatever) which, fortunately, were originals from before I adjusted the dimensions. While looking for the smaller version I noticed that not only was it not there but I hadn’t yet uploaded any of the other images.

Update #2 (The Final Straw): If your image src says the images are in the “imgs” folder, they should not be in a different folder called “randomTampa.”

See Also: It’s Always Your Fault

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in Debugging, Developer Tools, Frustration, JavaScript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s