Real mystery - latest chrome. The .ts file gets stuck in the debugger and won't update. I clear cache, nothing changes. In the debugger tool, the .ts file stays frozen. I tried bouncing the server, closing Chrome. It comes back stuck, I tried deleting the js.map files, no change.
To debug TypeScript, we need to create an index.html and inside that we need to link our findbug.js file, this is because we will use the Chrome DevTools and we will be able to debug our TypeScript file. After that, we need to install live-server or use the live-server extension for VS Code.
DevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. The Sources panel is where you debug JavaScript. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
This makes the tree more closely resemble source files you get to see in your IDE, and these files are now separated from the Deployed Code. To enable this option in Chrome DevTools, go to Settings > Experiments and check Group sources into Authored and Deployed trees. The Chrome DevTools team plans to enable this experiment by default soon.
Again, Chrome can automatically detect running sessions by inspecting http://127.0.0.1:9229/json . Now click Inspect to start debugging. A new DevTools window will show up. You can now navigate to the desired file, (e.g. by pressing Cmd + P on Mac), place your break-points and have fun 😄:
I tried bouncing the server, closing Chrome. It comes back stuck, I tried deleting the js.map files, no change
Open up dev tools. Then right click (or cmd click) the refresh button. Select "empty cache and hard reload" as shown:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With