firefox+firebug好用还是chrome自带的好用？_chrome吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：140,936贴子：
firefox+firebug好用还是chrome自带的好用？收藏
开发者工具
“健康随e保(长青版)”老人防癌险,线上免体检。
没用过开发者工具
肯定是火狐的firebug
跑来这听别人怎么说不如自己去试，适合自己的就是最好的
莫名其妙ff17下firebug用不了,只能用ff自带的控制台
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或您所在的位置： &
你可能不知道的25个浏览器开发工具小秘密(2)
你可能不知道的25个浏览器开发工具小秘密(2)
长天之云的博客
你充分发挥了这些工具的潜力吗?开发工具最大的特点就是很容易使用，但结果就是开发者们常常错过了它们所提供的大部分功能。本文列出了一个有关浏览器开发控制台“秘密”的列表。
元素选项卡
Firefox中叫做&HTML&选项卡，Opera中叫做&文档&(Documents)选项卡。元素(Elements)选项卡显示的是当前状态的DOM。在IE中，你需要点击&刷新&按钮才能查看当前的DOM。
获取一个容器尺寸的简易办法
Chrome，Safari&我是个在包含浮动元素的容器上使用overflow:auto样式的大粉丝&&旧版本的IE这样做会引起麻烦，除非你给元素指定了实际宽度(auto和100%都不够)。虽然元素的实际尺寸可以在元素选项卡右上角的&Computed Style&栏看到，但仍然需要点击好几次。在Chrome或Safari中更好办法是，鼠标悬停到元素选项卡里HTML源代码的特定元素上，或者点击底部工具栏上的放大镜后再悬停到页面特定元素上：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密" src="/files/uploadimg/2018.png" width="417" height="165" />
Firebug, Internet Explorer, Opera & 你需要选择开发工具右手侧面板中的&布局&(Layout)选项卡，或在右侧边栏中的&计算样式&(computed styles)中查看。
展开所有元素视图
Firefox，Opera &在Firebug的HTML选项卡中，按下小键盘上的星号(*)键就可以展开选定的所有元素。默认不会展开脚本标记和样式标记，除非你同时按下Shift + * 键。
Opera & Opera&文档&(Documents)选项卡下边直接有个按钮可以做这件事：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20111.png" width="417" height="165" />
增加边距、间距、高度、宽度、边框&&甚至是颜色
所有浏览器&如果你想改变某元素的边距、间距、高度或者，你可以用光标键(即方向键)来增加/减小大小：
◆ 按上(&)或下(&)键将增加或减小单位1。
◆ 在Chrome，Firebug和Safari中，按住Shift键的同时，再按上或下键将增加或减小单位10。(*译注：Page-Up和Page-Down键有同样的效果)
◆ 在Chrome和Safari中，按住Alt键的同时，再按上或下键将增加或减小单位0. 1。
◆ 在Chrome和Safari中，按住Shift键的同时，再按Page-Up或Page-Down键将增加或减小单位100。
这些快捷键在你不确定用哪种使用的尺寸做样式时特别有用。另外，Chrome，Firebug和Opera中，你同时可以用这些快捷键来修改颜色值。
*译注：需要双击元素选项卡右侧的具体样式，使其进入编辑状态。
为:active, :hover, :focus, :visited状态设置样式
Chrome，Firefox，Opera &在控制台操作样式真的很棒，但测试悬停样式就麻烦了。庆幸的是，有个解决办法。
Chrome有个内置按钮用来做这件事。在元素选项卡右侧有个带虚线框和光标的图标，它就是用来编辑状态样式的：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20112.png" width="326" height="233" />
Firebug中，点击右侧的Style选项卡旁边的带箭头菜单，然后选择你想要编辑的状态。
在Opera中，样式选项卡下面有个看起来像列表的图标。
轮换颜色定义类型
Chrome，Safari &Web页面中的颜色能用多个方式定义&&通过名称、16进制数字(3位或6位)、rgb或hsl(都有带alpha透明的版本)。在Chrome 或 Safari中，你可以通过点击颜色值旁边的方形图标来在这几个类型定义之间切换。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20113.png" width="352" height="131" />
*译注：增加了这个截图，以前我仅仅以为那个方块是用来展示颜色的，澹静恢浪鼓艿慊&&又多了一个能省略掉计算器的功能。
颜色拾取器
Opera & 在 Opera中，和上面一样，点击颜色值右边的方块图标可以弹出一个方便的拾取器：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20114.jpg" width="376" height="240" />
*译注：这里又有了个HSV颜色自动转换RGB颜色的工具。
资源选项卡
资源(resources)选项卡列表你的页面使用的所有样式表、JavaScript文件和图片。不幸的是，IE和Firebug中不存在这个选项卡，尽管在它们的其他选项卡中集成了这项功能的一些特征。
保存你的更改
Chrome，Internet Explorer, Safari&&在工具中即时编辑样式或JavaScript很爽。但当你高高兴兴地做了修改，然后又要在源代码中重新实现一遍就不那么爽了。
在IE中，每个选项卡提供了一个&保存&图标，它的功能就是保存修改到一个文件当中。
同时，Chrome和Safari的资源选项卡中提供了一项贴心的功能：它保存了你每次修改的版本(按Ctrl + S之后)，还允许你往前或往后查看每个版本的变化。你修改过的文件名旁边会出现一个箭头图标，表示它可以展开/收起以查看修改过的版本列表。在Chrome中，右键点击文件名可以选择保存这个文件。不过在Safari中你只能悲剧地复制和粘贴了。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20115.png" width="317" height="193" />
Cookie和存储
Chrome，Opera, Safari&资源选项卡下半部分的资源列表表示了各种不同的数据存储选项。Opera有一个单独的存储选项卡。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20116.png" width="201" height="147" />
网络选项卡
网络(Network)选项卡显示你页面加载的所有文件资源。大多数情况，你打开它之后，要刷新一下页面才能显示出你想看的信息。在Firebug中，选项卡的名称是&Net&。对于IE，直到版本9以后才有它。
禁用浏览器缓存
所有浏览器&每个浏览器都可以禁用缓存，但禁用的方式不一致。
在Chrome中，点击开发工具右下角的齿轮图标进行设置。在Firebug中，设置位于网络选项卡旁边的箭头下拉菜单中。在IE中，设置位于菜单栏的存菜单项。
在Opera中，要清除缓存的话，点击网络选项卡，选择网络选项中的第二个选项卡，选择其中的第一个选项。在Safari中，在菜单栏中的&开发&菜单中禁用缓存。
Windows中，在浏览器中可以按下Ctrl + Shift + Delete键调用消除缓存对话框。
*译注：Opera中我根本没找到，只有设置/历史选项卡可供设置。
所有浏览器&网络选项卡允许你查看服务器响应一个请求花了多长时间。每个资源对应的浅色填充部分表示请求是何时发送，并且何时返回的。深色填充部分表示资源是何时下载的。在Chrome中，你可以用悬停在每条时间线上以获得消耗时间的具体信息。
在Opera中延迟表示的原则是一样的，除了它用的是灰色的线条，而Chrome是浅色填充。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 428 height: 206px" alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20117.png" width="577" height="247" />
在IE中，延迟被标记成黄色，并且悬停到时间线上也会取得更多信息。
在Firebug中，延迟被标记为紫色，并且用的术语是&Waiting&。悬停到时间线上同样能获得各方面时间消耗的详细信息。
DOMContentLoaded 和load事件触发
Chrome，Safari & Chrome和Safari中网络选项还展示了两项额外的信息，DOMContentLoaded事件触发的时间用蓝线表示，load事件触发的时间用红线表示。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 385 height: 245px" alt="浏览器开发工具的25个秘密 " src="/files/uploadimg/20118.png" width="500" height="350" />
DOMContentLoaded代表的那条线表示当浏览器已经完成解析文档(但其他资源比如图片和样式表可以还没下载完成)，而load事件代表的线表示所有资源都已经加载完成了。
如果这两个事件同时发生，这条线会显示为紫色。
所有浏览器&有时我发现开发者工具会崩溃，或鼠标点击时会失去响应。我也经常发现使用键盘快捷键关闭再重新打开开发工具可以修复这个问题，而不需要去关闭整个浏览器再重新打开。
我希望这些特性和秘密对你有所帮助。我故意没有在这个列表中包含性能分析和远程调试的内容，那将是我后续文章要讲到的了。欢迎您在评论中反馈、挑错，或留下你的技巧。
网友ygcc459补充：
1、opera可以直接编辑Html源代码，甚至可以添加新的html标签（chrome、ie9能修改但不能添加标签，firefox不知道），并且所有编辑都是即时预览的。
2、opera、chrome的css窗口可以定位到css所在原文件的行号，ie9不显示行号，firefox不知道
原文：/ambar/archive//25-secrets-of-the-browser-developer-tools-in-chinese.html
【责任编辑： TEL：（010）】
内容导航&第 1 页： &第 2 页：
关于的更多文章
本专题围绕如何高性能Web开发，从多个方面、多个角度进行了全面
网友评论TOP5
移动互联网时代，许多人首要考虑的不再是Windows / Mac的安全竞争，即便Windows的安全性有所改善。当下最大的担忧是iOS和Android移动设备上的安全。再一次苹果 “围墙花园”似的系统似乎比Android在开放情况下创建安全环境更受欢迎。
在11月26日举办的第17期51CTO技术沙龙上，有幸请到了
javascript中的异步编程能力都是由BOM与DOM提供的，如
2011年11月是Eclipse诞生十周年的日子，最开始是作为
本书从计算机网络安全的概念入手，分析了单机节点、单一网络、互联网络和开放互联网络的基本安全问题，并对计算机网络安全体系架
51CTO旗下网站