如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 javascript 代码,总结了两种方法,分享给大家.
方法一: 在 js 后缀文件中写 javascript 代码.
1. 环境配置:
(1). 需要安装 nodejs (在Bing搜索中输入 nodejs, 找到nodejs官网,然后找到适合你电脑配置的安装包进行下载安装,最后要输入 node -v 和 npm -v 检验是否安装成功)
(2). 可以安装 vscode 扩展包: Code Runner
2. 新建一个 js 后缀的文件,如 hello_world.js ,输入以下内容:
var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);
3. 运行程序
(1) 如果你安装了 Code Runer,那么就可以直接点击右键选择 Run Code 运行代码,就可以在 OUTPUT 窗口上看到运行结果
(2) 在 vscode 的 TERMINAL 终端输入: node hello_world.js 也可以看到 运行结果
(3) 想要按下 F5 进行运行并且调试,那么就要配置好 launch.json 文件. 先点击 Run -> Open Configurations, 输入以下内容
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/hello_world.js",
},
]
}
注意这里的第 11 行的文件名称要改成你自己定义的文件名称,其中的workspaceRoot 表示当前文件路径.
再按下 F5 的时候,记得配置文件一定要选择名为 Launch (和上面的name同名) 的那个配置文件运行,配置了 launch.json 文件,你还可以在 js 文件中打上断点进行调试.如下图所示
方法二: 在 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 ,输入以下内容:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
console.log("hello world");
document.getElementById("demo").innerHTML="My First JavaScript Function";
alert("this is a place where can write code.");
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
3. 运行程序
(1) 按下 F5 运行并且调试代码,这里主要涉及到 launch.json 文件的配置,先点击 Run -> Open Configurations, 输入以下内容
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "使用本地chrome调试",
"file": "${file}",
"port":8000,
}
]
}
然后在 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 )
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序调用wx.getImageInfo遇到的坑解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
在网站中加入网页助手小精灵，当用户访问网站时，向用户问好，或是传递一些网站的重要信息，给用户带来极好的体验感，那么基于js代码是如何调用网页助手小精灵的呢？下面跟着脚本之家小编一起学习吧2016-06-06
一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象，很实用，大家可以看看2014-09-09
这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
javascript event在FF和IE的兼容传参心得(绝对好用)
event在IE和FF不兼，下面为大家分享的是javascript event在FF和IE的兼容传参心得,需要的朋友可以参考下2014-07-07
它有一个要求就是你的前端js是作为模块式的开发, 在前端逻辑比较复杂的话, 使用模块式来进行前端开发应该是种不错的选择。这里只简单介绍一下2013-11-11
这篇文章主要为大家详细介绍了bootstrap选项卡使用方法，包括选项卡组件和底部可以切换的选项卡面板使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
一般来说文章内容中的广告点击率更好，也更容易被访客看到，如果直接将广告放到页面头部会影响网站的速度，所以一般都比较喜欢这种方法，这里分享下实现方法2016-01-01
这篇文章主要为大家详细介绍了JavaScript实现小球沿正弦曲线运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家详细介绍了js实现点击切换卡片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论