在此前的一篇文章中。介绍了如何在VScode中使用Debugger for Chrome来调试TypeScript
参见：https://blog.csdn.net/sjt223857130/article/details/80176943
| 调试时，按F5即可运行。但仍有一些不足，本文要解决的几个问题如下： |
- （1）希望按F5进行debug调试前进行一次编译代码。
而不用每次都要人工编译，当然你可以设置监视文件改变的时候自动编译。
不过改下代码保存就自动编译，也太频繁了吧？
- （2）希望在debug打开Chrome浏览器后，VScode自动从终端切换到“调试控制台”。
这样不用每次都要用鼠标从终端点击切换到调试控制台来查看输出。
- （3）debug时，要看到ts源码进行断点，而不是在js中。
这开启sourceMaps选项其实还不够。
| 以下分别解决以上问题。 |
（1）希望按F5进行debug调试前进行一次编译代码。
解决方案：增加 tasks.json 配置。这里我们增加了两个，上面的是编译命令，下面的是启动webServer。
- 以下是tasks.json 的内容。
上面的build是一个script名称，它对应的是package.json里面的script命令。
- 以下是package.json内容。
注意，需要指定它们的label名称，供launch.json中调用。在launch.json中我们增加一行命令。
"preLaunchTask": "build",
- 以下是launch.json的内容。
preLaunchTask 表示在按下F5进行debug前，需要执行的任务，这里指定了build标签名，就是tasks.json里面的任务名称。
这样一来，第一个问题解决。注意package.json--->tasks.json--->launch.json 这三者的关联性。
其中，launch.json和tasks.json在项目的.vscode目录下。
（2）希望在debug打开Chrome浏览器后，VScode自动从终端切换到“调试控制台”。
解决方案：其实从VS Code（1.2.0）最新亮点和特性全介绍中，我们可以发现这个功能的身影。
可能是VSCoce功能太多更新大频繁，不是每次都能注意到它新增的功能。到现在已经是1.24.0版本了。
为了在VS Code中提供更好的内部调试控制台，我们在 launch.json 中引入了 internalConsoleOptions 设置（参见#6159）。如果你想在调试过程中使用外部终端，同时在VS Code中关注调试的代码，这个功能会对你有很大帮助。提供的功能有：
neverOpen：VS Code 永远不会 打开调试控制台。openOnFirstSessionStart：VS Code在 第一次 调试会话时打开调试控制台。openOnSessionStart：VS Code在 每一次 调试会话时打开调试控制台。
也就是说，只需要在launch.json中加入internalConsoleOptions的值为openOnSessionStart就可以了。
这样，你每次按F5，终端编译完成后，弹出Chrome浏览器，vscode就会自动从终端切换到调试控制台。
这样第二个问题就解决了。
（3）debug时，要看到ts源码进行断点，而不是在js中。这开启sourceMaps选项其实还不够。
解决方案：你如果使用是http-server做为web服务器来断点调试。是不行的，可能需要别的选项，如果你知道可留言给我。
我这里，是必须要使用lite-server这个npm插件来做为web服务器，才会有sourceMap的断点调试。
但前提是，你在ts的编译选项tsconfig.json中和运行配置launch.json中需要开启以下选项。
这样，lite-server服务器才能识别并加载到map文件。sourceMap
以上都是一些配置上的小问题，在此记录一下。
希望给大家也有所帮助。