一、调试准备
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中打开调试按钮进行调试,即可进入调试模式。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于VSCode调试网页JavaScript代码过程详解”评论...
更新动态
2024年04月29日
2024年04月29日
- 原画壁纸及美图第206期,无水印可自取
- 归龙潮蜃境宝库怎么玩 材料副本介绍
- 鸣潮散华配队推荐 阵容怎么搭配
- 剑灵2手游职业推荐攻略 玩什么职业好
- dnf神话自选礼盒选什么
- dnf称号封装需要多少个蜜蜡
- dnf攻坚战单人模式怎么打
- 《庄园领主》首发6.6折,杉果春促史低游戏推荐
- 你口味这么重吗 囧图 这个姿势是会拉到座圈上的吧
- 蛋究竟要怎么玩才好?动图 排球少女的臀部过于肥美
- 翁倩玉.1974-温情满人间【海山】DTS【WAV分轨】
- 范琳琳.2012-爱与海【大藏】【WAV+CUE】
- 萧淑慎.2002-爱恨萧淑慎【滚石】【WAV+CUE】
- 618淘宝京东均取消预售机制 618提前开打
- 2024五一档新片预售票房破亿:《九龙城寨之围城》登顶