告诉Chrome调试js而不是ts

时间:2022-08-27 18:16:09

By default (and hopefully it's not the only option) when I have a ts file, Chrome only lets me debug the ts code. I.e it does show me the content of both the ts and js files, but when I try to put a break-point in the js file, it immediately transfers me to the ts file and locates the break-point in the right place.

默认情况下(希望它不是唯一的选项)当我有一个ts文件时,Chrome只允许我调试ts代码。它确实向我显示了ts和js文件的内容,但是当我尝试在js文件中放置一个断点时,它立即将我转移到ts文件并在正确的位置找到断点。

How can I tell Chrome to debug the js file rather than the ts one?

如何告诉Chrome调试js文件而不是ts文件?

3 个解决方案

#1


17  

Since you don't have control over the TS compilation settings, you can disable JavaScript source maps all together in Chrome.

由于您无法控制TS编译设置,因此您可以在Chrome中一起禁用JavaScript源地图。

Load the developer tools (Chrome Menu > More Tools > Developer Tools), then load the developer tool settings (Developer Tools Menu > Settings), find the setting for "Enable JavaScript source maps" and disable it.

加载开发人员工具(Chrome菜单>更多工具>开发人员工具),然后加载开发人员工具设置(开发人员工具菜单>设置),找到“启用JavaScript源地图”的设置并将其禁用。

#2


3  

If you are in development mode, you should have source mapping between the TypeScript and the transpiled JavaScript. For debugging, you would put breakpoints on the TypeScript code in DevTools, as that is the code you wrote it in. It makes sense to debug the code you wrote.

如果您处于开发模式,则应该在TypeScript和已转换的JavaScript之间进行源映射。对于调试,您可以在DevTools中的TypeScript代码上放置断点,因为这是您编写的代码。调试您编写的代码是有意义的。

If you want to debug only the JavaScript, run the application in the deployed mode (no source map), and set the breakpoint on the resulting JavaScript code.

如果只想调试JavaScript,请在​​部署模式下运行应用程序(无源映射),并在生成的JavaScript代码上设置断点。

#3


0  

I assume you are using tsc to compile.

我假设您正在使用tsc进行编译。

If so, there is a simple parameter that will tell tsc to not create source maps and hence not include the # sourceMappingURL=... directive:

如果是这样,有一个简单的参数会告诉tsc不创建源映射,因此不包括#sourceMappingURL = ...指令:

tsc --sourceMap false

#1


17  

Since you don't have control over the TS compilation settings, you can disable JavaScript source maps all together in Chrome.

由于您无法控制TS编译设置,因此您可以在Chrome中一起禁用JavaScript源地图。

Load the developer tools (Chrome Menu > More Tools > Developer Tools), then load the developer tool settings (Developer Tools Menu > Settings), find the setting for "Enable JavaScript source maps" and disable it.

加载开发人员工具(Chrome菜单>更多工具>开发人员工具),然后加载开发人员工具设置(开发人员工具菜单>设置),找到“启用JavaScript源地图”的设置并将其禁用。

#2


3  

If you are in development mode, you should have source mapping between the TypeScript and the transpiled JavaScript. For debugging, you would put breakpoints on the TypeScript code in DevTools, as that is the code you wrote it in. It makes sense to debug the code you wrote.

如果您处于开发模式,则应该在TypeScript和已转换的JavaScript之间进行源映射。对于调试,您可以在DevTools中的TypeScript代码上放置断点,因为这是您编写的代码。调试您编写的代码是有意义的。

If you want to debug only the JavaScript, run the application in the deployed mode (no source map), and set the breakpoint on the resulting JavaScript code.

如果只想调试JavaScript,请在​​部署模式下运行应用程序(无源映射),并在生成的JavaScript代码上设置断点。

#3


0  

I assume you are using tsc to compile.

我假设您正在使用tsc进行编译。

If so, there is a simple parameter that will tell tsc to not create source maps and hence not include the # sourceMappingURL=... directive:

如果是这样,有一个简单的参数会告诉tsc不创建源映射,因此不包括#sourceMappingURL = ...指令:

tsc --sourceMap false