如何检查Chrome中的Web检查器？

Question

根据Google的说法，您可以通过访问Chrome中的“chrome-devtools：//devtools/devtools.html”来完成，但现在访问稳定版Chrome（或Canary）中的该页面，只显示99％被剥离检查员的版本。

重申我的“头衔”，这是指“检查”检查员。不只是检查正常的网页。

虽然我认为没有必要知道解决这个问题，但我正在检查检查员，所以我可以像Paul Irish所讨论的那样设计它，并在这里：http://darcyclarke.me/design/skin-your-chrome-inspector/

Answer 1

按照这些简单的步骤进行操作！

1. 按命令 + 选项 + i （ Ctrl + Shift + < kbd> i 在Windows上）打开DevTools。

2. 确保将开发人员工具移除到新窗口中。您可能需要从菜单中取消停靠：

3. 在这个新窗口中按命令 + 选项 + i 。

4. 这将打开DevTools上的DevTools。
   • 如果需要，您可以重新设置页面的DevTools。
5. 如果还没有，请选择元素 - 这是检查员顶部的第一个图标。

---

通过了解Chrome Developer Tools: Remote Debugging的工作原理，可以找到一些超出问题范围但仍然有效理解您遇到问题的原因。

Answer 2

1. 打开chrome：// inspect
2. 在该页面上打开检查器（cmd + alt + i）
3. 滚动到页面底部的Other部分下，点击检查链接

Other部分中的网址应如下所示： chrome-devtools：//devtools/devtools.html？docked = true＆amp; dockSide = bottom＆amp; toolbarColor = rgba（230,230,230,1 ......

编辑：他们已经想象了Chrome：检查页面，所以你必须点击左边的其他标题才能让它立即生效。

Answer 3

我刚开始工作了。关键是你必须在“远程调试”模式下启动chrome。

在OSX上

，打开一个终端窗口并执行以下命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

在Windows上，它的

chrome.exe --remote-debugging-port=9222

（可在此处找到更好的Windows说明：https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote）

这将启动一个chrome实例，它将调试消息发送到端口9222上的本地Web服务器。

如果您访问该Web服务，它将使您能够使用检查器检查正在运行的任何Chrome窗口。由于我们要检查检查员，我们需要先启动检查器窗口（如上所示使用快捷键;对于Mac，它是Command +选项+ i。）

现在，继续导航到

http://localhost:9222

它将显示一个要在调试器中显示的窗口列表。选择以“开发人员工具”开头的窗口，您将能够检查检查员的CSS。

在下面的图片中很难看到，但在左边我的chrome窗口指向远程调试器，突出显示其中一个工具栏标签。在右侧，您会看到它被工具提示点亮，就像我们正在调试网页一样。

Answer 4

几个星期前，有人在stackoverflow的“javscript”聊天室中指出了这一点。首先，非常重要的是，确保检查员与您的浏览器窗口取消对接。然后只需打开检查器窗口然后检查该窗口即可。在Windows中它是 Ctrl Shift 我（编辑：我说， Ctrl Shift < kbd>我但是这会启动控制台检查控制台......你应该可以来回导航。）键盘快捷键。 （其他键盘组合可用于其他选项和操作系统here和here。）只需执行两次即可。

编辑：好吧，你可能会对窗口移开感到困惑。如果它已停靠，您可以点击这个..

编辑II：我不太清楚为什么你不能检查。 JDavis的答案与Apple Docs for Apple计算机一致。如果您使用的是Linux，它似乎与Windows相同。当焦点在检查器窗口上时，您应该点击检查器组合键。