如何通过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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
解决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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python bisect模块原理及常见实例
2020/06/17 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
2014年就业工作总结
2014/11/26 职场文书
区域经理岗位职责
2015/02/02 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
食堂管理制度范本
2015/08/04 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers