开发人员控制台是一种嵌入式开发环境，具有一组仪器，您可以在浏览器中构建，调试和测试应用程序。它记录（或记录）与网页相关联的信息，例如网络请求，HTML，CSS，Javascript，警告和错误。如果他们解决了您对小部件的问题，则开发人员控制台中警告的屏幕截图对Elfsight支持团队非常有帮助。

　　只需单击几下即可在您使用的任何浏览器中打开控制台，您也可以使用快捷方式或热键进行启动。在下面的指南中，您将找到有关如何在所有最受欢迎的浏览器和过程屏幕截图中打开控制台的简短说明。

　　要在Google Chrome中打开开发面板，您需要单击浏览器窗口右上角的三点图标，单击更多工具，在下拉列表中可以找到开发人员工具。

　　另一种选择是使用Chrome Dev Tools Hotkey：F12（在Windows/Linux上）和选项 +⌘ + J（在MacOS上）。

　　您会在Chrome页面的底部或右侧看到控制台。选择控制台选项并开始检查您的代码性能。

　　此外，随着您已经学会了如何在Chrome中打开开发人员控制台，您将熟悉开发不同浏览器中开发人员工具的过程。

　　以下是开发人员工具中的主要控制台选项卡的简要概述。我们以Google Chrome Web浏览器为例，对所有内容进行了审查。

　　对于那些想要检查其网页的CSS和HTML性能的人来说，元素面板是一个很好的工具。您可以右键单击页面的任何元素，选择“检查元素”，然后查看代码中突出显示的元素属性。

　　Chrome Developer工具中的“控制台”选项卡在网页上显示脚本的工作。它是命令行的解释器，您可以用它来启动脚本引擎并输入命令执行脚本。如果我们的支持团队要求您屏幕截图，则需要在控制台选项卡中拍摄一张图片。

　　您可以利用Chrome DevTool中的“源”选项卡来编辑Javascript和CSS，查看文件，创建Javascript片段并进一步使用。另外，此选项卡可能有助于调试Javascript代码。

　　网络窗格可以用作测试工具，该工具检查了网页性能并识别网站放缓的问题。打开DevTools后，Chrome中的网络选项卡开始记录所有网络请求。您可以通过不同的属性对它们进行进一步排序。

　　性能窗格允许您随时间记录运行时和加载性能。该小组揭示了网站在访问者满载和使用后的表现效果。您可以选择记录性能或进行一系列过程的屏幕截图。

　　人们可以使用Chrome Memory选项卡来诊断和修复内存问题，例如腹胀，垃圾收集，泄漏。所有这些问题都会影响页面性能。如果这些问题无法解决，您的网站将对访问者变得缓慢而没有吸引力。

　　在“应用程序”选项卡的帮助下，您可以调试渐进式Web应用程序；检查和管理存储，数据库和缓存；检查并删除饼干；并检查资源。

　　如果您想调试混合内容问题和证书问题，则“安全”选项卡可能会很有用。据信，当您通过HTTP要求您访问的URL时，该网站是不安全的。根据现代网络要求，应通过HTTPS协议完成。如果您看到该页面包含混合内容，则意味着它们受到部分保护，并且容易受到嗅探者的影响。

　　Lighthouse是提高Web应用程序质量的自动化工具。它直接集成到Chrome Devtools中。它提供性能审核，可访问性，渐进式网络应用程序，SEO等。

　　有时在Elsfight小部件的工作中出现了问题。如果您在控制台中看到任何红色警告或错误，请不要害怕。如果您知道它们发生的原因，则可以自己修复所有问题。在下面，您会发现可能在控制台中看到的常见失败列表。

　　这是我们所有小部件的两个错误：

　　窗口小部件被阻止 - 如果将错误引用到apps.elfsight.com，则您已在Elfsight帐户中阻止了网站域。

　　找不到小部件 - 您可能意外地删除了帐户中的小部件。检查一下。

　　看，没什么大不了的。现在，我们将讨论特定小部件和集成的工作中的一些错误。

　　作为一名经验丰富的网络开发人员，您可能比您希望看到的更多。当您阅读属性或调用未定义对象上的方法时，可以在Chrome中看到它们。您可以测试尝试在Chrome和Safari开发人员控制台中捕获这些特定错误。

　　如果您不是专业程序员，则可以省略此指南。

　　开发人员控制台是一种很棒的工具，可允许每个程序员访问有关其网站的大量数据。开放并开始使用此工具并不难，但是要耐心等待，需要花费一些时间和精力。

　　您遇到了哪些错误？在下面的评论中分享您的经验，我们很乐意与您讨论！

　　另外，请记住，例如，我们还有其他很棒的指南，例如，您可以在网站上找出如何嵌入Google业务评论！