如何利用vscode调试编译后的js代码-创新互联
这篇“如何利用vscode调试编译后的js代码”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何利用vscode调试编译后的js代码”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
创新互联建站是一家专注于成都网站建设、成都网站设计与策划设计,微山网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:微山等地区。微山做网站价格咨询:13518219792vscode有什么用
Visual Studio Code 是一个运行于 OS X,Windows和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器,它为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。
vscode 的常规调试
vscode 的调试界面在窗口最左边:
最新版本的vscode,该选项默认隐藏了,需要自己打开。
首次打开调试界面时,当前没有任何调试配置,我们可以点击齿轮 icon 添加一个:
选择 nodejs 后,会自动在当前工程目录下添加 .vscode/launch.json 文件,这个文件就是 vscode 调试配置文件。
一个简易的配置文件内容为:
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动程序", "program": "${workspaceFolder}/index.js" } ] }
上面这个配置所做的工作是启动当前目录下的 index.js 文件进行调试。
我们也可以设置每次摁 F5 时自动调试当前打开的文件,只需要修改 program:
{ "program": "${file}" }
调试编译后的文件
想要调试编译后的文件,需要对 launch.json 文件进行设置。
vscode 要想调试编译后的代码,他需要知道哪些代码是经过编译的,且需要知道编译后的代码与编译前代码的对应关系。
其实理论上 vscode 是可以把每个要执行的文件都认为是编译后的文件,进行源文件的查找?我猜是因为性能原因,我们需要自己指定哪些文件是编译后的文件。在 launch.json 中,使用outFiles属性来指定编译后的产出文件:
{ "version": "0.2.0", "configurations": [ { // 省略其他设置... "outFiles": [ "${workspaceFolder}/lib/*.js", ] // ... } ] }
虽然有些麻烦,但好在我们可以使用通配符。
现在有了编译后的文件,vscode 还需要知道源文件,以及编译后文件与源文件的对应关系,听着有没有很熟悉?这个过程就是通过 sourcemap 来进行实现的。
我们需要在编译 js 文件时生成相应的 .map 文件,并在产出 js 文件后面附加 .map 文件的地址:
//@ sourceMappingURL=./index.js.map
ok,现在 vscode 在执行 js 文件时,会从 outFile 中查找是否是编译后的代码,如果是,就通过 sourcemap 映射到源代码,方便我们进行调试。
自动执行编译
现在我们的开发流程变成了:修改源代码 -> 编译源代码 -> 调试。
为了方便,我们可以设置preLaunchTask属性,该属性的作用是每次调试前执行一个前置任务,我们可以把编译过程放在前置任务里。
首先我们需要来配置一个task,task的配置文件在 .vscode/tasks.json,可以打开 command palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 选择“任务:配置任务”自动生成一个:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build", "type": "npm", "script": "build", "problemMatcher": [] } ] }
这里我们配置了npm run build作为前置任务,每次执行调试时都会先进行 build。
示例配置文件
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "example", "program": "${workspaceFolder}/index.js", "preLaunchTask": "build", "cwd": "${workspaceFolder}", "outFiles": [ "${workspaceFolder}/lib/*.js" ] }
以上是“如何利用vscode调试编译后的js代码”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:如何利用vscode调试编译后的js代码-创新互联
本文URL:http://pwwzsj.com/article/jjhie.html