如何通过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 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
javascript表格的渲染组件
Jul 03 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
微信小程序实现弹框效果
May 26 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Vue响应式原理详解
2017/04/18 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
python爬虫请求头设置代码
2020/07/28 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
大学秋游活动方案
2014/02/11 职场文书
《我的信念》教学反思
2014/02/15 职场文书
体育课课后反思
2014/04/24 职场文书
领导班子整改方案
2014/10/25 职场文书
企业整改报告范文
2014/11/08 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle