在vs code中调试网页的核心是配置launch.json文件并使用浏览器调试协议。1. 安装debugger for chrome或edge插件；2. 创建或修改launch.json文件，选择chrome或edge作为调试环境；3. 配置url（如http://localhost:8080）和webroot（如${workspacefolder}）；4. 可选配置runtimeexecutable以手动指定浏览器路径；5. 设置断点并点击绿色箭头启动调试；6. 使用调试控制台、变量视图和单步执行功能提升调试效率；7. 对于vue/react项目，确保开发服务器已运行，并配合vue devtools或react developer tools进行组件调试，同时注意配置source map以便映射回原始代码。
在VS Code中调试网页，核心在于配置launch.json文件，并利用Chrome或Edge等浏览器的调试协议。这让你可以像调试后端代码一样，在前端代码中设置断点、单步执行，查看变量值，极大地提升开发效率。
解决方案
安装Debugger for Chrome/Edge插件：在VS Code扩展商店搜索并安装“Debugger for Chrome”或“Debugger for Edge”插件。选择哪个取决于你常用的浏览器。
创建或修改launch.json文件：在VS Code中，打开你的项目文件夹，点击“运行和调试”视图（侧边栏的虫子图标），然后点击“创建 launch.json 文件”。选择 “Chrome” 或 “Edge” 作为调试环境。这会在你的.vscode文件夹下生成一个launch.json文件。
配置launch.json文件：编辑launch.json文件，核心是配置url和webRoot。
url: 指定你要调试的网页的URL。例如，"url": "http://localhost:8080"。如果你的网页是通过本地服务器提供的，确保服务器已经启动。
webRoot: 指定你的项目根目录。通常是${workspaceFolder}，表示当前打开的文件夹。如果你的HTML文件不在根目录下，你需要指定正确的路径。
一个典型的launch.json配置可能如下所示：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ]}
或者，如果你想附加到一个已经运行的Chrome实例，可以修改request为attach，并指定port：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}" } ]}
要使用Attach模式，你需要在启动Chrome时添加--remote-debugging-port=9222参数。
设置断点并开始调试：在你的JavaScript代码中设置断点。点击“运行和调试”视图中的绿色箭头，开始调试。VS Code会自动启动或连接到Chrome，并在断点处暂停执行。
调试技巧：
使用控制台：在VS Code的“调试控制台”中，你可以执行JavaScript代码，查看变量的值，以及输出日志信息。观察变量：在“变量”视图中，你可以查看当前作用域内的变量的值。单步执行：使用“单步跳过”、“单步进入”、“单步跳出”等按钮，控制代码的执行流程。
Chrome调试器无法启动，提示找不到Chrome？
这通常是因为VS Code无法找到Chrome浏览器的可执行文件。解决方法如下：
检查Chrome安装路径：确认Chrome浏览器已经正确安装，并且你知道它的安装路径。
手动指定Chrome路径：在launch.json文件中，添加runtimeExecutable属性，并指定Chrome的可执行文件路径。例如：
白瓜面试
白瓜面试 – AI面试助手,辅助笔试面试神器
40 查看详情 
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "runtimeExecutable": "C:Program FilesGoogleChromeApplicationchrome.exe" // 替换为你的Chrome路径 } ]}
注意，你需要将C:Program FilesGoogleChromeApplicationchrome.exe替换为你实际的Chrome安装路径。在macOS上，路径可能类似于/Applications/Google Chrome.app/Contents/MacOS/Google Chrome。
环境变量：确保Chrome的安装目录已经添加到系统的环境变量PATH中。
sourceMap是什么？为什么需要配置？
Source Map是一种将编译后的JavaScript代码映射回原始源代码的技术。在开发过程中，我们通常会使用各种工具（例如Webpack、Babel、TypeScript）来编译、压缩和转换JavaScript代码。这些工具会将我们的源代码转换成浏览器可以执行的优化后的代码。
但是，在调试过程中，我们希望能够直接调试原始源代码，而不是编译后的代码。Source Map就是为了解决这个问题而生的。它提供了一种方式，让浏览器能够将编译后的代码中的错误信息、断点等映射回原始源代码中的位置。
配置Source Map通常需要在构建工具（例如Webpack）中启用Source Map生成选项。然后在launch.json文件中，确保webRoot配置正确，以便VS Code能够找到Source Map文件。
如果Source Map配置正确，当你在VS Code中调试时，你就可以直接在原始源代码中设置断点，查看变量的值，以及单步执行代码，而无需关心编译后的代码。
如何调试Vue或React项目？
调试Vue或React项目与调试普通的JavaScript项目类似，但有一些额外的注意事项：
确保项目已经启动：Vue和React项目通常使用npm start或类似的命令启动一个本地开发服务器。确保服务器已经启动，并且你的网页可以通过http://localhost:8080或类似的URL访问。
配置launch.json文件：与调试普通JavaScript项目一样，你需要配置launch.json文件。确保url指向你的本地开发服务器地址，并且webRoot指向你的项目根目录。
使用Vue Devtools或React Developer Tools：Vue Devtools和React Developer Tools是浏览器插件，可以帮助你调试Vue和React组件。它们可以让你查看组件的状态、props、以及组件之间的关系。
在组件中设置断点：在你的Vue或React组件的代码中设置断点。当代码执行到断点时，VS Code会自动暂停执行，让你查看变量的值，以及单步执行代码。
调试技巧：
使用控制台：在VS Code的“调试控制台”中，你可以执行JavaScript代码，查看变量的值，以及输出日志信息。观察组件状态：使用Vue Devtools或React Developer Tools，你可以查看组件的状态和props。单步执行：使用“单步跳过”、“单步进入”、“单步跳出”等按钮，控制代码的执行流程。
需要注意的是，由于Vue和React项目通常使用Webpack等工具进行编译和打包，因此你需要确保Source Map配置正确，以便能够直接调试原始源代码。
以上就是vscode怎么调试网页_vscode浏览器调试配置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/492629.html
微信扫一扫 
支付宝扫一扫 
