Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Typescript debugging references wrong 'this'

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?

like image 740
Homer Avatar asked Jul 10 '15 17:07

Homer


People also ask

How do I debug TypeScript in Chrome?

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.

How do I run a TypeScript file in Chrome?

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.

How can I stop chrome from going into debug mode?

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.


1 Answers

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

like image 58
basarat Avatar answered Sep 29 '22 06:09

basarat