JavaScript errors does not show in the console - javascript

I'm developing a js game and I debug it using Chrome DevTools.
Recently I noticed that some errors are not reported to the console even though they freeze the code execution.
The only way I can debug those errors is running row by row until I see the error while hovering over the problematic variable. (for ex. trying to read a property of an 'undefined' variable (TypeError))
If it matters I use 'use strict' as well.
Update: I noticed that if I check 'Pause on caught exceptions' the code will stop on the error. What can cause such error to be caught without using a trycatch around it?
Thank you

Related

Stack traces getting swallowed when developing VS Code Extensions

When my extension encounters an error, I'll often get a notification in the host environment saying that it encountered an error, but nothing gets printed to the debug console in the workspace of my extension. If I know the bug must be occurring in a given function, I can wrap all that function's code in a try-catch and then simply console.log the error in the catch statement. But that's a frustrating way to debug.
I'm pretty certain this is resulting from uncaught errors in promises, but I don't want to have to manually try catching ever one.
Any ideas on how to make sure I always get a stack trace?

Can I make Chrome more descriptive of errors?

I'm new to BDD with Jasmine. In fact, I've just downloaded Jasmine, written my first spec, and launched the SpecRunner.html file. I have yet to write a particular init method, and in Firefox/Safari I see a nice description of this error:
(Firefox) TypeError: Object.create(...).init is not a function in file...
(Safari) TypeError: undefined is not a function (evaluating 'Object.create(Seminar).init(seminarName)') in file...
However, in Chrome I see a technically correct, but disappointingly obtuse error:
TypeError: undefined is not a function
at Object.Seminar.create (file...Seminar.js:7:39)
Is there a way to make Chrome tell me the actual name of the missing method, as opposed to just the line number and column name of where the error occurred?
Is there a way to make Chrome tell me the actual name of the missing method, as opposed to just the line number and column name of where the error occurred?
No, but looking at the line and column should tell you what it is. You can also use Chrome's Dev Tools to make it stop execution on an exception that isn't handled, which will take you right to the place where the exception occurs, when it occurs, so you can inspect things. To do that:
Open Dev Tools
Go to the Sources pane
Click this icon on the right-hand side to turn it blue:
When that icon is blue, it will make Chrome stop when an exception occurs that isn't caught (there's also a checkbox that will appear if you want to stop on exceptions that are caught).

How to get Chrome debugger to break or error when working on undefined variables

My Javascript code (hundreds of lines) hangs Chrome and when I debug the issue I find out that a variable was undefined. I don't get errors in the console. So this is making my debugging more time consuming because there are no errors or exceptions or anything that tells me where the issue is.
I don't want to add debugging code. Is there a way to make the debugger put out an error, break in the debugger or give an exception or show anything useful for the developer when hitting an undefined variable during runtime? It doesn't have to be for Chrome only.
You can break into the DevTools debugger when a JavaScript error occurs using the Pause on JavaScript Exceptions feature. It has two active modes; pause on all exceptions, and pause on uncaught exceptions.
Based on the description of your experience, the application you are working on may have errors that are caught but not re-thrown or logged. Using the "Pause on All Exceptions" (blue colored pause icon), will help in this scenario.
Note: some libraries, like jQuery, catch exceptions and do not re-throw them. If you have this experience, you may need to advance past these exceptions or set the "Pause on All Exceptions" feature after all dependencies have loaded.
window.onerror = function() { debugger; }

Showing JavaScript exception message in Chrome dev tools

I'm using Chrome development tools to debug my JavaScript. When I tell Chrome "Not to pause on exceptions" and load my script, I get an intelligible description of what went wrong with the correct line highlighted:
var back_buffer = goog.dom.getElement('back_buffer').getContext('2d');
--> "Uncaught TypeError: Cannot call method 'getContext' of null"
OK, it makes sense: there's a typo in the name of my canvas element so 'getElement' returns null.
Now on to my question: when I tell Chrome to 'pause on uncaught exceptions', it still correctly highlights the offending line in my script, but now the nice, intelligible error descriptions is gone! How come? Even in debug mode I'd like to see the error message because it's very helpful. I poked around but couldn't find it anywhere.
Anybody could help here?
There does not appear to be good way to do this currently. This is the closest you can get:
The error is not showing because the execution of that script is paused just before it goes into the exception.
It's pausing right before the error so you can debug some things in the console.
What i tend to do in the situation you talk about, and the scope variables are not giving any more info, is add some watch expressions or execute some commands in the console.
In your back_buffer case you could for instance add a watch expression like this goog.dom.getElement('back_buffer') so you could see what it resolves to. If that expression causes an error you will see the error message there like you would after the script error occurred.
It might not be completely obvious to some people that when script execution is halted the execution context is the same as the execution context of the script at the time it paused, so all local variables are accessible in the console to console.log() or console.dir() or anything.
When you have pretty print set to on there will be not that much going on on that one line it paused at so mostly you shouldn't have to search for long to get an idea of what's causing the error and why.
Hope it helps,
PM5544.
You should be able see the same text in a red bubble message just under the offending source line once it executes.
Just do one more 'Step' and the red bubble will appear. This is logical as it pauses before the error/bubble behavior happens.
What if you catch the exception and send it to the log:
try
{
var back_buffer = goog.dom.getElement('back_buffer').getContext('2d');
}
catch(err)
{
console.log(err);
}
Once in the console you can examine the object in more detail.

Attempting to debug JavaScript and jQuery - where to go with this...?

Our company site has a JavaScript problem that I'm desperately trying to solve, but really struggling with. My JS skills are good enough to build a site with things like jQuery, but I am not that proficient in debugging - so really appreciate any help.
Seemingly randomly, all JS components (e.g. a jQuery Datepicker) on the page stop working. When force-reloading the page with the error console open, these errors happen about 60% of the time - there doesn't seem to be any pattern to it. The only way to fix the site once this happens is by clearing the cache and reloading.
The Console outputs the following:
Uncaught TypeError: Object #<Object> has no method 'each'
Uncaught TypeError: Object #<Object> has no method 'not'
Uncaught TypeError: Object #<Object> has no method 'each'
However: that's just one example. Other times I will get completely different errors. E.g. a few minutes after submitting this question, I tried again, and got this:
Uncaught TypeError: Cannot call method 'apply' of undefined
Which again was thrown from jquery.min.js - pretty-printed, line 1453 (third line down):
if (g.call(k) === "[object Array]")
if (!u)
e.push.apply(e, k);
I set Chrome to break on all unhandled exceptions, and this was another exception it caught - on line 3 of the minified jQuery library. Shown below is the pretty-printed version:
try {
b.call(c.documentElement, "[test!='']:sizzle")
} catch (f) {
e = !0
}
The actual erroring line begins b.call[...]. This works out to line 1904 of jquery.min.js.
I am using the latest jQuery
This only started happening recently - after changing nothing!
The errors happen seemingly randomly
Usually (but sometimes), no errors are thrown from my scripts - e.g. script.js - usually they are thrown from a minified library. It varies each time.
This seems to happen in all browsers, but more often in Chrome than Firefox
Any ideas where to begin? Unfortunately this is an internal corporate website so providing access is tricky, as we deal with sensitive data throughout the site.
Thank you for your help!
Seems to me that your page is quite big and the browser tries to execute the js code before the DOM loads completely... probably because you're using in-line javascript code..
That could explain the random errors and the fact that you have errors when you force the reload.
I'd suggest you to put your JS code inside a dom ready event so the js code could be executed without problems..
Hope this helps :)

Categories