mozilla
Your Search Results

    Firefox Developer Tools

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

    What's new in Aurora?

    Aurora is the preview build of Firefox, where you can get the latest features before they are released. The current Aurora includes these updates to the developer tools:

    Share your ideas

    Share your ideas

    Ask for new features in the developer tools or vote for ideas other developers are asking for.

    Creating

    Authoring tools for websites and web apps.

    Scratchpad
    A text editor built into Firefox that lets you write and execute JavaScript.
    Style Editor
    View and edit CSS styles for the current page.
    Shader Editor
    View and edit the vertex and fragment shaders used by WebGL.

    Exploring and debugging

    Examine, explore, and debug websites and web apps.

    Web Console
    See messages logged a web page, and interact with the page using JavaScript.
    Page Inspector
    View and modify the page HTML and CSS.
    JavaScript Debugger
    Stop, step through, examine and modify the JavaScript running in a page.
    Network Monitor
    See the network requests made when a page is loaded.
    Developer Toolbar
    A command-line interface for the developer tools.
    3D View
    3D visualization of the page.
    Eyedropper
    Select a color from the page.

    Mobile

    Tools for mobile development.

    App Manager
    Design and develop apps for Firefox OS.
    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.

    Performance

    Diagnose and fix performance problems.

    JavaScript Profiler
    Figure out where your JavaScript code is spending its time.
    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 the browser

    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.

    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.

    More resources

    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:

    Document Tags and Contributors

    Contributors to this page: wbamberg
    Last updated by: wbamberg,