您如何在Chrome中检查网络检查器?


74

根据Google的说法,这可以通过在Chrome中访问“ chrome-devtools://devtools/devtools.html”来完成,但是现在在稳定版的Chrome(或Canary)中访问该页面,只是显示了99%的剥离检查器版本。

要重申我的“职务”,是指“检查”检查员。不只是检查正常的网页。

虽然我认为没有必要知道解决问题的方法,但我正在检查检查员,以便可以按照Paul Irish和下面的讨论进行样式设置:https : //darcyclarke.me/articles/development/skin-your -chrome-inspector /


在Google I / O 2012的一个名为Chrome Developer Tools Evolution的会议中,有很多内容。
Whymarrh 2012年

太好了,如果您从那里知道答案,请发布。chrome-devtools://devtools/devtools.html用于显示按钮和所有内容,但截至今年某个时候,它还没有显示。
cchiera 2012年


该文章仅引用了我已经发表的文章,尽管没有添加任何有关为何它在最新的稳定版Chrome中不再起作用的附加信息。
cchiera 2012年

@cchiera图片链接已损坏
Matt

Answers:


94

请遵循以下简单步骤!

  1. Command+ Option+ i(在Windows上为Ctrl+ Shift+ i)打开DevTools。

  2. 确保开发人员工具已停靠在新窗口中。您可能需要退出菜单:从菜单取消停靠

  3. 在这个新窗口上再次Command+ Option+ 。i

  4. 这将在DevTools上打开DevTools。

  • 您可以根据需要重新放置页面的DevTools。
  1. 如果还没有,请选择Elements-它是检查器顶部的第一个图标。

通过了解Chrome Developer Tools:Remote Debugging的工作原理,可以发现问题范围之外,但仍然可以有效地理解为什么会遇到问题。


那只是调出控制台,似乎与“检查”实际的Google Chrome检查器没有任何关系,因此我无法在此处进行样式设置:darcyclarke.me/design/skin-your-chrome-inspector
cchiera 2012年

1
我不确定为什么我为此而感到沮丧-这是快速简单的答案,它解决了他的问题并被接受为答案。话虽这么说,这里还有更好的答案,尤其是@Mixologic甚至Helder Roem
JDavis

我在使用Windows机器时发现了该解决方案。我倾向于用来[F12]打开检查器控制台。如果我还不知道另一个热键([Ctrl]+[Shift]+[I]),则此答案对我没有用。我将Windows热键添加到您的答案中。
马丁

1
您可能需要单击并按住检查器左下方的图标,才能从浏览器中将其取消固定。
creativecoder

1
对于那些无法打开第二个检查器的提示;我有一个正在运行的应用程序捕获了该Ctrl + Shift + I组合,因此直到我关闭第二个检查器(在开发工具中没有上下文菜单才能打开另一个检查器)。
mestrini '16

16
  1. 打开chrome:// inspect
  2. 打开该页面上的检查器(cmd + alt + i)
  3. 滚动到页面底部,在该Other部分下单击检查链接

Other部分中的网址应如下所示:chrome-devtools://devtools/devtools.html?docked = true&dockSide = bottom&toolbarColor = rgba(230,230,230,1…

编辑:他们幻想chrome:inspect页面,因此您必须单击左侧的Other标头才能使其立即工作。


这使我可以检查检查员。我在特定页面上打开了检查器,然后向下导航到底部chrome://inspect并能够检查该检查器。感谢您的回答,@ Helder!非常有帮助的答案。
2013年

1
可能是最好,最简单的方法,并且“可能不会随时间变化”答案!
2013年

1
这绝对是“正确”的方式。此外,Chrome浏览器检查页面还允许您检查许多其他内容,包括应用程序和扩展程序!
Dan Bechard

4

我刚刚得到这个工作。关键是您必须在“远程调试”模式下启动chrome。

在OSX上,打开终端窗口并执行以下操作:

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

在窗户上,

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

(可以在以下网址找到更好的Windows说明:https : //developers.google.com/chrome-developer-tools/docs/remote-debugging#remote

这将启动chrome实例,该实例会将调试消息发送到端口9222上的本地网络服务器。

如果您访问该Web服务,它将使您能够使用检查器检查任何正在运行的Chrome窗口。由于我们要检查检查器,因此需要首先启动检查器窗口(如上所述,使用快捷键;对于Mac,是Command + option + i。)

现在,继续浏览

http://localhost:9222

它将为您提供要在调试器中显示的窗口列表。选择以“ Developer Tools”开头的窗口,您将可以检查CSS的检查器。

在下图中很难看到它,但是在左侧,我的chrome窗口指向远程调试器,突出显示了工具栏标签之一。在右侧,您会看到它像工具提示一样亮起,就像我们在调试网页一样。

检查检查员


哇,你怎么知道的--remote-debugging-port
Pacerier

3

几周前,有人在stackoverflow的“ javscript”聊天室中指出了这一点。首先,也是非常重要的一点,请确保检查器已从您的浏览器窗口中移除。然后,只需打开检查器窗口,然后检查该窗口即可。在Windows中,键盘快捷键是CtrlShiftI(编辑:我说过,CtrlShiftI但是调出控制台来检查控制台...您应该能够来回导航。)(这里这里的其他选项和OS的其他键盘组合。)只需重复两次,就可以了。

编辑:好的,您可能对取消停靠窗口感到困惑。这是停靠时要单击的内容。在此处输入图片说明

编辑II:我不太确定为什么您不能检查。JDavis的答案与Apple计算机的Google文档一致。如果您使用的是Linux,则它似乎与Windows相同。您应该在焦点位于检查器窗口上方时按检查器组合键。


不,无论是否对接,我仍然无法检查所有检查器:屏幕快照:cl.ly/JFzc。根据一些较旧的YouTube视频和屏幕截图,不会显示任何检查器按钮或它所使用的任何内容。
cchiera 2012年

我也刚刚注意到...我已经可以使用上下文菜单对其进行检查,但是现在看不到该选项。但是我仍然可以使用键盘快捷键来达到目的。
JayC 2012年

我对如何取消检查员没有任何困惑。您是否在评论中看到了我的屏幕截图,表明该屏幕截图未固定?问题仍然是一样的。它应该像这样工作:youtube.com/watch?
v=J7F7eYjp_hg

我看过您的屏幕截图,并简要查看了参考视频。我必须指出该视频是在2010年12月上传的。我没有看到检查器中视频中显示的检查元素按钮。
JayC 2012年

(实际上,我相信这只是您应该采取的措施……但就像我说的那样,它没有显示在上下文菜单中,因此……看来您只能使用键盘快捷键来进行操作。)
JayC 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.