Công cụ

Xem xét, chỉnh sử, debug HTML, CSS, và JavaScript trên máy tính và điện thoại

Có gì mới trong Firefox Developer Edition?

Firefox Developer Edition là một phiên bản của Firefox phù hợp cho các lập trình viên, với các tính năng mới nhất của Firefox, bên cạnh đó còn có các công cụ lập trình thực nghiệm. Hiện tại, trong Developer Edition chứa các công cụ lập trình sau:

Công cụ tạo mới

Công cụ cho Website và Web ứng dụng.

Scratchpad: Công cụ soạn thảo được xây dựng trong Firefox cho phép bạn viết và thực thi các lệnh JavaScript.
Style Editor: Xem và chỉnh sửa CSS styles cho trang hiện tại.
Shader Editor: Xem và chỉnh sửa các vertex và fragment shaders được sử dụng bởi WebGL.
Web Audio Editor: Xem xét, chỉnh sửa các tham số và nội dung của audio.

Exploring và debugging

Kiểm tra, explore, và debug websites hoặc web ứng dụng.

Web Console: Xem tin nhắn và và tương tác với các trang với Javascript.

Page Inspector

Xem, định dạng HTML và CSS.
JavaScript Debugger: Dừng, chạy và xem xét Javascript trong web.
Network Monitor: Xem yêu cầu kết nối khi load trang.
Storage Inspector: Kiểm tra cookies, kho chứa, indexedDB và các phần chứ của trang web.
Developer Toolbar: A command-line interface for the developer tools.

DOM Inspector: Kiểm tra các DOM ưu tiên, hàm,... của trang web
Developer Toolbar: Thanh quan sát cho các công cụ.
Eyedropper: Chọn màu sắc từ trang.
about:debugging: Một bảng để debug ứng dụng
Working with iframes: Cách tìm hiểu mục tiêu iframe nhắm vào.

Mobile

Công cụ cho lập trình di động.

App Manager: App Manager has been replaced by WebIDE.
WebIDE: The replacement for the App Manager, available from Firefox 33 onwards.
Firefox OS Simulator: 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.
Debugging on Firefox for Android: Connect the developer tools to Firefox for Android.
Debugging Firefox for Android with WebIDE: For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.
Valence: Connect the developer tools to Chrome on Android and Safari on iOS

Performance

Diagnose and fix performance problems.

Performance tool: Analyze your site's general responsiveness, JavaScript and layout performance.
Frame rate graph: See the frame rate for your site.
Waterfall: Figure out what the browser is doing as it runs your site.
Call Tree: Figure out where your JavaScript code is spending its time.

Flame Chart: See which functions are on the stack over the course of a performance profile.
Paint Flashing Tool: Highlights the parts of the page that are repainted in response to events.
Reflow Event Logging: See reflow events in the web console.
Network Performance: See how long the parts of your site take to load.

Debugging trình duyệt

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.

Browser Console: See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox: 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.

Add a new panel to the devtools: Write an add-on that adds a new panel to the Toolbox.
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.
Web Console custom output: How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons: Use these examples to understand how to implement a devtools add-on.

Các tài nguyên khác

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.
Web Developer: Adds a menu and a toolbar to the browser with various web developer tools.

Webmaker 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.

Join the Developer tools community

Choose your preferred method for joining the discussion:

IRC: #devtools (learn more)
Team info: Dev tools wiki
Blog: Hacks blog