Debugging Javascript (or jQuery) in Web Console

A few generations of Firefox ago I used to have a console (can’t remember its name) that opened like a pop-up window when I clicked the JS error button (red cross in the toolbar). Nowadays that same red cross opens the ‘Web Console’ and according to Mozilla I’m supposed to see my JS errors there (presumably when I click on ‘Console’). Instead I see nothing. I know there are errors because when I hover the same red cross I see ‘JavaScript Error: NS_ERROR_FAILURE:’. It’s making it really difficult to debug even simple JS.

What do I need to do to see the errors displayed?

Hi, to bring up the console right click on an element in your webpage and choose inspect element.
Then the web development console will pop up. You should select the console tab, and then there are other tabs that let you filter the logs. Cheers

Thank you for your reply.

I have already done what you suggest. I’m sorry if that wasn’t made clear in my original post. The console is always empty, although I’m sure there are errors in my code. I feel there must be something else I need to do to get the errors to appear.

I think you just have to click on the logging tab, 5th from the left. It shows as if it has been turned off

That doesn’t appear to make any difference. I’ve even tried closing and re-launching Firefox.
I will try tomorrow with a deliberate error in my JS and see if that shows up.

1 Like

I have been able to get a deliberate error like leaving a quote off the end of a string to show up in the Console. But a line like
var nunc = document.getElementById('nunc');
where the element with ID of ‘nunc’ does not exist isn’t producing an error at all. I feel sure it should be.

I have been looking at the MDN ‘Firefox Developer Tools’ web pages, but I’m still having more trouble debugging scripts than I recall before. The script I’m working on is one that has worked for a long time elsewhere, and I’m trying to modify it for a (slightly) different purpose.

I make enough mistakes without purposely making them, I would have done a console.log() instead.

Anyway, that line is technically not an error, getElementById() will return NULL but it won’t fail.

Maybe it would help using 'use strict' ?

Thank you for your reply.

I’m sure I used to see an error (or warning) message if an element that is referred to does not exist.

The script I’m working with runs on the loaded page and adds elements and attributes to the fixed HTML (to enable clicking on images to pop up a larger version, as in a gallery). It seems to be difficult to get a handle on it for de-bugging.

An error with using getElementById would happen when you try to access one of its properties. For example

var foo_text = document.getElementById('foo').textContent;

would give a “of null” error message if foo wasn’t in the DOM

It sounds like you may be better of setting up some unit tests to help you refactor the code. Some are listed in various jsweekly topics.

https://www.sitepoint.com/community/tags/jsweekly

Thanks for your help.

I have managed to work out why the script (which ran perfectly well in another site) wouldn’t work here, and I’ve got it working. Clearly I need to learn more about de-bugging JS in the latest browser versions.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.