博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TypeScript【Webpack 打包过】 编译过的代码怎么对源码调试?
阅读量:6885 次
发布时间:2019-06-27

本文共 558 字,大约阅读时间需要 1 分钟。

hot3.png

变换都可以通过 sourcemap 恢复。

如果用的 Angular CLI,那么 ng serve 默认就提供完整的 sourcemap,直接点鼠标打断点就行:

对于Angular 开发的项目:可以用这个插件 

Augury Logo

v2-5b7115bb4fdf45fb7b7c89cc805eb151_b.png

如果是自己配置的 Webpack 环境(),需要选择带 module 版本的 sourcemap 才会把 bundle 中的内容映射回源文件,例如 cheap-module-eval-source-map。

——————————————

Chrome

直接 Chrome 调试,Chrome 开发者工具中选择 Sources 标签,然后在左侧的树中选择 webpack:// 节点展开后进入源码目录设置断点即可

v2-efeeb20ff765c88d5928ee64a4bde0d0_b.png104237_Fhu0_3298482.png

 

v2-efeeb20ff765c88d5928ee64a4bde0d0_b.png

VS Code

直接在 vscode 中调试,前提条件是安装了 Debugger for Chrome,且在 .vscode 文件夹中创建了 launch.json,启动程序,然后直接 debug 走起

104318_AMgO_3298482.png

 

v2-7fc47a58e082fe034db9b0567549b889_b.png

WebStorm/Idea 

在 Run/Debug Configurations 中创建一个 Javascript Debug,指定好端口号即可进行 debug 了,当然别忘了先启动应用。

104417_YYTH_3298482.png

 

 

转载于:https://my.oschina.net/u/3298482/blog/1539709

你可能感兴趣的文章
export 与 export default
查看>>
linux配置网卡
查看>>
正则表达式语法
查看>>
013、Dockerfile构建镜像(2019-01-02 周三)
查看>>
Office Word 2013发布带数学公式的博客
查看>>
c# mvc如何获取xml文件
查看>>
mongodb Java(八)
查看>>
JavaScript随机数
查看>>
ASP.NET验证控件——RequiredFieldValidator
查看>>
strstr
查看>>
MySQL 条件 select case 的实现(解决 零 做分母的问题 )
查看>>
openNebula rgister img instance vms error collections
查看>>
error Infos
查看>>
PL/sql配置相关
查看>>
接着浅析table-cell的简单应用
查看>>
Project 10:简单图像的绘制
查看>>
(第五条)避免创建不必要的对象
查看>>
MongoDB的快速手动安装
查看>>
面试常见问题(转载)
查看>>
洛谷P3306 随机数生成器
查看>>