Showing JavaScript exception message in Chrome dev tools - javascript

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.

Related

JavaScript errors does not show in the console

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

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?

Debugging Ember JS -- Identifying line in code that causes an error

So I'm getting the following error:
Uncaught Error: Assertion Failed: The key provided to get must be a string, you passed undefined
Should be easy enough to fix, if there was any indication of the line in my code that causes that error.
Using the chrome console, I click on ember.debug.js:6254 next to the error, which just shows me the ember code that throws the error. I can expand the error, but I just get a bunch of functions that can't be clicked on and no indication where they come from.
Can someone please help me figure out how to identify the line in my Ember code that is causing the error.
I've gotten this error before. It happens when you call get() in any of its forms (Ember.get() or this.get() or get(this)) without a string as the name of the property you want to retrieve.
You should be able to find the source of the error by auditing your application for wherever you call get() and making sure you pass the property name as a string. E.g., Ember.get('model.someProp') or this.get('someProp') or get(this, 'someProp').
This should be a comment but I can't, so here goes:
Iam new to Ember and have been spending quite a long time debugging. Remember that long stack of function calls that chrome's console shows.
Look for anything other than ember.debug.js...especially those marked (anonymous function) and files with names vendor.js or app-name.js
Usually in software development when debugging your best friends are going to be console.log() or alert() (in the case of JavaScript). Usually you have to figure out if your getting what ever is that you passing to your function by consolelog everything until you find your bug. Ember sometimes will not tell you what is exactly the error because does not know where exactly is coming from.
...computers are annoying but we love them....
here are some articles from Mozilla developer and Google on how to debug JavaScript.
I had a NULL value in my database which I wasn't accounting for in my app. In my case, it shouldn't have been NULL in the first place, so after giving the record a value in my database the problem disappeared.
I agree the error message is not very helpful.

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; }

Categories