level 13
网络孤独行客
楼主
Firefox是个伟大的浏览器,尽管有时它备受诟病。但每个Firefoxer都能感受到这款浏览器的优秀特质,比如高效、安全、跨平台等。下面我主要说的是它的扩展性,说说我常用的七种扩展,谓之:七种武器。
第一种武器:长生剑 Firebug
Firebug可谓是前端工程师用作测试的神兵利器,熟悉非常。下面主要给一些不太熟悉的狐狸精作下简介,共同学习。
在扩展搜索界面搜索"Firebug"即可下载安装Firebug,重启浏览器生效。
我们可以通过按左上角的logo弹出菜单或者直接按F12打开Firebug

打开后,窗口一分为二。上面的是我们正在浏览的页面,下面的就是Firefox的主界面。

可以看到主要有Console、HTML、CSS、Script、DOM、Net这六个标签菜单。
Console
Console就是所谓的控制台,里面主要是JavaScript的命令操作与网页的警告、错误信息等。可以看到Console标签下又分为两个部分,左边主要是信息的显示,右边主要供用户调试JS用。
像我们学习任何计算机语言一样,写个Hello World是很有必要的。
在右边输入:alert("Hello Firebug!");然后按Run命令,就会弹出一个对话框。

还可以用它的log命令:console.log("Hello World!");把结果输出到控制台,这个在调试中是很有用的。由于篇幅所限,不深入讨论。

Clear:清除log信息。
Persist:保持监听,不被页面转跳而失去信息。
Profile:性能分析,列出调用函数,和所用时间。
Errors:列出页面错误。
Warnings:列出警告信息。
HTML
HTML查看器是个功能强大的HTML查看工具。可以查看页面的HTML代码,即时修改数据,可视化地检查页面中的元素。

以百度首页演示,点击那个蓝色的箭头(红圈内),然后点击百度的logo,就可以看到控制这logo具体的HTML和CSS代码、属性。点击可以即时修改生效也可以在相应的标签内按“Edit”菜单或右键菜单“Edit”进行编辑。右边是相应的CSS,可精确到CSS文件中的行数。这些都可以即时修改,前端工程师可用于调试页面,Firefox的各种开发者可以用来辅助制作GreaseMonkey JavaScript、Stylish CSS等。

Computed:查看页面中CSS属性的默认值。
2012年06月12日 16点06分
1
第一种武器:长生剑 Firebug
Firebug可谓是前端工程师用作测试的神兵利器,熟悉非常。下面主要给一些不太熟悉的狐狸精作下简介,共同学习。
在扩展搜索界面搜索"Firebug"即可下载安装Firebug,重启浏览器生效。
我们可以通过按左上角的logo弹出菜单或者直接按F12打开Firebug

打开后,窗口一分为二。上面的是我们正在浏览的页面,下面的就是Firefox的主界面。
可以看到主要有Console、HTML、CSS、Script、DOM、Net这六个标签菜单。Console
Console就是所谓的控制台,里面主要是JavaScript的命令操作与网页的警告、错误信息等。可以看到Console标签下又分为两个部分,左边主要是信息的显示,右边主要供用户调试JS用。
像我们学习任何计算机语言一样,写个Hello World是很有必要的。
在右边输入:alert("Hello Firebug!");然后按Run命令,就会弹出一个对话框。

还可以用它的log命令:console.log("Hello World!");把结果输出到控制台,这个在调试中是很有用的。由于篇幅所限,不深入讨论。
Clear:清除log信息。Persist:保持监听,不被页面转跳而失去信息。
Profile:性能分析,列出调用函数,和所用时间。
Errors:列出页面错误。
Warnings:列出警告信息。
HTML
HTML查看器是个功能强大的HTML查看工具。可以查看页面的HTML代码,即时修改数据,可视化地检查页面中的元素。

以百度首页演示,点击那个蓝色的箭头(红圈内),然后点击百度的logo,就可以看到控制这logo具体的HTML和CSS代码、属性。点击可以即时修改生效也可以在相应的标签内按“Edit”菜单或右键菜单“Edit”进行编辑。右边是相应的CSS,可精确到CSS文件中的行数。这些都可以即时修改,前端工程师可用于调试页面,Firefox的各种开发者可以用来辅助制作GreaseMonkey JavaScript、Stylish CSS等。
Computed:查看页面中CSS属性的默认值。

