所有收藏
教育材料
浏览器控制台
浏览器控制台

展示附件中不同浏览器和操作系统上的浏览器控制台

Andrew Radchanka avatar
作者:Andrew Radchanka
一周前更新

"什么是浏览器控制台,我为什么需要它,以及如何打开它?"

动机

一些测试需要打开控制台。网页控制台是您的浏览器提供的开发者工具之一。它显示了由网站开发者自己实现的错误处理信息,或者如果问题与JavaScript等有关,还显示了浏览器收集的信息。它将帮助客户 - 特别是开发者 - 确定问题的根本原因。在接下来的文章中,将逐步解释如何在不同的浏览器和操作系统中打开控制台。

请注意,系统设置的许多步骤只需执行一次,以后的每次使用都需要更少的步骤。

获取Windows和macOS上的浏览器控制台日志

Microsoft Edge,Chrome,Firefox,Opera,Brave

  1. 打开要测试的网站。

  2. 在键盘上按Ctrl + Shift + I(Windows)或alt + cmd + I(macOS)。

  3. 单击“Console”选项卡(如果“Console”选项卡尚未获取焦点)。

Safari

前提条件:

  1. 在您的macOS计算机上打开Safari浏览器。

  2. 打开“首选项...”菜单(按键盘上的cmd + ,,或打开菜单栏中的Safari --> “首选项...”)。

  3. 导航到“高级”选项卡。

  4. 选中“在菜单栏中显示‘开发’菜单”复选框。完成后,您应该能够在菜单栏中看到“开发”菜单。

在激活“开发”菜单后:

  1. 打开要测试的网站。

  2. 在键盘上按alt + cmd + C(macOS)。

  3. 单击“Console”选项卡(如果“Console”选项卡尚未获取焦点)。

在上述所有情况下,您应该看到“Console”已打开。如果由于某种原因“Console”没有启动,有一个快速的解决方法,您需要右键单击网站,然后在打开的菜单中单击“检查”“检查元素”,并将选项卡焦点设置为“Console”。

如果要更改开发者工具叠加的位置,请单击叠加的右上角的“三个点”按钮。在那里,您可以在此处选择 Dock 端

获取Android上的浏览器控制台日志

Chrome

在移动设备本身上显示控制台是不可能的,但可以在连接的计算机上显示控制台。为此,需要启用Android设备上的开发者选项和USB调试。如果已完成此操作,可以跳过第2部分之前的步骤。

第1部分:为USB调试准备您的Android手机

  1. 打开“设置”应用。

  2. 查找“内部版本号”(通常位于“关于手机”部分的“软件信息”下)。

  3. 反复点击“内部版本号”,直到看到消息“您现在是开发人员”

  4. 现在,您已经激活了开发者选项,请在“设置”中找到它们并打开。

  5. 如果开发者选项尚未激活,请通过点击切换按钮来激活它们。

  6. 找到“USB调试”选项,并通过点击切换按钮来启用它。

第2部分:将计算机上的Chrome与您的Android设备连接

  1. 在您的Android手机上,打开需要测试的网站。

  2. 在您的Windows或macOS计算机上打开Google Chrome。

  3. 在URL字段中输入chrome://inspect并导航到该页面。

  4. 确保启用“发现USB设备”复选框。

  5. 通过USB电缆将Android手机连接到计算机。

  6. 如果之前没有使用USB调试,在Android手机上,您应该看到一个提示“允许USB调试?”,点击“好的”。此外,您可以勾选“始终允许此台计算机”,然后点击“好的”,以确保您不会在尝试获取浏览器日志时反复询问。

  7. 现在,您应该能够在“远程目标”部分下看到您的设备。此外,您将在手机上的浏览器中看到已打开的选项卡。为了开始测试,您需要在要测试的选项卡下点击“检查”按钮,然后将打开一个新窗口,其中包含您的设备屏幕和DevTools(确保“Console”选项卡在DevTools中获取焦点)。

故障排除:如果设备未被检测到,请尝试以下修复措施:

  1. 将手机与USB电缆断开连接,然后重新连接。

  2. 尝试更改计算机上的USB端口。

  3. 尝试使用另一根USB电缆。

  4. 如果上述修复措施没有帮助,您可以在谷歌开发者论坛的帖子中找到故障排除建议。

在macOS上从iOS设备获取浏览器控制台日志

Safari

要从macOS上的iOS设备中的Safari获取浏览器控制台日志,您需要一台macOS计算机。为了从iOS设备的Safari中获取浏览器日志,您需要在macOS的Safari中激活“开发”菜单,并在iOS设备的Safari设置中激活“Web检查器”。如果已完成此操作,可以跳过第2部分之前的步骤。

第1部分:为在macOS和iOS设备上调试准备您的Safari浏览器

  1. 在macOS计算机上打开Safari浏览器。

  2. 打开“首选项...”菜单(按键盘上的cmd +,或打开菜单栏中的Safari --> “首选项...”

  3. 导航到“高级”选项卡。

  4. 选中“在菜单栏中显示‘开发’菜单”复选框。完成后,您应该能够在菜单栏中看到“开发”菜单。

  5. 在iOS设备上打开“设置”

  6. 找到并打开“Safari”应用。

  7. 滚动到底部,点击“高级”选项。

  8. 通过点击切换按钮来激活“Web检查器”

第2部分:获取控制台日志

  1. 在iOS设备上打开Safari应用,并打开需要测试的网站。

  2. 通过USB电缆将iOS设备连接到macOS计算机。

    2a. 如果设备上显示“信任此计算机?”的提示,请点击“信任”并输入设备密码(如果需要)。

  3. 在macOS上打开Safari应用。

  4. 在菜单栏中点击“开发”菜单。

  5. 将鼠标悬停在iOS设备名称上,并点击要测试的网站名称。

  6. 您现在应该能够看到“Web检查器”,然后可以开始测试(确保“Console”选项卡在“Web检查器”中获得焦点)。

这是否解答了您的问题?