How To Make Chrome Halt on JavaScript Exceptions

Question

User-343630552 posted

I have what I suspect is a very simple question.  I am working on my 1st web app, a Blazor Wasm one written using VS Community 2019.  I would like Chrome to halt when a JavaScript exception is encountered while debugging, ideally with a visual signal that's happened.   So far, no luck finding a way to do that.

Thanks.  Steve

Answer 1

User475983607 posted

Consult the browser docs you are using.

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#exceptions

Answer 2

User-343630552 posted

Thanks.  Prior to posting my question, I found and toggled through the "Pause on exceptions" options (i.e. with and without Pause on caught exceptions checked), but didn't see a change in behavior.  I get a yellow bar at the bottom of the Chrome window that says "An unhandled error has occurred. Reload", at least for the exceptions I am encountering, regardless of how I have the settings.  And I have to open the DevTools window to examine the exception in the console.  Perhaps my expectations of how it should work are off.

Incidentally, I have read that the debugger with Blazor Wasm apps has problems.  I may be seeing some of that too.  For example, break points I set in the OnInitializedAsync override code I have don't work.  And I am not able to examine values in the Singleton Services objects I have set, but I can look at them if I assign the Services object to a local variable.

Anyway, thanks for the help.  Steve

Answer 3

User-474980206 posted

Chrome works different if the dev tools are visible or not. If you want debugging you should open the dev tools. If the error has already happened, reload the page.

Answer 4

User-343630552 posted

Bruce -

Thanks for the advice.  One of the exceptions I am trying to evaluate is in my OnInitializedAsync override method which executes during page load.  Consequently, reloading the page doesn't help.  Beyond this particular problem, however, I'd like not to have to use Chrome devtools at all, but instead look at almost everything of relevance within Visual Studio (not sure I can or will ever be able to see the schema and contents of my IndexedDB database).  I have discovered that the console log is visible in VS's Output tab (should have known that), so I can see the exception message there without opening devtools.  But what I would like is for the code to pause on break points I put in the OnInitializedAsync method so I can examine variables at the point of the exception, but that's not working.  I'm thinking I may never be able to break there (perhaps it's related to the async processing), but maybe fixes to the Blazor debugging problems I have read about will enable that at some point.  For now, I am moving ahead.

Anyway, thanks again.  Steve

Answer 5

User-474980206 posted

OnInitializedAsync is a Blazor (.net) routine, and the javascript debugger will not help. You use the javascript debugger to debug the blazor javascript framework, or javascript called by blazor. I believe VS has support for chrome remote debugging (not that I ever use it).

Chrome also has support for debugging WASM assemblies, but this won't help you a lot. the Blazor WASM assembly is a .net runtime, so you could only debug the runtime, not the Blazor code. So you need to use the Blazor debugger for what you want. As this debugger is not full featured yet, you may have to fallback to older tricks (print to console, etc).

Answer 6

User-343630552 posted

I am trying to debug all of my code (TS/JS and Blazor) using VS's debugger.  As you say, VS does support chrome remote debugging, but it is not working everywhere I would expect and in some situations not in ways I would hope.  This may reflect the bugs I have read about or just limitations in what the VS debugger will ever do.  A bit hard to tell at the moment because documentation of the Blazor Wasm debugging support in VS is a bit thin at the moment.  Given that Blazor was just officially release in May, I am clearly a relatively early user.  Not ideal since I am a newbie web developer on top of that.  But hey, I am retired and COVID-19 restricted, so what else is there to do?

Good suggestion on console logging.  I already have way too many such statements in my code, but at least they enable progress.

Thanks yet again.  Steve