如何在chrome浏览器调试JS代码

在编写更复杂的代码前，让我们先来聊聊调试吧。

调试是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。

在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有足够多的功能，其他大部分浏览器的功能也与之类似。

资源（Sources）面板

• 在 Chrome 中打开示例页面。
• 使用快捷键 F12 打开开发者工具。
  选择 Sources（资源） 面板。

如果你是第一次这么做，那你应该会看到下面这个样子：

切换按钮 会打开文件列表的选项卡。

让我们在预览树中点击和选择 hello.js。这里应该会如下图所示：