vscode 使用ES6调试js
vscode 调试js使用ES6
vscode调试
vscode使用node.js调试,默认是不支持ES6语法的,所以解决方案也十分简单,对ES6语法进行转换即可。对ES6语法转换我们可以通过babel这个js编译器对ES6语法进行转换即可。
什么是 Babel?
Babel 是一个 JavaScript compiler,主要用于在当前和旧的浏览器或环境中,将 ECMAScript 2015+(ES6) 代码转换为 JavaScript 向后兼容版本的代码。
解决方案
安装Babel
安装babel十分简单,使用npm进行安装即可
npm install babel-cli babel-preset-env babel-preset-es2015 -D
修改package.json
在package.json中添加以下两个选项,scripts
用于添加脚本命令,平时的npm run build
都是寻找package.json文件并执行里面设置的脚本命令。
"scripts": {"js:test": "babel src -d build -s", //babel的脚本指令},"babel": { //对babel的设置"presets": [ //要处理的语法"es2015"],"sourceMaps": true, //生成映射文件.map"retainLines": true}
下面对这个babel命令进行解析
// src代表源文件命令
// build代表要编译文件存放目录
// -d代表编译文件存放目录不存在时自动创建
// -s代表生成.map文件,调试时需要的文件
babel src -d build -s
在终端通过npm运行脚本命令
/***发现目录下生成一个build文件夹*文件夹有两类文件,.js文件和.js.map文件*.js文件为编译后文件(已经将里面的import等语法进行传化了,是vscode能运行的文件)*.js.map文件是映射文件将编译后的.js文件和源.js文件进行关联,打断点时能调试。
*/
npm run test
配置vscode
配置launch.json
在项目目录下的.vscode文件中创建一个叫launch.json
文件。
注意点:
- **“program”**为运行程序路径,应该写编译后的.js文件地址,因为调试时,我们都是直接对源文件进行调试的,所以这里的文件执行路径等于:工作目录+打包文件路径+源文件名称
- **“preLaunchTask”**要运行的脚本任务名称,在tasks.json中配置,配置这个的原因是:你每次改源代码时都需要重新编译ES6语法形成新的.js文件,所以我们需要配置能在命令行上运行的任务
- **“sourceMaps”**代表有映射文件存在(.js.map)
{// 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": "node", //类型"request": "launch","name": "es6",//${workspaceFolder}当前工作目录,${fileBasename}当前运行文件名称//这里必须设置文编译后的js文件,因为vscode不认ES//测试运行文件"program": "${workspaceFolder}/build/${fileBasename}",// 如果存在SourceMap就使用"sourceMaps": true, // 调试之前要做的任务名(运行tasks.json文件里面的脚本任务)"preLaunchTask": "jstest", // 是否启动后自动停止程序"stopOnEntry": false, // 生成的代码中,如果无法映射回源代码,就自动单步执行"smartStep": true, //编译文件输出地址"outFiles": ["${workspaceFolder}/build/**"]}]
}
配置tasks.json
配置任务,每次对文件测试时会运行改任务,重新编译工程src下的源文件
{"version": "2.0.0","tasks": [{"label": "jstest", // 该任务的名字,只需要增加这一条即可"type": "npm","script": "js:test", //任务等价于 npm run js:test"problemMatcher": []}]
}
vscode 使用ES6调试js相关推荐
- vscode 调试_如何使用VSCode调试JS?
更多精彩,请点击上方蓝字关注我们! 序言 做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作. 一.环境准备 ...
- vscode之调试js
使用vscode 可以直接对js文件进行调试,好强大.今天试了一把,很爽. 首先安装vscode 然后直接写一段js文件: 然后F5调试,选择nodejs 会有个配置文件,我是这么配置的: 如果想调试 ...
- vscode调试js
1.检查你使用的vscode的版本是否是比较新的,我使用的是最新版本,如果不是最新版本需要在help----->check for updates一下 1.安装Debugger for Chro ...
- vscode调试js,chrome调试js
vscode调试js,chrome调试js nodejs调试文档:nodejs调试文档 三种启动调试方式: 1.vscode直接F5 2.配置launch.json,在"调试"列表 ...
- vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)
文章目录 declaration vscode 对于javascript的支持 环境 使用node.js调试纯js代码 使用浏览器调试 试验代码 Note! edge浏览器独立调试编辑并保存代码 窗格 ...
- 使用VSCode调试JS
如何使用VSCode调试JS 序言 插件安装 修改配置文件 序言 作为前端开发的朋友经常需要使用VSCode编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍如何配置操作. 插件安装 首 ...
- vscode 调试 js
文章目录 1.使用 chrome 调试页面 1.安装插件:open in browser 2.在要调试的页面上右键选择 open in browser 3.在 chrome 中打开开发者工具 2.使用 ...
- 【Js】【调试】VSCode中调试Js代码
以前调试一段js代码总是会将js代码嵌入html页面,然后利用浏览器的开发者工具打断点来调试js代码,感觉还是有一点麻烦,想着直接在vscode中调试一个js代码那不就很方便了吗. vscod ...
- vscode断开调试服务器文件,vscode显示等待调试器断开连接
我正在尝试在vscode上调试量角器脚本. 我编辑了launch.json文件,但是调试控制台抛出了下面的错误. vscode调试控制台输出: C:\Program Files\nodejs\node ...
最新文章
- 人脸对齐--One Millisecond Face Alignment with an Ensemble of Regression Trees
- 黄聪:VirtualBox 安装ghost版windows XP
- Java中的classpath
- linux定时任务crond
- 一个关于Python字符串格式化输出的练习
- 猜数字游戏的提示(UVa340)
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 4丨游戏玩法分析 I【难度简单】
- 读《DTS分析模型、设计模型》有感
- fedora启动进入命令窗口_查看版本_修改hostname
- 从0开始搭建基于Zookeeper的Spark集群
- centos 5.8 mysql_linux centos5.8装yum安装mysql
- IText PDF签章时,如何获取PDF页的坐标
- 本来共享的计算机突然无法访问,WIN7局域网无法启用共享访问解决办法
- 【运筹学】线性规划数学模型 ( 求解基矩阵示例 | 矩阵的可逆性 | 线性规划表示为 基矩阵 基向量 非基矩阵 非基向量 形式 )
- Navicat定期备份MySQL数据库,定期清理备份文件
- svn is already locked如何解决
- endl与\n的区别
- ArcGIS earth 1.0 beta体验报告——给我一个按钮我将转动整个地球
- 普通麦克风和多阵列麦克风的区别
- Android中HorizontalScrollView的使用总结