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

预览版有何创新?

火狐浏览器开发者版本包含最新的特性以及火狐开发者工具。最新的开发者版本包含了对于这些开发工具的更新:

分享你的创意

分享你的创意

在开发者工具中提出新的特性,或是对别的开发者的要求进行讨论。

创新

网页与网页应用的开发工具。

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

探索与调试

检查或是探索网页或网页应用。

网络控制台
查看记录在网页上的记录,并使用JavaScript与网页进行互动。

页面查看器

查看与修改HTML信息及CSS。
JavaScript调试工具
中断,逐步运行,检查并修正在页面上运行的JavaScript。
网络监视器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 社区

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

文档标签和贡献者

 最后编辑者: zhanyouwei,