Sometimes when I hit a breakpoint in the Chrome Developer Tools, the TypeScript this
is actually _this
in the JavaScript. I have to manually put _this
in the console to see what is actually being used. Is there a way to fix this?
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.
Go to Source tab, Select Chrome "webpack://"->"src/app" -> your typescript file. Or in older version of chrome follow this path "webpack://"->"."->"src/app" -> your typescript file ( See the image file). Then set the debug line marker on ts file and use normal java script keyboard(F8, F10, F11 etc) feature to debug it.
Go to the "Sources" tab. At the top right hand side, toggle the button that looks like the pause symbol surrounded by a hexagon (button on the far right) until the color of the circle turns black to turn it off. If the pause symbol isn't blue it may be that you've accidentally marked a line for debugging inspection.
the TypeScript this is actually _this in the JavaScript
This is due to a bug in the sourcemaps. You can track it here : https://github.com/Microsoft/TypeScript/issues/2859
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