在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的可执行文件路径。例如：
凡诺企业网站管理系统商业版 1.5 试用版下载系统优势： 全DIV+CSS模板，多浏览器适应，完美兼容IE6-IE8，以及Firefox Opera 等符合标准的浏览器，模板样式集中在一个CSS文件中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。 调试环境必须为IIS 后台账户密码：admin功能介绍：基本信息设置：网站名称，联系人等信息
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" // 替换为你的Chrome路径 } ] }注意，你需要将
C:\\Program Files\\Google\\Chrome\\Application\\chrome.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配置正确，以便能够直接调试原始源代码。
