基于VSCode调试网页JavaScript代码过程详解


Posted in Javascript onJuly 20, 2020

一、调试准备

Windows10 64bits

IDE:Visual Studio Code1.28.2

安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新启动vscode即可。)

二、调试配置

首先该插件运行需要安装有本地服务器,其次有两种配置方式,分别为:

(1)launch:重新打开一个chrome来显示应用程序

(2)attach:在已经运行的chrome中显示应用程序

2.1、Launch配置

按F5并选择chrome进入配置文件launch.json,我的Launch配置如下所示:

"version": "0.2.0",
"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost/文件路径",
    "webRoot": "${workspaceFolder}"
  }
]

2.2、Attach配置

attach的launch.json配置如下所示:

{
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 9222,
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}"
}

步骤一:让chrome进入调试模式:

方法一:在命令行中进行设置:

路径/chrome.exe --remote-debugging-port=9222

方法二:chrome桌面图标右键 -> 属性 -> 目标 -> 在路径后面添加 --remote-debugging-port=9222 即可。

其中 --remote-debugging-port 的值与lanuch.json中的 port 的值要匹配。然后在浏览器中打开本地服务器上的web页面

步骤二:在vscode中打开调试按钮进行调试,即可进入调试模式。

基于VSCode调试网页JavaScript代码过程详解

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

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
You might like
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
javascript date格式化示例
2013/09/25 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python对url格式解析的方法
2015/05/13 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python程序需要编译吗
2020/06/19 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
护理学应聘自荐书范文
2014/02/05 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
班级标语大全
2014/06/21 职场文书
2014年仓库工作总结
2014/11/20 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书