vscode 运行和调试 javascript 代码 (vscode run and debug javascript code) |
您所在的位置：网站首页 › js代码调试原理 › vscode 运行和调试 javascript 代码 (vscode run and debug javascript code) |
vscode 运行和调试 javascript 代码 (vscode run and debug javascript code)
|
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 javascript 代码,总结了两种方法,分享给大家. 方法一: 在 js 后缀文件中写 javascript 代码.
1. 环境配置: (1). 需要安装 nodejs (在Bing搜索中输入 nodejs, 找到nodejs官网,然后找到适合你电脑配置的安装包进行下载安装,最后要输入 node -v 和 npm -v 检验是否安装成功) (2). （可选项，可以安装下看下结果）如果你想直接看结果，不想debug调试也可以安装 vscode 扩展包: Code Runner 运行 javascript 代码
2. 新建一个 js 后缀的文件,如 hello_world.js ,输入以下内容: 1 var a = 1; 2 var b = 2; 3 console.log("hello world"); 4 console.log("a = ", a); 5 console.log("b = ", b);
3. 运行程序的三种方法 方法一： 如果你安装了 Code Runer，也就是做了环境配置的第二步了。那么就可以直接点击右键选择 Run Code 运行代码,就可以在 OUTPUT 窗口上看到运行结果 方法二：在 vscode 的 TERMINAL 终端输入: node hello_world.js 也可以看到 运行结果 方法三：如果你想要按下 F5 进行运行并且调试,那么就要配置好 launch.json 文件. 先点击 Run -> Open Configurations, 输入以下内容 1 { 2 // Use IntelliSense to learn about possible attributes. 3 // Hover to view descriptions of existing attributes. 4 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 "version": "0.2.0", 6 7 "configurations": [{ 8 "name": "Launch", 9 "type": "node", 10 "request": "launch", 11 "program": "${workspaceRoot}/hello_world.js", 12 }, 13 ] 14 }注意这里的第 11 行的文件名称要改成你自己定义的文件名称,其中的 workspaceRoot 表示当前文件路径. 再按下 F5 的时候,记得配置文件一定要选择名为 Launch (和上面的name同名) 的那个配置文件运行,配置了 launch.json 文件,你还可以在 js 文件中打上断点进行调试.如下图所示
（如果你debug成功请忽略这一段话）如果你第一种和第二种方法你都成功了（说明你的代码没有问题），但是使用第三种方法进行 debug 的时候一直不能显示 debug 效果，什么都没有显示和反应，那么可以试下在 setting.json 文件中加上以下语句应该就没问题了： "debug.javascript.usePreview": false, 参考资料：https://github.com/microsoft/vscode-js-debug/issues/643
方法二: 在 html 后缀文件中写 javascript 代码. 1. 环境配置: (1) 安装 chrome 浏览器(做前端开发这是通用浏览器) (2) 安装 vscode 扩展包: Debugger for chrome 和 open in browser (3) File -> Preferences -> Settings, 输入 breakpoints，找到 Debug: Allow Breakpoints Everywhere，勾上允许在任何文件设置断点（这样才可以在html文件中设置断点） 2. 新建一个 html 后缀的文件,如 a.html ,输入以下内容: 1 DOCTYPE html> 2 3 4 5 6 function myFunction() 7 { 8 console.log("hello world"); 9 document.getElementById("demo").innerHTML="My First JavaScript Function"; 10 alert("this is a place where can write code."); 11 } 12 13 14 15 16 17 My Web Page 18 19 A Paragraph 20 21 Try it 22 23 243. 运行程序 (1) 按下 F5 运行并且调试代码,这里主要涉及到 launch.json 文件的配置,先点击 Run -> Open Configurations, 输入以下内容 1 { 2 // Use IntelliSense to learn about possible attributes. 3 // Hover to view descriptions of existing attributes. 4 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 "version": "0.2.0", 6 "configurations": [ 7 { 8 "type": "chrome", 9 "request": "launch", 10 "name": "Launch Chrome against localhost", 11 "url": "http://localhost:8080", 12 "webRoot": "${workspaceFolder}" 13 }, 14 { 15 "type": "chrome", 16 "request": "launch", 17 "name": "使用本地chrome调试", 18 "file": "${file}", 19 "port":8000, 20 } 21 ] 22 }然后在 script 的代码部分打上断点,按下 F5 , 点击 Try it 按钮,你可以看到中间结果了,如下图所示
(2) 鼠标右键点击 Open in Other Browsers, 选择其中 一个浏览器就可以看到结果,再点击按钮出现的网页中的 Try it 按键,就可以调用 script 中 js 的代码的结果. 这里,你也可以在vscode中设置你的默认浏览器,那么你就可以选择Open in Default Browers, 在默认的浏览器中打开, 或者按下快捷键 Alt + B 查看结果. (这种方法不能调试,并且这种方法只能在配置好launch.json后再按下F5之后才可以使用) (备注: vscode 默认浏览器的设置, File -> Preferences -> Settings, 输入 default browser , 找到 Open-in-browser : Default , 我这里是输入了 : Google Chrome )
|
【本文地址】
今日新闻 |
推荐新闻 |