头闻号

谭立民

护肤膏霜|洗面奶

首页 > 新闻中心 > 科技常识:VSCode调试网页JavaScript代码
科技常识:VSCode调试网页JavaScript代码
发布时间:2024-12-25 00:00:40        浏览次数:11        返回列表

今天小编跟大家讲解下有关VSCode调试网页Javascript代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关VSCode调试网页Javascript代码 的相关资料,希望小伙伴们看了有所帮助。

一、调试准备Windows10 64bitsIDE: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中打开调试按钮进行调试,即可进入调试模式。

来源:https://www.cnblogs.com/jswolf/archive/2018/10/23/9836464.html

来源:爱蒂网