在网页开发中，JavaScript 调试是确保代码质量和功能正常的关键步骤。谷歌浏览器（Chrome）内置的强大调试工具可以帮助开发者快速定位和修复问题。以下是谷歌浏览器中一些实用的 JavaScript 调试方法，让你的开发工作更加高效。
1. 使用开发者工具
首先，确保你的谷歌浏览器已经安装了开发者工具。在页面空白处右击，选择“检查”或按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac），即可打开开发者工具。
2. 控制台（Console）
2.1 打印调试信息
使用 console.log() 方法可以输出调试信息。在控制台中，你可以直接输入这段代码，并按下回车键查看输出结果。
console.log("这是调试信息");
2.2 监控变量
使用 console.log() 也可以监控变量值的变化。例如：
let a = 10;
console.log(a); // 输出：10
a = 20;
console.log(a); // 输出：20
2.3 使用断言
使用 console.assert() 方法可以检查某个条件是否为真。如果条件为假，将在控制台输出错误信息。
console.assert(1 === 1, "1不等于1");
3. 脚本面板（Sources）
3.1 暂停执行
在脚本面板中，你可以通过设置断点来暂停代码执行。这有助于你观察变量值和函数调用。
- 选中要设置断点的行。
- 点击左侧行号旁边的空白区域，出现红色圆点即为断点。
3.2 查看调用栈
在暂停执行后，点击“调用栈”标签页，你可以查看当前的调用栈。这有助于分析代码执行过程。
3.3 监视变量
在脚本面板中，你可以监视特定变量。这有助于观察变量值的变化。
- 在“监视”标签页中输入变量名。
- 当代码执行到断点时，你可以在监视窗口中查看变量的实时值。
3.4 修改变量值
在脚本面板中，你可以修改变量值，观察代码执行结果的变化。
- 在监视窗口中找到要修改的变量。
- 输入新的值并按回车键。
4. 逐行执行
在脚本面板中，你可以逐行执行代码，观察每一步的执行结果。
- 点击左侧的行号旁边的箭头按钮。
- 每执行一行代码，箭头按钮都会向下移动。
5. 其他实用技巧
5.1 调整网络请求
在开发者工具的网络面板中，你可以调整网络请求，例如设置超时时间、重定向次数等。
5.2 模拟设备
在开发者工具的设备模拟面板中，你可以模拟不同的设备，例如手机、平板电脑等。
5.3 调整CSS样式
在开发者工具的元素面板中，你可以调整页面的CSS样式，快速查看样式变化。
通过以上这些实用的方法，相信你已经在谷歌浏览器中掌握了JavaScript调试的技巧。这些技巧将帮助你更好地进行网页开发，提高代码质量。