您的位置：首页 > Web前端 > CSS

Firefox - 附加组件 - 扩展 - Firebug - HTML视图 - Style样式选项卡 - 显示计算样式不显示所有可用的样式

2008-08-27 11:14 676 查看

Firefox - 附加组件 - 扩展 - Firebug - HTML视图 - Style样式选项卡 - 显示计算样式不显示所有可用的样式

在HTML视图右侧选择Style样式选项卡，在Option选项菜单中包括show Computed
Style显示计算样式菜单项，此时将显示Firebug内置的样式，而不会显示所有在Firefox中可用的样式，既使显式的设置了该样式。例如下面的
代码将在Firefox中显示圆角矩形，但是在Firebug的HTML视图中Show Computed
Style显示计算样式选项不会显示相关的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="background: red; border: blue 20px solid; border-radius: 15px; -moz-border-radius: 15px;">
圆角效果
</div>
</body>
</html>

Firebug Version版本	Result测试结果
1.2.0	False

[Firefox - 官方网站]

http://www.mozilla.com/zh-CN/firefox/

[Firefox - 下载]

当前版本3.0.1, http://www.mozilla.com/en-US/firefox/3.0.1/releasenotes/

http://www.mozilla.com/en-US/firefox/all.html

测试版本
Firefox 3 Beta 1, http://www.mozilla.com/en-US/firefox/all-beta.html

[Firefox - 相关论坛]

http://firefox.board.newsmth.net/

http://bbs.pku.edu.cn/,
Homepage看版

http://forum.csdn.net/SList/HTMLCSS/

[Firefox - 附加组件 - 扩展]

CookieSafe,
当前版本2.0.6, 常用, https://addons.mozilla.org/en-US/firefox/addon/2497
Firebug,
当前版本1.2.0b15, 常用, https://addons.mozilla.org/en-US/firefox/addon/1843 Firesizer, 当前版本 0.65, 常用, https://addons.mozilla.org/zh-CN/firefox/addon/5792

Google
Toolbar for Firefox, 当前版本3.0.20070525W, 常用, http://www.google.com/tools/firefox/toolbar/FT2/intl/zh-CN/
Html
Validator, 当前版本0.8.4.0, 常用, https://addons.mozilla.org/firefox/249/
MinimizeToTray,
当前版本0.0.1.2006102615+, 不常用, https://addons.mozilla.org/firefox/2110/
Tab
Mix Plus, 当前版本0.3.6, 不常用, https://addons.mozilla.org/firefox/1122/
Torbutton,
当前版本1.2.0, 常用, https://addons.mozilla.org/en-US/firefox/addon/2275

[Firefox - 附加组件 - 插件]

Shockwave Flash, http://www.adobe.com/products/flashplayer/

[Firebug - 简介]

当前版本：1.2.0b15

Firebug integrates with Firefox to put a wealth of development tools at your
fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and
JavaScript live in any web page.

在您浏览时集成在Firefox中的Firebug能让您对于大量开发工具了如指掌。您可以实时在任何浏览的页面中编辑、调试、监视CSS，HTML和JavaScript。
Firebug 1.2 requires Firefox 3. Firefox 2 users should install the older 1.05 version of Firebug.
Firebug 1.2 要求 Freifox 3。Firefox 2的用户可以安装Firebug的老版本1.05。

[Firebug - 发布地址]

https://addons.mozilla.org/zh-CN/firefox/addon/1843

[Firebug - 官方网站]

http://www.getfirebug.com

[Firebug - 文档]

http://www.getfirebug.com/docs.html

[Firebug - bug]

http://code.google.com/p/fbug/issues/list

[Firebug - 关键词]

Firebug

[Firebug - 相关论坛]

http://groups.google.com/group/firebug

[Firebug - Console控制台视图]

console
API文档, http://www.getfirebug.com/console.html
console.info显示(i)图标

在输出时，需要注意第一个参数被自动识别为格式字符串

需要在页面加载前启动firebug，当页面加载后启动firebug时，就没有console对象

console.time(name), 用指定名称创建一个定时器，使用同一个名称调用console.timeEnd(name)将停止定时器并输出时间间隔。

console.timeEnd(name), 停止通过console.time(name)创建的定时器，并输出时间间隔。

[Firebug - HTML页面视图]

Show Computed Style不显示所有可用的样式，涉及版本1.2.0

标记的显示也会与源代码不同，而是按照Firefox对文档结构的解析显示的

在页面上右击弹出菜单中选择Inspect Element菜单项，能起到与Inspect按钮相同的作用。

[Firebug - CSS样式表视图]

Edit编辑模式下切换文件不能保持Edit编辑模式

[Firebug - Script脚本视图]

使用step into, step over等按钮需要预先设置javascript脚本的断点

Options选项，Break on All
Errors在所有错误处中断，用于捕获javascript出错事件，不受javascript脚本中的try/catch影响

在页面加载过程中的脚本设置断点，可以先加载页面，设置断点，然后刷新页面

[Firebug - DOM文档结构视图]

页面中包含不断执行的AJAX时，DOM视图也将不断刷新，此时可以在script视图中AJAX脚本处设置断点避免DOM视图刷新。

借助Show User-defined Properties选项查看javascript全局变量

[Firebug - Net网络视图]

进度条	进度条颜色	文字颜色	含义
有	绿色	黑色	正在读取
有	深灰色	黑色	向服务器端发送请求，从服务器端返回文件
有	深灰色	红色	404，没有找到指定文件
有	浅灰色	黑色	向服务器端发送请求，服务器端返回未修改，加载本地缓存文件
无	-	黑色	未向服务器发送请求，直接从本地缓存加载文件

右击菜单, Open in New Tab在新标签中打开

[Firebug - 其他问题]

不支持IE Tab

设置Javascript.options.strict为False避免Firebug出错, http://kb.mozillazine.org/Javascript.options.strict

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航