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

由 愚人码头 撰写 　

前几天一个项目中的页面在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浏览器下还是很好的一个选择。

更多相关链接：

这篇日志由 愚人码头, 发表在 2010年01月14日 于 1:15 下午, 文件归档于 前端工具 标签为 and tagged , . 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.

相关日志:

刚刚被浏览过的文章：

10 条评论

  1. Leeiio
    发表了 2010年01月14日 在 1:19 下午 | 永久链接

    Chrome Web Developer Tools不是自带的？

  2. 愚人码头
    发表了 2010年01月14日 在 1:21 下午 | 永久链接

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

  3. steven
    发表了 2010年01月14日 在 1:24 下午 | 永久链接

    感谢码头的分享！

  4. 丸子
    发表了 2010年01月14日 在 1:46 下午 | 永久链接

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

  5. kaka
    发表了 2010年01月14日 在 11:32 下午 | 永久链接

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

  6. Leeiio
    发表了 2010年01月19日 在 8:30 上午 | 永久链接

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

  7. xuhuan
    发表了 2010年01月19日 在 9:59 上午 | 永久链接

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

  8. 强哥仔
    发表了 2010年05月19日 在 9:41 下午 | 永久链接

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

  9. 寒鸦
    发表了 2010年06月10日 在 10:13 上午 | 永久链接

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

  10. Fansmaker
    发表了 2010年06月14日 在 12:44 下午 | 永久链接

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

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时，昵称或个人网站填的是商业网站的，一概标记为垃圾评论不予显示，并设置相关网站为过滤关键字，提交到google、百度垃圾网站数据库