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:
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).
The online, interactive How to Think Like a Computer Scientist has similar features I geeked-out over and loved.
So, I’m expecting to open a file in Firefox, Chrome, whatever, and:
- Make changes
- Run my code
Fun, productive, good times.
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.
That’s my code stripped down to identify the smallest working parts that could be broken.
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:
As you can see, I commented out the function so I could put it on each page as so:
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
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