"什么是浏览器控制台,我为什么需要它,以及如何打开它?"
动机
一些测试需要打开控制台。网页控制台是您的浏览器提供的开发者工具之一。它显示了由网站开发者自己实现的错误处理信息,或者如果问题与JavaScript等有关,还显示了浏览器收集的信息。它将帮助客户 - 特别是开发者 - 确定问题的根本原因。在接下来的文章中,将逐步解释如何在不同的浏览器和操作系统中打开控制台。
请注意,系统设置的许多步骤只需执行一次,以后的每次使用都需要更少的步骤。
获取Windows和macOS上的浏览器控制台日志
Microsoft Edge,Chrome,Firefox,Opera,Brave
打开要测试的网站。
在键盘上按Ctrl + Shift + I(Windows)或alt + cmd + I(macOS)。
单击“Console”选项卡(如果“Console”选项卡尚未获取焦点)。
Safari
前提条件:
在您的macOS计算机上打开Safari浏览器。
打开“首选项...”菜单(按键盘上的cmd + ,,或打开菜单栏中的Safari --> “首选项...”)。
导航到“高级”选项卡。
选中“在菜单栏中显示‘开发’菜单”复选框。完成后,您应该能够在菜单栏中看到“开发”菜单。
在激活“开发”菜单后:
打开要测试的网站。
在键盘上按alt + cmd + C(macOS)。
单击“Console”选项卡(如果“Console”选项卡尚未获取焦点)。
在上述所有情况下,您应该看到“Console”已打开。如果由于某种原因“Console”没有启动,有一个快速的解决方法,您需要右键单击网站,然后在打开的菜单中单击“检查”或“检查元素”,并将选项卡焦点设置为“Console”。
如果要更改开发者工具叠加的位置,请单击叠加的右上角的“三个点”按钮。在那里,您可以在此处选择 Dock 端
获取Android上的浏览器控制台日志
Chrome
在移动设备本身上显示控制台是不可能的,但可以在连接的计算机上显示控制台。为此,需要启用Android设备上的开发者选项和USB调试。如果已完成此操作,可以跳过第2部分之前的步骤。
第1部分:为USB调试准备您的Android手机
打开“设置”应用。
查找“内部版本号”(通常位于“关于手机”部分的“软件信息”下)。
反复点击“内部版本号”,直到看到消息“您现在是开发人员”。
现在,您已经激活了开发者选项,请在“设置”中找到它们并打开。
如果开发者选项尚未激活,请通过点击切换按钮来激活它们。
找到“USB调试”选项,并通过点击切换按钮来启用它。
第2部分:将计算机上的Chrome与您的Android设备连接
在您的Android手机上,打开需要测试的网站。
在您的Windows或macOS计算机上打开Google Chrome。
在URL字段中输入chrome://inspect并导航到该页面。
确保启用“发现USB设备”复选框。
通过USB电缆将Android手机连接到计算机。
如果之前没有使用USB调试,在Android手机上,您应该看到一个提示“允许USB调试?”,点击“好的”。此外,您可以勾选“始终允许此台计算机”,然后点击“好的”,以确保您不会在尝试获取浏览器日志时反复询问。
现在,您应该能够在“远程目标”部分下看到您的设备。此外,您将在手机上的浏览器中看到已打开的选项卡。为了开始测试,您需要在要测试的选项卡下点击“检查”按钮,然后将打开一个新窗口,其中包含您的设备屏幕和DevTools(确保“Console”选项卡在DevTools中获取焦点)。
故障排除:如果设备未被检测到,请尝试以下修复措施:
将手机与USB电缆断开连接,然后重新连接。
尝试更改计算机上的USB端口。
尝试使用另一根USB电缆。
如果上述修复措施没有帮助,您可以在谷歌开发者论坛的帖子中找到故障排除建议。
在macOS上从iOS设备获取浏览器控制台日志
Safari
要从macOS上的iOS设备中的Safari获取浏览器控制台日志,您需要一台macOS计算机。为了从iOS设备的Safari中获取浏览器日志,您需要在macOS的Safari中激活“开发”菜单,并在iOS设备的Safari设置中激活“Web检查器”。如果已完成此操作,可以跳过第2部分之前的步骤。
第1部分:为在macOS和iOS设备上调试准备您的Safari浏览器
在macOS计算机上打开Safari浏览器。
打开“首选项...”菜单(按键盘上的cmd +,或打开菜单栏中的Safari --> “首选项...”)
导航到“高级”选项卡。
选中“在菜单栏中显示‘开发’菜单”复选框。完成后,您应该能够在菜单栏中看到“开发”菜单。
在iOS设备上打开“设置”。
找到并打开“Safari”应用。
滚动到底部,点击“高级”选项。
通过点击切换按钮来激活“Web检查器”。
第2部分:获取控制台日志
在iOS设备上打开Safari应用,并打开需要测试的网站。
通过USB电缆将iOS设备连接到macOS计算机。
2a. 如果设备上显示“信任此计算机?”的提示,请点击“信任”并输入设备密码(如果需要)。
在macOS上打开Safari应用。
在菜单栏中点击“开发”菜单。
将鼠标悬停在iOS设备名称上,并点击要测试的网站名称。
您现在应该能够看到“Web检查器”,然后可以开始测试(确保“Console”选项卡在“Web检查器”中获得焦点)。