安慰GoogleChrome 开发工具控制台

rumi

Google Chrome 开发者工具 – 控制台TLTR：从控制台查看消息并运行 JavaScript。使用控制台，您可以读取消息并执行 Javascript。这些消息可以是脚本错误、警告或开发人员留下的简单消息。Web 开发人员记录消息主要有 3 个原因：调试确保代码以正确的顺序运行。检查给定时间点的变量值。

也尝试一下，要显示消息，请在控制台中输入命令console.log（'Hello！'） ，然 电话号码列表 后按 Enter 键。在大型站点上，控制台很快就会被不相关的消息淹没。使用控制台的左侧边栏可以减少噪音并专注于对您重要的消息。

在您正在阅读的博客中，我使用 console.log 来监控 PWA Service Worker 活动，您可以打开控制台并检查。控制台也是一个REPL（读取-评估-打印循环）。您可以在控制台中运行 JavaScript 来与您正在检查的页面进行交互。例如，使用document.queryselector和textcontent函数，您可以从控制台更改页面标题。来源Google Chrome 开发工具 - 来源Google Chrome 开发者工具 – 来源TLTR：调试 JavaScript，即使在重新加载页面后也保留在 DevTools 中所做的更改，保存并运行 JavaScript 片段，以及将 DevTools 中所做的更改导出到文件。源面板用户界面由 3 部分组成：左侧的文件导航器窗格。此处列出了页面所需的每个文件。



代码编辑器窗格位于中心。在文件导航器窗格中选择文件后，该文件的内容将显示在此处。JavaScript 调试窗格。用于检查页面 JavaScript 的各种工具。如果 DevTools 窗口很大，此窗格将显示在代码编辑器窗格的右侧。借助 Sources，开发人员可以通过断点等多种特定功能来调试他们的脚本。断点在您定义的精确时刻停止执行脚本，例如单击某个元素。在某些情况下，断点比 console.log 更有效，因为您不必修改代码并使用您想要查看的变量自定义每个 console.log 命令。通过在左栏中选择脚本，您可以在下一个框中查看代码，对其进行编辑并使用名称保存新版本。网络Google Chrome 开发工具 - 网络Google Chrome 开发者工具 – 网络TLTR：查看和调试网络活动。网络面板用于确保渲染 HTML 页面所需的资源按预期下载。最常见的用例是：确保资源已实际下载。检查单个资源的属性，例如HTTP 标头、使用的协议、内容类型、大小等。