环世界开发者模式翻译 环世界控制台中文对照

现在你已选择了Chrome浏览器作为你的开发及调试工具，接下来，让我们打开开发者面板，开始代码调试之旅。

通常你可以轻松地打开“控制台”来查看程序的输出，或者使用“元素”面板来查看DOM元素的CSS代码。

你真的了解Chrome开发者工具的强大功能吗？它不仅提供基础功能，还隐藏了许多能极大提高开发效率的强大工具。

在此，我将为你介绍几个Chrome开发者工具中最实用的功能。

让我们了解下Chrome的命令菜单。对于Chrome来说，命令菜单就像Linux中的Shell一样，你可以通过键盘输入相应命令来操作Chrome。

要打开命令菜单，可以使用以下快捷键：

• Windows用户：Ctrl + Shift + P
• MacOS用户：Cmd + Shift + P

你也可以按照下图所示步骤打开它。

“命令”面板打开后，你可以输入命令执行各种功能。

例如，捕获屏幕内容是常见需求。虽然你的计算机可能有方便的截图工具，但Chrome也提供了相关命令来帮助你完成特殊任务。

• 要截取整个页面的屏幕快照，包括可视窗未显示的部分，可以使用“Screenshot Capture full size screenshot”命令。
• 若要精确捕获某个DOM元素的内容，则可使用“Screenshot Capture node screenshot”命令。

举个例子，现在我们可以打开任意网页，比如Medium上的JavaScript热门文章页面（/tag/javascript），然后在“命令”菜单中执行“Screenshot Capture full size screenshot”命令，即可获得当前页面的完整屏幕截图。

在调试代码时，我们经常需要在控制台中逐步执行代码、查看变量值等。Chrome开发者工具提供了$_魔术变量，它始终引用控制台中上一次操作的结果，让你更优雅地调试代码。

XHR（XMLHttpRequest）是创建AJAX请求的JavaScript API。在前端项目中，我们常常需要使用XHR向后端发送请求获取数据。在“网络”面板中，我们可以直接调试XHR请求。

关于页面资源加载行为的监控，Chrome开发者工具的“网络”面板提供了Capture Screenshots功能，可以帮助我们捕获页面加载时的屏幕截图，并显示每个屏幕截图的网络请求状态。

对于JavaScript变量的值，除了手动复制外，Chrome还提供了一个copy函数，允许你将变量的值复制到剪贴板中。

在处理网页图像时，除了通过外部资源链接加载它们外，还可以将图像编码为Data URI。Chrome开发者工具提供了将图像转换为Data URL的功能，这可以减少页面发出的HTTP请求数量，加快页面加载速度。

Chrome的开发者工具还提供了表格展示功能、拖放调整DOM元素位置、快速隐藏元素等实用功能。

为了方便在控制台中快速获取DOM元素引用，你可以选择元素、右键点击鼠标并存储为全局变量。

以上就是Chrome开发者工具的高级用法介绍，希望能助你在开发过程中一臂之力。

/javascript-in-plain-english/how-to-use-chrome-devtools-like-a-senior-frontend-developer-