本互动教程介绍了如何在 Chrome 开发者工具控制台中运行 JavaScript。如需了解如何将消息记录到控制台,请参阅日志记录消息使用入门。请参阅 JavaScript 调试使用入门,了解如何暂停 JavaScript 代码并以一次一行地单步调试。
图 1. 控制台。
概览
控制台是一个 REPL,代表读取、评估、输出和循环。它会读取您向其输入的 JavaScript,评估您的代码,输出表达式的结果,然后返回到第一步。
设置开发者工具
本教程旨在让您打开演示并自行尝试所有工作流。当您实际跟随操作时,以后更有可能记住工作流。
按 Command+Option+J (Mac) 或 Ctrl+Shift+J(Windows、Linux、ChromeOS)打开控制台,就在此页面上。
图 2. 左侧是本教程,右侧是开发者工具。
查看和更改网页的 JavaScript 或 DOM
构建或调试网页时,在“控制台”中运行语句通常有助于更改网页的外观或运行方式。
请注意下方按钮中的文本。
在控制台中输入
document.getElementById('hello').textContent = 'Hello, Console!'
,然后按 Enter 键对表达式求值。请注意按钮内的文本是如何变化的。图 3. 在对上述表达式求值后控制台的外观。
在您评估的代码下方,您会看到
"Hello, Console!"
。回想一下 REPL 的 4 个步骤:读取、评估、输出和循环。对代码求值后,REPL 会输出表达式的结果。因此,"Hello, Console!"
必须是document.getElementById('hello').textContent = 'Hello, Console!'
的评估结果。
运行与网页无关的任意 JavaScript
有时,您只是想要一个代码园地,在其中测试一些代码,或者试用您不熟悉的新 JavaScript 功能。控制台是开展此类实验的理想平台。
- 在控制台中输入
5 + 15
。结果20
将显示在表达式下方(除非您表达式的求值时间过长)。 - 按
Enter
可对表达式求值。控制台会在您的代码下方输出表达式的结果。下面的图 4 显示了评估此表达式后您的控制台应呈现的外观。 在控制台中输入以下代码。请尝试逐字符输入,而不是复制粘贴。
function add(a, b=20) { return a + b; }
如果您不熟悉
b=20
语法,请参阅为函数参数定义默认值。现在,调用您刚才定义的函数。
add(25);
图 4. 对上述表达式求值后控制台的外观。
add(25)
的求值结果为45
,因为在没有第二个参数的情况下调用add
函数时,b
默认为20
。
在您的函数返回之前,您将无法在此控制台会话中运行任何代码。如果用时过长,您可以使用任务管理器取消耗时的计算;不过,这也会导致当前页面失败,您输入的所有数据都将丢失。
后续步骤
如需了解与在控制台中运行 JavaScript 相关的更多功能,请参阅运行 JavaScript。
借助开发者工具,您可以暂停执行过程中的脚本。暂停期间,您可以使用控制台及时查看和更改页面的 window
或 DOM
。这构成了一个强大的调试工作流。如需查看互动式教程,请参阅 JavaScript 调试入门。
控制台还支持一组格式说明符。请参阅在控制台中为消息设置格式和样式,了解为控制台消息设置格式和样式的所有方法。
除此之外,控制台还有一组便捷功能,可让您更轻松地与网页互动。 例如:
- 您无需输入
document.querySelector()
即可选择元素,只需输入$()
即可。此语法的灵感来源于 jQuery,但实际上它并不是 jQuery。它只是document.querySelector()
的别名。 debug(function)
实际上会在该函数的第一行设置一个断点。keys(object)
会返回一个包含指定对象的键的数组。
如需了解所有便捷函数,请参阅 Console 实用程序 API 参考文档。