Firefox 开发工具

在桌面与移动平台上的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
从页面中选择一种颜色。

移动平台

移动平台上的开发工具

应用管理
Design and develop apps for Firefox OS.
Firefox OS 模拟器
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
Responsive Design View
See how your website or app will look on different screen sizes without changing the size of your browser window.
调试Firefox(Android)
Connect the developer tools to Firefox for Android.

性能

Diagnose and fix performance problems.

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.
网络状况表现
See how long the parts of your site take to load.

为浏览器找出漏洞

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

浏览器控制台
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
浏览器工具箱
Attach the Developer Tools to the browser itself.

Extending the devtools

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

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
A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.

更多参考资源

This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the "Web Development" category on addons.mozilla.org.

网站开发工程师
Firebug
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
DOM Inspector
Inspect, browse, and edit the DOM of web pages or XUL windows.
Adds a menu and a toolbar to the browser with various web developer tools.
网页制作工具
A set of tools developed by Mozilla, aimed at people getting started with Web development.
W3C Validators
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
JSHint
JavaScript code analysis tool.

加入 Developer tools 社区

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

文档标签和贡献者

标签: 
向此页面作出贡献: zaozaool, c_king, iiboys, YLOIHyl, whyletgo, chuxuezhe, ziyunfei, shengyouxiao
最后编辑者: zaozaool,