什么是与Firebug等效的Google Chrome？

29

我正在寻找一种可以做到的工具：

检查HTML元素
管理/调试JavaScript
个人资料表现
实时修改元素

— 埃文·普莱斯
source

32

它是内置的。[论文]->开发人员->开发人员工具（在Chrome v5及更低版本中）。由于在该版本中“页面”按钮似乎消失了，因此在v6中可能有所不同。

— 马克·哈顿
source

3

Google工具有一些缺点-查看ajax请求不是那么容易，没有多行模式很方便，您无法在窗口中编辑HTML，它不会在HTML树中显示悬停时的填充/边距，您根本无法浏览实际的DOM（仅是HTML树），最后但并非最不重要的一点是，我发现CSS编辑功能更笨拙-Google不会自动完成。它仍然非常有用，但是Firebug更好。

— cgp

2

或shift-ctrl-I表示懒惰：)

— Tim Post

1

@Mark注意，我正在使用5.0.375.99。我不确定现在或将来是否会有所作为。

— Evan Plaice

1

在v6中，这是扳手->工具->开发人员工具

— enobrev 2010年

17

右键单击->检查元素

— 霍利维尔
source

13

适用于Google Chrome浏览器的Firebug Lite。

— 埃米特
source

FireBug Lite是一个很棒的工具，还可以在IE，Opera，Safari和Firefox中运行：getfirebug.com/firebuglite

— Nat Ryall 2010年

5

提出原始问题已经有4年了。Chrome（稳定版）现在的版本为38。很长一段时间以来，它包含了一套完整的开发人员工具，这些工具大致相当于Firefox的Firebug（尽管Firefox甚至也具有内置的检查器）。

Chrome开发人员工具可以帮助您完成以下几件事：

检查DOM
检查CSS
访问JavaScript控制台
调试JavaScript
查看网络请求，时间和响应
查看渲染，JavaScript和CSS性能
检查本地存储和cookie

可以通过多种方式访问开发工具。

Chrome菜单 -> 工具 -> 开发人员工具
Ctrl+ Shift+ I在Windows或Cmd+ Shift+ I在Mac上
F12 在Windows上
右键单击页面上的任意位置，然后选择检查元素

3

浏览器内的工具非常有用，通常是您最好的首选，但是有时它们在HTTP请求/响应有效负载方面没有提供足够的技术细节，或者过于特定于页面。

在这些情况下，您可能会发现像Fiddler之类的专用HTTP检查工具或Linux替代品之一将提供更多的见解。

如果您真的需要裸机，Wireshark不仅可以使用HTTP进行全面的网络流量分析，还可以从一开始就被淹没。

— 杰森·伯奇
source

我不能说我对提琴手很熟悉，但是Wireshark绝对是裸机。Wireshark实际上仅在需要查看较低级协议详细信息时才有用。

— Evan Plaice

Fiddler在可用性方面更接近Firebug / Chrome开发者工具。我发现最方便的地方之一是在网站上发布KML文件时。您可以看到Windows桌面应用程序（例如Google Earth）的请求和响应，而不仅仅是Web浏览器。我已经使用Wireshark几次，但是同意它对于日常的网站管理员而言通常没有用。

— JasonBirch 2010年

1

您还可以尝试使用Google的开源Speed Tracer- http://code.google.com/webtoolkit/speedtracer/

Speed Tracer是一种工具，可帮助您识别和修复Web应用程序中的性能问题。它可视化从浏览器内部的低级检测点获取的指标，并在应用程序运行时对其进行分析。Speed Tracer可作为Chrome扩展程序使用，并且可在当前支持扩展程序的所有平台（Windows和Linux）上使用。

使用Speed Tracer，您可以更好地了解应用程序中的时间。这包括由JavaScript解析和执行，布局，CSS样式重新计算和选择器匹配，DOM事件处理，网络资源加载，计时器触发，XMLHttpRequest回调，绘画等引起的问题。

— 姆瓦克
source