基于VSCode调试网页JavaScript代码过程详解
一、调试准备
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配置远程调试Linux程序的问题
- ros项目调试:vscode下配置开发ROS项目的详细教程
- 如何通过vscode运行调试javascript代码
- VSCode Golang dlv调试数据截断问题及处理方法
- VScode Remote SSH通过远程编辑与调试代码
- 使用VSCode和VS2017编译调试STM32程序的实现
- VsCode搭建Spring Boot项目并进行创建、运行、调试
- 使用VSCode开发和调试.NET Core程序的方法
- VSCode1.4 搭建Golang的开发调试环境(遇到很多问题)
- Vscode Remote Development远程开发调试的实现思路
- VSCode 搭建 Arm 远程调试环境的步骤详解
- 分享5个实用的vs调试技巧
相关文章
本文通过实例代码给大家介绍了通过封装scroll.js 获取滚动条的值的相关知识，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了JS实现仿腾讯微博无刷新删除微博效果代码,涉及JavaScript实现Ajax无刷新删除的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
动态生成的IFRAME，设置SRC时的，不同位置带来的影响。 以下所说的是在IE7下运行的。IE6下也是同样。 在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。2008-03-03
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
这篇文章主要介绍了js常用方法、检查是否有特殊字符串、倒序截取字符串操作,结合完整实例形式分析了JavaScript字符串转换、检测、倒序、截取等相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了JS实现的网页背景闪电闪烁效果代码,涉及JavaScript定时函数结合页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JavaScript中数据结构与算法(三)：链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下2015-06-06
前一篇《关于selector性能比赛》中提到，目测觉得在$("div,p,a")这样有逗号时，sizzle耗时异常（600多个元素，花了200ms），说是它可能没有优化ie下的排序。2011-01-01
如何使用electron-builder及electron-updater给项目配置自动更新
这篇文章主要介绍了如何使用electron-builder及electron-updater给项目配置自动更新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
今天给大家介绍的文章是js实现的解压缩插件zip.js，非常的简单实用，有需要的小伙伴可以参考下。2015-12-12
这篇文章主要介绍了javascript异步编程的六种方式总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论