一分钟教你学会浏览器调试工具debugger

当使用谷歌浏览器或者vscode进行前端调试时，可以使用以下方法进行详细调试：

1. 谷歌浏览器：
   打开谷歌浏览器，并在地址栏中输入要调试的页面的 URL 地址。
   按下 Ctrl + Shift + I（Windows/Linux）或 Command + Option + I（Mac）打开 Chrome 开发者工具。或者，右键点击页面上的任何元素，并选择 “检查”。

在开发者工具中，可以在不同的面板中进行调试：
“Elements” 面板：查看和修改页面的 DOM 结构和样式。
“Console” 面板：查看和执行 JavaScript 代码，并输出日志信息。
“Sources” 面板：查看和编辑页面的源代码，设置断点进行调试。
“Network” 面板：监视和分析网络请求和响应。
在 “Sources” 面板中，可以选择要调试的文件，并在代码行上设置断点。然后，可以使用调试工具栏中的按钮（如 “继续”、“单步执行”、“跳过”）来逐行执行代码，并观察变量的值和调试信息。

2. Visual Studio Code（VS Code）：
   在你的代码中添加 debugger 语句：在你想要设置断点的位置，如组件的某个方法或函数中，添加 debugger 关键字。例如：

function handleClick() {
  debugger; // 在这里设置断点

  // 其他代码逻辑
}
1
2
3
4
5

启动开发服务器：在你的 React 项目根目录中，使用命令行运行 npm start 或类似的命令来启动开发服务器。这将启动你的 React 应用并在开发模式下运行。

在浏览器中打开项目：打开你的浏览器，访问你的 React 项目运行的 URL。通常情况下，可以通过 http://localhost:3000 进行访问，但具体的 URL 取决于你的项目配置。

打开开发者工具：在打开的浏览器窗口中，按下快捷键 Ctrl + Shift + I，或者右键点击页面并选择 “检查”，以打开浏览器的开发者工具。

调试代码：在开发者工具的 “Sources” 或 “调试” 面板中，找到你的源代码文件（通常在 “localhost” 或 “webpack” 目录下），然后找到你添加了 debugger 的代码行。

触发断点：在浏览器中执行触发该断点的操作。当代码执行到 debugger 语句时，浏览器会自动暂停执行，并在代码行旁边显示一个黄色的箭头，表示断点已触发。

查看变量和调试信息：在开发者工具的 “Sources” 或 “调试” 面板中，你可以查看和检查代码中的变量值、调用栈和其他调试信息。你可以逐行执行代码、查看变量的值或使用控制台来执行额外的调试操作。

退出调试模式：在开发者工具中，点击调试工具栏中的 “停止调试” 按钮，或者关闭开发者工具窗口，以退出调试模式。

通过在 React 项目中添加 debugger 语句，并在浏览器的开发者工具中触发断点，你就可以在 React 代码中进行调试了。记得在调试完成后，将 debugger 语句删除或注释掉，以确保代码的正常运行。