mozilla

This translation is incomplete. Please help translate this article from English.

Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile

Aurora'da neler yeni?

Son Firefox Aurora dağıtımı Firefox 27'dir, ve geliştirici araçları için bu güncellemeleri içerir:

You can use the Firefox developer tools to examine and edit HTML and CSS, to debug JavaScript, and to run JavaScript in the page. You can use them to see network requests that your browser makes as well as any JavaScript and CSS warnings and errors that it encounters when loading a page. You can use them to debug performance problems with your site.

You can use the developer tools to debug code running Firefox for Android, and soon, Firefox OS. We've also provided tools that target mobile development: the Responsive Design View is a quick way to see how a site will look on a small screen, and the Firefox OS Simulator lets you run and debug a Firefox OS app on the desktop without needing to use a real Firefox OS device.

Firefox add-ons can access the debugger API, so you can build your own developer tools that extend and enhance the built-in 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.


Araç Kutusu

The Toolbox provides a single home for most of the developer tools that are built into Firefox.

Sayfa Denetçisi
Görünüm ve seçili öğe için HTML ve CSS ayarları.
Web Konsolu
Web sayfası yükleyen browser tarafından gönderilen bilgi, uyarı ve hata mesajlarını görün, ve JavaScript kullanarak sayfayı inceleyin ve degiştirin.
Biçim Editörü
Sayfanızdaki CSS ayarlarını görün ve düzenleyin.
JavaScript Debugger
Browserda calışan JavaScript kodunu inceleyin ve değişkenleri takip ederek kodunuzu debug edin.
JavaScript Profiler
Profiler'ı kullanarak JavaScript'inizin vaktini nerede harcadığını anlayın.
Ağ izleyici
Bir sayfa yüklendiğinde gerçekleşen bütün ağ taleplerini ve ne kadar süre aldıklarını inceleyin.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.

Mobil

Of course, mobile web developers are web developers too, so most of the web development tools will be interesting to mobile web developers as well. But we've also created some tools specifically aimed at mobile development.

Remote Debugging
Use the developer tools to debug your Android device over USB.
Firefox OS Simulator
Run and debug your Firefox OS app on the desktop, without needing to use 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.

Bağımsız Araçlar

These tools ship inside Firefox as well, but their user interfaces aren't integrated into the Toolbox.

Scratchpad
A text editor built into Firefox that lets you write and execute JavaScript.
Browser Console
See messages from all JavaScript code running in the browser including content, chrome, and add-ons. Execute JavaScript code in the chrome window's context.
Developer Toolbar
A command-line interface to manipulate and work with the developer tools in Firefox, and buttons for quick access to the most commonly used tools.
3D View
Also known as "Tilt", this provides a 3D visualisation of the current page.
Paint Flashing Tool
The paint flashing tool highlights the part of the browser window that are repainted in response to events, helping to diagnose potential performance problems with your site.

Diğer Kaynaklar

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: