基于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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
一文读懂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新手入门学习方法
2011/05/08 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python标准库sched模块使用指南
2017/07/06 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
修理厂厂长岗位职责
2014/01/30 职场文书
十八大演讲稿
2014/05/22 职场文书
广告学专业求职信
2014/06/19 职场文书
国庆宣传标语
2014/06/30 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
python常见的占位符总结及用法
2021/07/02 Python