如何通过vscode运行调试javascript代码


Posted in Javascript onJuly 24, 2020

初次正式要写 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 文件中打上断点进行调试.如下图所示

如何通过vscode运行调试javascript代码

方法二: 在 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 按钮,你可以看到中间结果了,如下图所示

如何通过vscode运行调试javascript代码

(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 )

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
You might like
PHP 身份验证方面的函数
2009/10/11 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP 文件上传限制问题
2019/09/01 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
python中的全局变量用法分析
2015/06/09 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python实现图片拼接的代码
2018/07/02 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
浅析Python的命名空间与作用域
2020/11/25 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
收款授权委托书
2014/10/02 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
市场督导岗位职责
2015/04/10 职场文书
招商银行收入证明
2015/06/17 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python