在桌面与移动平台上的HTML,CSS与JavaScript环境中进行检查、编辑、调试
安装Firefox开发者版

Firefox 开发者版本有何特性?

火狐浏览器开发者版本 是为开发者定制的版本,包含Firefox最新的特性和实验性的功能。最新的开发者版本包含开发者工具的如下更新:

由于开发者版本浏览器的不定时更新,下面的文档可能并不是最新,请前往官网查看

https://developer.mozilla.org/en-US/Firefox/Releases (英文版,历史记录)

https://www.mozilla.org/en-US/firefox/developer/   (官网)

创新

网站与网页应用的编辑器

Scratchpad(代码草稿纸)
一个集成在Firefox中的,用于编写与执行JavaScript的文本编辑器。
Style Editor(样式编辑器)
预览或编辑在最新页面中的CSS(层叠样式表单)。
Shader Editor
使用WebGL预览或编辑vertex与fragment shaders。

探索与调试

检查、探索、调试网站和网页应用

Console(控制台 )
查看网页产生的记录,并使用JavaScript与网页进行互动。
查看与修改HTML信息及CSS。
JavaScript Debugger(调试器)
中断,逐步运行,检查并修正在页面上运行的JavaScript。
Network Monitor(网络监视器)
在网页加载时观察网络需求。
开发者工具栏
用于启动开发者工作的命令按钮组合。
3D 视图
页面的3D可视化工作。
Eyedropper(页面取色器)
从页面中选择一种颜色。

移动平台

移动平台上的开发工具

应用管理
为Firework os设计,开发apps
Firefox OS 模拟器
在没有一个真实的Firefox os装置的情况下,运行和调试你的 Firefox OS app  
Responsive Design View 响应设计视图
不需要改变浏览器窗口大小,就可以查看网页或者Web APP在不同屏幕尺寸的效果。
调试Firefox(Android)
Connect the developer tools to Firefox for Android.

性能

诊断和修复性能问题。

JavaScript 分析器
Figure out where your JavaScript code is spending its time.
动画绘图工具
Highlights the parts of the page that are repainted in response to events.
事件查看器
See reflow events in the web console.
网络状况表现
查看网页加载各个部分耗费的时间。

为浏览器找出漏洞

默认地,开发工具被附加到web网页或者web app。可以把开发工具附加到整个浏览器上,这样有助于浏览器和插件的开发。

浏览器控制台
查看浏览器和插件记录的日志,并可以在浏览器作用域中执行JavaScript代码。
浏览器工具箱
把开发工具附加到浏览器。

Extending the devtools 拓展开发工具

开发工具都是可拓展的。火狐插件可以访问开发工具和组件,拓展已经存在的工具或增加新的工具。通过远程调试协议,可以实现自定义的客户端和服务端调试。

Remote Debugging Protocol 远程调试协议
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor 源码编辑器
.火狐内置的代码编辑器,可以嵌入到插件中。
The Debugger Interface 调试器接口
可以让JavaScript代码获取其他JavaScript代码执行信息的接口。火狐的开发工具使用该接口实现了JavaScript代码的调试。
 

更多参考资源

本小结介绍了一些不是Mozilla开发者工具团队维护的一些资源。这些资源被web开发者广泛的使用,我们已经在火狐add-ons附加软件中加入了其中一些,完整的工具列表请看Web Development" category on addons.mozilla.org.。

网站开发工程师
Firebug
Firebug是一个功能非常强大的web开发工具,功能包括JavaScript代码调试,HTML和CSS代码的查看和编辑,还有网络的监控。
DOM Inspector DOM检查器
检查,浏览和编辑网页或XUL窗口。
增加一个带有多个web开发工具的菜单和工具条到浏览器。 
W3C Validators
.W3C网站有很多校验HTMLCSS样式正确性的工具。
JSHint
JavaScript 代码分析工具。

 


加入 Developer tools 社区

请选择你喜欢的方式加入我们:

文档标签和贡献者

 最后编辑者: GrayLight,