【前端开发工具】google Chrome开发人员工具（Chrome Web Developer Tools）

时间：2010年01月14日作者：愚人码头查看次数:18,206 views评论次数：13

前几天一个项目中的页面在Chrome和safari下撑开，Firefox，ie，opera正常，静态页面是OK的，只能找Chrome和safari下的调试工具，safari只有在MAC下有调试工具，而Chrome正式版（目前最新3.0.195.38）只有javascript控制台，css和html虽然也能调试，但是非常的不灵活，

。

所以去google Chrome的扩展中心google Chrome Extensions翻了个底朝天，终于找到了Chrome Web Developer Tools，（如果翻不了墙请点击下载）该工具需要在google Chrome 4 bate版上安装。

该工具在javascript控制台的基础进行了扩展，html和css的调试方便了很多（当然和firebug还是有一定的差距）；

安装后，启动该工具，如图：

工具界面：

1,Elements:主要是html和css的调试，

2.Resources：主要是加载时间和文件尺寸；

3.Scripts：主要是js；

4.Console：控制台，检查网页的错误，请求等等。

附加工具：如图

一下常用的小工具，不在一一介绍。

总体来说不管是功能上还是使用上都没有firebug实用，但是在google Chrome和safari浏览器下还是很好的一个选择。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【前端开发工具】google Chrome开发人员工具（Chrome Web Developer Tools）》

如果你读了我的文章，觉得有帮助：

说明

标签：Chrome,前端开发工具分类：前端工具

13条评论

Leeiio留言于:2010年01月14日13:19

Chrome Web Developer Tools不是自带的？

[回复]
愚人码头留言于:2010年01月14日13:21

@Leeiio 自带的功能相对比较弱！不仔细看完就下结论，鄙视你！

[回复]
steven留言于:2010年01月14日13:24

感谢码头的分享！

[回复]
丸子留言于:2010年01月14日13:46

3.Scriots：主要是js；
错了…每次看都要给你检查拼写…

[回复]
kaka留言于:2010年01月14日23:32

哎。。还是不忍放弃FF放弃firebug~

[回复]
Leeiio留言于:2010年01月19日08:30

@愚人码头对比了下，和我自带的还真没看出什么区别…4.0.295.0 dev

[回复]
xuhuan留言于:2010年01月19日09:59

我的也是4.0.295.0 dev，是目前的最新版本，也没看出什么不同。

[回复]
强哥仔留言于:2010年05月19日21:41

自带的吧，就是文字显小，怎样调大呢

[回复]
寒鸦留言于:2010年06月10日10:13

看到上面图中的扩展上有firebug的图标，难道在Chrome中也有firebug？

[回复]
Fansmaker留言于:2010年06月14日12:44

这跟审查元素有什么区别么？我觉得审查元素挺好用的~

[回复]
jackyang留言于:2011年03月04日15:58

我觉得吧.其它浏览器干脆都统一做成firebug好了.
因为大家都习惯这个;
这样其它浏览器就会有市场;

[回复]
Weicheng留言于:2011年06月08日22:35

请问：想查看浏览器提交给服务器的头信息不下载工具能实现么？对网络方面的知识知之甚少，多谢博主帮忙：）

[回复]
yelllow留言于:2011年08月08日08:12

Chrome 把firebug的创始人挖过去了`

[回复]