How to debug Angular SPA in either vs2019 or vscode - visual-studio-code

This may be a stupid question, but I can't figure out how to debug my whole application in either vscode or vs2019 community. If I use vs2019, I can debug the api, controllers, etc just fine, but can't debug the typescript or js. If I use vscode, I can debug the typescript, but it doesn't make the calls to the api so the app locks up...
Any suggestions? I've tried the google extension in vscode but still can't debug the typescript code.
Thanks in advance.

You do it in the Chrome dev tools, hit F12 in Chrome and go to the sources tab. Hit ctrl-p to search for the source file. You can set break point in the TypeScript.

Related

Blazor WASM Standalone Debug stopped working

I've been developing blazor wasm apps in vscode for the past few months without incident. All of a sudden, I can't debug via F5 any longer. I'm literally starting with a brand new app (dotnet new blazorwasm) and when I hit F5 I get the following error:
I've uninstalled/reinstalled vscode, chrome, updated .net core 5, tried Edge put things into my launch and launchsettings.json that have helped others and plenty of other things things that I can't recall. Even created a new account on my computer to eliminate possible plugins or settings, same problem.
One thing that does work is that I can debug the old way where I would run Chrome from the command line: open /Applications/Google\ Chrome.app --args --remote-debugging-port=9222
Then you can hit Cmd+Shift+D in Chrome to start debugging within Chrome. This is a stop gap, but I'd really like to figure out how/why this just stopped working.
I created repo that reproduces it on my machine.
I'm not finding a lot of ways to gather diagnostic details that might help me determine the cause, so would appreciate any tips that would help me solve this.
Using latest chrome and vscode, even tried the insider build. No luck. I'm not sure what I did or how to fix it. Any help is greatly appreciated!
This is todo with omnisharp update. I get the same. You can downgrade omnisharp as a test and it will work again. I am investigating.

VSCode Marketplace Does Not Load

I have recently downloaded VSCode, but my most basic functions were not working due to "cannot edit in read-only editor" error. Thank to stack overflow I fixed the issue by changing code runner settings and enabling editing through the terminal. Then I tried to move the program from downloads folder to applications, when suddenly the extensions marketplace stopped loading. When I go to "Help" --> "Toggle Developers Tools" --> "Console", I see two messages:
I am using MacBook Pro (2020) and have no idea what to do. I am very new to programming and would really appreciate any help.
I'm not sure if this is gonna help, but you can reinstall VSCode again, this time put the app in the Applications folder. If the marketplace doesn't load maybe it cannot connect to the DNS, try to change the DNS address to google's 8.8.8.8.
Also, take a look at this, it seems similar to your issue. https://github.com/Microsoft/vscode/issues/54033

Chrome/Edge runs slow in F12 developers tools

Has anyone else seen F12 developers tool RUN SLOW, Very SLOW on Chrome/Microsoft Edge?
I tried it on FireFox and everything works fine when using F12.
Chrome version: 81.0.4044.129
Microsoft Edge version: Version 81.0.416.68 (Official build) (64-bit)
I reported it via chromium bug report. Just curious if anyone else is seeing this.
I removed a couple of extension and it still does it.
My co-worker figured it out.
https://www.html5rocks.com/en/tutorials/developertools/async-call-stack/
I needed to go to Options for F12 and check "Disable async stack traces".
Once that is checked, F12 developers tool works fine and there is log lag!
Thanks Brad!

Service-worker.js not available in the for debugging in the chrome dev tools

I understand service-worker runs as a separate thread parallel to the main thread.
I have an android app that runs Webview. My app is in react and i use workbox strategies for caching.
Service worker updates everytime I do a new build. However the source file of service-worker.js is not available in the chrome dev tools for me to debug.
Any idea how i can get the file there so that i can put breakpoints and debug ?
PS: just few days before i could get the file for debugging the dev tools. I am not sure what has changed. I havent changed any settings the the browser.
I'm having the exact same problem with the same symptoms and timeframe. I tried everything I can think of and can no longer get remote debugging of a service worker running in an Android WebView to work.
Like you I am sure it was working in mid-February and stopped working in the last few weeks.
I submitted a bug to Google which you can find here.
I think we can only hope it will be fixed in an upcoming release of Chrome.
You can inspect your extension's service worker but it's tricky, I don't know why Chrome doesn't show the service worker in the default chrome extension devtools.
here is how you can do it:
open chrome://serviceworker-internals/?devtools
find your extension there, there is a textarea that shows console logs, every console log will show the extension path in chrome e.g.
Console: {"lineNumber":688,"message":"[crx-helper] connection error","message_level":3,"sourceIdentifier":3,"sourceURL":"chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js"}
get that sourceUrl chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js yours will have a different id, which you can also see in chrome://extensions
paste that path in a new tab and open devtools (screenshot).

get classic dev mode does not work

I am using GWT 2.6.1 and I want to debug my application as it was before in Eclipse 4.4 (Luna).
When I start debugging in Classic Dev Mode, I get a white blank screen on Chrome. When I open debug screen in Chrome, I see the error message : " Failed to load resource: net::ERR_CONNECTION_REFUSED".
How can I debug in old fashioned way?
Thx in advance.
HDayi
The Dev Mode plugin has been deprecated a long time ago for both chrome and firefox.
If you really want to keep using the old dev mode, the only browser that will allow you to use it right now is Internet Explorer.
If you can, you should consider switching to the all new GWT 2.7 which contains significant improvement to the super dev mode that replaces the old hosted mode, with greatly improved recompilation times.