一、引言

1、为什么要用开发者工具

  • 为了发现错误并获得一些与脚本相关且有用的信息

二、Google Chrome

1.怎么打开开发者控制台？

  • 按下 F12 键，如果你使用 Mac，试试 Cmd+Opt+J。

image.png

2.输入调试

2.1 通常，当我们向控制台输入一行代码后，按 Enter，这行代码就会立即执行。

2.2 如果想要插入多行代码，请按 Shift+Enter 来进行换行。这样就可以输入长片段的 JavaScript 代码了。

三、Firefox、Edge和其它浏览器

四、Safari

1.Safari（Mac 系统中的浏览器，Windows 和 Linux 系统不支持）有一点点不同。我们需要先开启“开发菜单”。

  • 打开“偏好设置”，选择“高级”选项。选中最下方的那个选择框：

safari.png

现在，我们通过 Cmd+Opt+C 就能打开或关闭控制台了。另外注意，有一个名字为“开发”的顶部菜单出现了。它有很多命令和选项。

五、总结

1、开发者工具允许我们查看错误、执行命令、检查变量等。

2、在 Windows 系统中，可以通过 F12 开启开发者工具。Mac 系统下，Chrome 需要使用 Cmd+Opt+J，Safari 使用 Cmd+Opt+C（需要提前开启）。