主页 > M级生活 >Firefox 10全新开发者工具,支援网页3D、HTML、 >

Firefox 10全新开发者工具,支援网页3D、HTML、

所属栏目:M级生活 发布时间:2020-08-14

如果还没安装 Firefox 10 的话,赶快下载来安装吧!在 Firefox 10 中新增了全新的开发者工具,能轻易的分析网页排版及架构,并检视HTML及CSS属性,还可以直接修改语法的属性和参数,对于开发者来说,在修改网页架构时这个功能可以让开发者轻易的调整细部参数,尤其是在调整CSS部份更是方便。

Firefox 10全新开发者工具,支援网页3D、HTML、

除此之外,开发者工具还支援 CSS Transforms,可以让原本平面的网页变成 3D 样式,以前需要特别安装第三方扩充套件才能使用的功能,现在直接内建在 Firefox 中!转换成3D样式有什幺好处呢?开发者可以更轻易的了解网页的架构,对于初学者来说,这个功能也能够在学习时辅以了解CSS区块配置型态,可说是炫又实用呢!

Firefox 10全新开发者工具,支援网页3D、HTML、

开发者工具使用介绍

开启方式:按住〔Shift〕+〔Ctrl〕+〔I〕即可开启 Firefox 内建的开发者工具。

Firefox 10全新开发者工具,支援网页3D、HTML、

启用后在浏览器下面会显示工具列,点选「检测」后将滑鼠游标移到网页上就可会显示该区块使用的属性。

Firefox 10全新开发者工具,支援网页3D、HTML、

另外开发者工具有3种检视模式。首先介绍HTML模式,在开发者工具列右边点选「HTML」按钮即可开启HTML简视窗格,将滑鼠移游标网页上任何位址,HTML检视窗格中的程式码就会随着游标停驻的位置显示该区域的HTML。

Firefox 10全新开发者工具,支援网页3D、HTML、

另外一种则是「样式」,使用方法与HTML相同。当开启样式功能时,网页右侧会出现样式表显示滑鼠游标停驻区域的所套用的CSS。

Firefox 10全新开发者工具,支援网页3D、HTML、

在样式功能中,可以随意开启或停止某个CSS语法的运行或修改其参数,调整版面配置时非常好用。

Firefox 10全新开发者工具,支援网页3D、HTML、

最特别的 3D 功能可以让网页架构变成 3D 化,有助于观察架构。

Firefox 开发者工具介绍影片

介面更胜 Firebug

相信网页开发者早就已经开始使用 Firebug 这款扩充套件,Firefox 10 的开发者工具功能与 Firebug 相去不远,但是以两者的介面比较起来,我认为 Firefox 开发者工具显得比较直观,而且在字体、字型和视窗的部份都有特别安排(Firebug 是将所有内容显示在扩充套件视窗中),虽然功能上不及 Firebug 专业,但对于单纯网页学习、研究或开发人员来说是相当不错的好工具。



上一篇: 下一篇:

精彩文章