Mozilla

Firefox Articles

Sort by:

View:

  1. Developer Edition 41: View source in a tab, screenshot elements, HAR files, and more

    When we introduced the new Performance tools a few weeks ago, we also talked about how the Firefox Dev Tools team had spent a lot of time focusing on user feedback and what we call ‘polish’ bugs – things reported via our UserVoice feedback channel and Bugzilla. Even though the Firefox 41 was a short release cycle for us, this focus on user feedback continues to pay off — several new features that our community had been asking for landed in time for the release. Here’s a closer look:

    Screenshot the selected node in the Inspector

    New contributor Léon McGregor implemented an interesting suggestion that was posted in UserVoice. This functionality has been available via the gcli ‘screenshot’ command for quite some time, but is much more discoverable and useful as a context menu item. When the screenshot is created, Firefox copies it to your configured downloads directory.

    Create a screenshot of the currently selected element.

    Create a screenshot of the currently selected element.

    View source in tab

    Starting with Firefox 41, when you right-click and select View Page Source, the html source view will open in a tab instead of a new window. This was a hugely popular request and we would have shipped it earlier but what started out as a seemingly simple change was actually quite involved: See the bug linked below for all the gory details. Importantly, we have also ensured that View Page Source provides you with the source of the page as-is from Firefox’s cache – we do not fetch a new version.

    'View source' always opens in a tab now.

    View Page Source always opens in a tab now.

    Add Rules button

    It’s very convenient to be able to add a new rule to the Inspector as you work, and this is a feature from Firebug that users have requested for some time. During this last cycle, we spent some time polishing our implementation, and provided the convenience of a UI button in addition to the context menu command.

    We've added a button to the inspector so you can quickly add a new css rule.

    We’ve added a button to the inspector so you can quickly add a new css rule.

    “Copy as HAR” and “Save all as HAR”

    Another feature from Firebug that is particularly popular with Selenium users is the ability to export HAR archives for the current page.

    You can now export HAR archives directly from the network monitor.

    You can now export HAR archives directly from the network monitor.

    Other notable changes

    In total, 140 Developer Tools bugs have been fixed in Firefox since June 1st. On behalf of the team, I’d like to thank all of the people who reported bugs, tested patches, and spent many hours working to improve this version of Firefox Developer Edition, and especially these contributors that fixed bugs: edoardo.putti, fayolle-florent, 15electronicmotor, veeti.paananen, sr71pav, sjakthol, ntim, MattN, lemcgregor3, and indiasuny000. Thanks!.

    • Bug 1164210 – $$() should return a true Array
    • Bug 1077339 – Display keyboard shortcuts when hovering panel tabs
    • Bug 1163183 – Show HTML5 Forms pseudo elements in the rule view
    • Bug 1165576 – Netmonitor theme refresh
    • Bug 1049888 – Make the storage actor work in e10s and Firefox OS
    • Bug 987365 – Add pseudo-class lock options to rule view
    • Bug 1059882 – Frame selection command button should be visible by default
    • Bug 1143224 – Opening the netmonitor slows down requests on the page
    • Bug 1119133 – Keyboard shortcut to toggle devtools docking mode between last two positions
    • Bug 1024693 – Copy CSS declarations
    • Bug 1050691 – Click on a function on the console should go to the debugger

    Download Firefox Developer Edition 41 now. Let us know what you think and what you’d like to see in future releases. We’re paying attention.

  2. Trainspotting: Firefox 39

    Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

    A new version of Firefox is here, and with it come some great improvements and additions to the Web platform and developer tools. This post will call out a few highlights.

    For a full list of changes and additions, take a look at the Firefox 39 release notes.

    DevTools Love

    The Firefox Developer Tools are constantly getting better. We’re listening to developers on UserVoice, and using their feedback to make tools that are more powerful and easier to use. One requested feature was the ability to re-order elements in the Inspector:

    Editing and tweaking CSS Animations is easier than ever – Firefox 39 lets developers pause, restart, slow down, and preview new timings without having to switch applications.

    Menu of animation easing presets in the Inspector

    CSS Scroll Snap Points

    CSS Scroll Snap Points in action

    CSS Scroll Snap Points let web developers instruct the browser to smoothly snap element scrolling to specific points along an axis, creating smoother, easier to interact with interfaces with fewer lines of code.

    Improvements to Firefox on Mac OS X

    Firefox gets some Mac- specific improvements and updates in version 39:

    • Project Silk enabled – Improves scrolling and animation performance by more closely timing painting with hardware vsync. Read more about Project Silk.
    • Unicode 8.0 skin tone emoji – Fixed a bug in the rendering of skin tone modifiers for emoji.
    • Dashed line performance – Rendering of dotted and dashed lines is vastly improved. Check out the fixed bug for more information.

    Service Workers Progress

    Firefox’s implementation of the Service Workers API continues – fetch is enabled for workers and is now generally available to web content, and the Cache and CacheStorage are now available behind a flag.

    There’s lots more changes and improvements in Firefox 39 – check out the Developer Release Notes for developer-oriented changes or the full list of bugs fixed in this release. Enjoy!

  3. New Performance Tools in Firefox Developer Edition 40

    Today Mozilla is pleased to announce the availability of Firefox Developer Edition 40 (DE 40) featuring all-new performance tools! In this post we will cover some of DE 40’s new developer tools, fixes, and improvements made to existing tools. In addition, a couple of videos showcase some of these features.

    Note: Many of the new features were introduced in May, in an earlier Mozilla Hacks post.

    Introducing the new performance tools

    Firefox Developer Edition features a new performance tool that gives developers a better understanding of what is happening from a performance standpoint within their applications. Web developers can use these tools to profile performance in any kind of website, app, or game; for a fun insight into how these tools can be used to optimize HTML5 games, check out our post about the “Power Surge” game right after you’re done here.

    All performance tools can now be found grouped together under the Performance tab, for easier usage. Performance is all about timing, so you can view browser events in the context of a timeline, which in turn can be extended to include a number of detailed views based on the metrics you choose to monitor.

    In the following video, Dan Callahan demonstrates how to use the new performance tools.


    The Performance tab contains the new timeline, which includes: Waterfall view, Call Tree view and a Flame Chart view.

    All of the views above provide details of application performance that can be correlated with a recorded timeline overview. The timeline displays a compressed view of the Waterfall, minimum, maximum, and average frame rates, and a graphical representation of the frame rate. Left-clicking on the view and dragging to the desired range allows you to zoom into this timeline. This also simultaneously updates all three new views to represent a particular selected range.

    The recording view gives developers a quick way to zoom into areas where frame rate problems are occurring.
    recording

    The Waterfall view provides a graphical timeline of events occurring within the application. These events include markers for occurrences such as reflows, restyles, JavaScript calls, garbage collection, and paint operations. Using a simple filter button you can select the events you want to display in the Waterfall.

    perffilter

    You can use console commands like console.timeStamp() to indicate, with a marker on the Waterfall, when a specific event occurs. Also, you can graphically show timespans using the console.time() and console.timeEnd() functions.

    consoletimestamp

    The Call Tree view shows the results of the JavaScript profiler for the specified range. Using this view you can see the approximate time spent in a function. The table displays total time spent within a function call or the self-time that a particular function call is using. The total time encapsulates all time spent in the function and includes time spent in nested function calls. The self-time only includes time spent in the particular function, excluding nested calls. This view can be very helpful when trying to locate functions that are consuming a large portion of processing time. This view has been available in previous iterations of Firefox, and should be familiar to developers who have used the tool in the past.

    calltreeexample
    The Flame Chart view is similar to the Call Tree in that it graphically illustrates the call stack for a selected range. For example, in the screenshot below the drawCirc() function is taking over 25 milliseconds (ms) to complete, which is larger than the allotted time for frame generation to produce 60 frames per second.
    flamechartexample

    Performance profiles can be created, saved, imported, or deleted. In addition, multiple profiles can be opened at once to contrast and compare performance statistics between runs. Profiles can be created programmatically or using the console, by entering console.profile(“NameOfProfile”) to start a profile and console.profileEnd(“NameOfProfile”) to stop a profile. This allows you to fine-tune when profiling starts and stops within your code.
    consoleprofile
    You can find complete docs for the performance tools on MDN. These include a tour of the UI, reference pages for each of the main tools, and some examples in which we use the tools to diagnose performance problems in CSS animations and JavaScript-heavy pages.

    Additional features and improvements

    In addition to the new Performance tools we’ve also implemented many new convenience features — mostly inspired by direct feedback from developers via our UserVoice channel — and over ninety bug fixes, representing a ton of hard work over the last eight weeks from Firefox Developer Tools staff as well as many contributors. Please continue to submit your feedback.

    This video from Matthew “Potch” Claypotch shows off some the most requested feature implementations for Developer Edition 40.

    Network Monitor improvements

    As seen in the video above, the Network Monitor includes many improvements such data collection when the Network Tab is not active, and the ability to see quickly when an asset is loaded from the cache as opposed to the network.
    cached
    It is now possible to copy post data, URL parameters, and Request and Response headers using the context menu when selecting a row entry.
    postdata

    CSS docs integration

    Firefox Developer Tools now support integration with MDN documentation for CSS properties, providing more information for developers while they are debugging web app styling and layout. To access this feature, you can right-click (Ctrl + click on Mac) on CSS properties within the Inspector, and select “Show MDN Docs” from the context menu.
    mdncsslink

    Improved Inspector layout

    In the Inspector, whitespace in text node layout is cleaned up, providing a better view of your markup.
    whitespace

    Additional fixes

    Many additional fixes are also included, like improvements to the Animation Inspector, scroll into view context menu support and Inspector search improvements. To see all the bugs addressed in this release have a look at this big list in Bugzilla.

    We’d like to send a gigantic special thank you to all the contributors and individuals who reported bugs, tested patches, and spent many hours working to make Firefox Developer Tools impressive.

  4. Power Surge – optimize the JavaScript in this HTML5 game using Firefox Developer Edition

    Power Surge!

    The Firefox Developer Tools team wanted to find a fun way to show off the great performance tools we’ve just added to the Firefox Developer Edition browser. We partnered with Przemysław Sikorski (aka rezoner) author of Playground.js and the arcade puzzle game QbQbQb, to create “Power Surge,” a fun game which shows off how the new Performance tools can help developers find slow JavaScript code. The special twist is that the more you optimize the code in the game, the more ships and powers you win in gameplay!

    First off, check out this quick screencast from Mozilla engineer Harald Kirschner on how Power Surge works:

    To get going with Power Surge:

    We’d really like to hear back from you about Power Surge! Tweet to us at @FirefoxDevtools and @mozhacks to share your solutions.

  5. Developer Edition 40: Always active network monitoring, CSS rules filtering, and much more

    Firefox 40 was just uplifted, and we have a lot of updates to share. This release took a major effort by Developer Tools contributors to address feedback we’ve heard directly from people using our tools. Grab a copy of the Developer Edition browser and check it out.

    Experimental Multi-process Support: A Request

    When you update to Developer Edition 40, you’ll be prompted to opt in to test multi-process Firefox. Please consider helping us test this new feature and providing feedback around any issues you see.

    New in the Inspector

    • There is now a filter box in the CSS Rules view that lets you find rules that match a string. See the Filter Styles screencast or the screenshot below. (Development notes: 1120616 and 1157293.)

    Inspector Filter Styles Screenshot

    • There is a new CSS documentation tooltip for CSS properties. Right click on any property in the CSS Rules view and select “Show MDN Docs” to see more information about that property. (Development notes.)

    MDN Tooltip In Inspector Screenshot

    • Inspector search now includes results from iframes and also includes class / id results without the CSS prefix. (Development notes: 873443 and 1149346.)
    • There is a new CSS Filter Editor Tooltip added by Mahdi Dibaiee. Check out the CSS Filter Editor Tooltip screencast for a demo, or try it on the filter demos page in Developer Edition. (development notes)
    • The Animation Inspector has had some major updates. It now shows subtree animations, playback rate can be controlled, and it previews and highlights animated DOM nodes. (Development notes: 1155651, 1155653, and 1144615.)

    There are too many changes to list in this post, but here are a few more interesting updates you may come across in the Inspector:

    • The Box Model view has legends for the regions and tooltips to show which CSS rule invoked the computed value. (Development notes: 1141571 and 1151956.)
    • shift+clicking a color swatch switches between color unit formats in place. (Development notes.)
    • New Scroll Into View, Open Link in New Tab, Copy Link, Open In Style Editor, and Open in Debugger context menu items in the Markup View. (Development notes: 901250, 921102, and 1158822.)

    Network Monitor News

    Cached network requests in Network Monitor Screenshot

    Here’s a selection of other changes and improvements in this release:

    • New Copy Response, Copy URL parameters, and Copy Request/Response Headers context menu items on each request. (Development notes: 955933, 1150717, and 1150715.)
    • Search box to filter requests. (Development notes.)
    • IP address included in Domain tooltip for network monitor. (Development notes.)
    • Added access keys to the request context menu. (Development notes.)

    Web Console

    • New console method: console.dirxml(). (Development notes.)
    • New filter options in the web console to show console messages from workers. (Development notes.)
    • Quotes in strings are no longer added if logged via console.log. Thanks to new contributor Dmitry Sagalovskiy for adding this feature! (Development notes.)

    Debugger

    General

    Special thanks to all the people who contributed patches to Firefox Developer Tools this release! Here is a list of all the DevTools bugs resolved for Firefox 40. Kudos to the many contributors.

    Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, get in touch with the team at @FirefoxDevTools, or share your constructive feedback and feature requests on our Firefox Dev Tools feedback channel.

  6. Trainspotting: Firefox 38

    Trainspotting is a series of articles highlighting features in the latest version of Firefox, that are live now in production code, ready for you to use in your work. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

    Has it been six weeks already?? Firefox 38 is here, and with it come some snazzy new additions to the Web platform. Here are a few highlights:

    For a full list of changes and additions, take a look at the Firefox 38 release notes.

    Responsive Image Support

    Support for both the <picture> element and <img srcset> are now in a stable Firefox! There are lots of great articles available to get you familiar with the new techniques, and a polyfill available so you can take advantage of them today! There is one caveat for Firefox 38 – responsive images will load using the correct media queries, but presently do not respond to viewport resizing. This bug is being actively worked on and tracked here, and will be fixed in a near-future version of Firefox.

    You got WebSockets in my Web Worker!

    Firefox 38 now allows code running in a Web Worker to open up a WebSocket connection. This is great for games or other collaborative applications, which can now do their multiplayer/realtime logic in a separate thread from the UI.

    HTML5 <ruby> markup support

    Ruby Annotation

    Better typography for Japanese and Chinese language sites is now possible without clunky libraries or extensions by using <ruby> markup.

    BroadcastChannel- postMessage All the Windows!

    If you’re building a webapp with multiple tabs or windows, keeping them all in sync, apprised of events and state changes can be a pain. BroadcastChannel is a fully client-side message passing API that lets any scripts running on the same origin broadcast messages to their peers.

    // one tab
    var ch = new BroadcastChannel('test');
    ch.postMessage('this is a test');
    
    // another tab
    ch.addEventListener('message', function (e) {
        alert('I got a message!', e.data);
    });
    
    // yet another tab
    ch.addEventListener('message', function (e) {
        alert('Avast! a message!' e.data);
    });

    Developer Tools

    Network requests coming from XMLHttpRequest are now marked in the Web Console:

    XMLHttpRequest requests marked in the Web Console

    Need to grab a value from your page? The special copy method available in the Web Console has you covered:

    consolecopy

    But Wait

    There are tons more improvements and bug fixes in Firefox 38 I haven’t covered here – check out the Firefox 38 release notes, Developer Release Notes, or even the list of bugs fixed in this release for more information.

    Enjoy!

  7. Drag Elements, Console History, and more – Firefox Developer Edition 39

    Quite a few big new features, improvements, and bug fixes made their way into Firefox Developer Edition 39. Update your Firefox Developer Edition, or Nightly builds to try them out!

    Inspector

    The Inspector now allows you to move elements around via drag and drop. Click and hold on an element and then drag it to where you want it to go. This feature was added by contributor Mahdi Dibaiee.

    Back in Firefox 33, a tooltip was added to the rule view to allow editing curves for cubic bezier CSS animations. In Developer Edition 39, we’ve greatly enhanced the tooltip’s UX by adding various standard curves you can try right away, as well as cleaning up the overall appearance. This enhancement was added by new contributor John Giannakos.

    cubic

    The CSS animations panel we debuted in Developer Edition 37 now includes a time machine. You can rewind, fast forward, and set the current time of your animations.

    Console

    Previously, when the DevTools console closed, your past Console history was lost. Now, Console history is persisted across sessions. The recent commands you’ve entered will remain accessible in the next toolbox you open, whether it’s in another tab or after restarting Firefox. Additionally, we’ve added a clearHistory console command to reset the stored list of commands.

    The shorthand $_ has been added as an alias for the last result evaluated in the Console. If you evaluated an expression without storing the result to a variable (for example), you can use this as a quick way to grab the last result.

    We now format pseudo-array-like objects as if they were arrays in the Console output. This makes a pseudo-array-like object easier to reason about and inspect, just like a real array. This feature was added by contributor Johan K. Jensen.

    pseudo-array

    WebIDE and Mobile

    WiFi debugging for Firefox OS has landed. WiFi debugging allows WebIDE to connect to your Firefox OS device via your local WiFi network instead of a USB cable. We’ll discuss this feature in more detail in a future post.

    WebIDE gained support for Cordova-based projects. If you’re working on a mobile app project using Cordova, WebIDE now knows how to build the project for devices it supports without any extra configuration.

    Other Changes

    • Attribute changes only flash the changed attribute in the Markup View, instead of the whole element.
    • Canvas Debugger now supports setTimeout for animations.
    • Inline box model highlighting.
    • Browser Toolbox can now be opened from a shortcut: Cmd-Opt-Shift-I / Ctrl-Alt-Shift-I.
    • Network Monitor now shows the remote server’s IP address and port.
    • When an element’s highlighted in the Inspector, you can now use the arrow keys to highlight the current element’s parent (left key), or its first child, or its next sibling if it has no children, or the next node in the tree if it has no siblings (right key). This is especially useful when an element and its parent occupy the same space on the screen, making it difficult to select one of them using only the mouse.

    For an even more complete list, check out all 200 bugs resolved during the Firefox 39 development cycle.

    Thanks to all the new developers who made their first DevTools contribution this release:

    • Anush
    • Brandon Max
    • Geoffroy Planquart
    • Johan K. Jensen
    • John Giannakos
    • Mahdi Dibaiee
    • Nounours Heureux
    • Wickie Lee
    • Willian Gustavo Veiga

    Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice, or get in touch with the team at @FirefoxDevTools on Twitter.

  8. Trainspotting: Firefox 37, Developer Edition and More

    Welcome to Trainspotting, a new series on Mozilla Hacks designed to help the busy Web developer keep up with what’s new, what’s changed and what is coming soon in all of the Firefoxes, the Web platform, and the tools for building the Web!

    Mozilla develops Gecko and Firefox on a “train model” – we branch the code and ship a release on a time-based schedule (every six weeks). If a feature is not finished, it’s reverted or disabled and has to, as we say, ride the next train. This means we ship new features, performance improvements, and bug fixes to users every six weeks, instead of having to wait up to 18 months.

    Trainspotting will publish every six weeks when we branch the code – and we’ll point out any changes that might require action or cause compatibility issues, as well as new features that Web developers would want to take advantage of.

    Firefox 37

    For a detailed list of all noted changes in the release, check out the official release notes for Firefox 37. Below is a list of notable features, links to documentation, and anything that requires action by developers or site operators.

    Desktop Features

    • A subset of the Media Source Extensions (MSE) API has been implemented and is enabled to allow native playback of HTML5 video on websites such as YouTube. You can read about the various MSE APIs and their usage on MDN.
    • Bing search now uses HTTPS. Hurray for private and secure searching!
    • Heartbeat is a new feedback feature in Firefox desktop: Each day a random subset of Firefox users will be shown a notification bar with an opportunity to provide feedback on their experience. You can see screenshots and read more about how it works on the Heartbeat project page.

    Firefox for Android

    This time around, Firefox for Android is getting a security and stability release. The biggest user-facing changes—improved performance of file downloads, and the addition of some new locales: Albanian, Burmese, Lower Sorbian, Songhai, Upper Sorbian, Uzbek. Read the full list of security fixes for Firefox Android 37 and the full release notes.

    HTML5 & Web Platform

    There are a bunch of new Web platform features that you can now use in production content in Firefox 37, and here are a few examples:

    Keep reading the Firefox 37 for Developers article on MDN for a detailed look at all the rest.

    Developer Tools

    If you’re using Firefox Developer Edition these additions won’t be news, but if you’ve been doing your development in the release build, there are a few new features to note:

    Security

    Firefox 37 has a bunch of security changes. Most of these do not require any action, however if you are a site operator you should definitely look to see if any of these changes impact you. Big thanks to David Keeler, security engineer for Firefox, for his help deciphering this section of the release notes.

    • We removed support for DSA in certificates and TLS, because we found that almost nobody was using these. If you’re a site operator and your certificate was signed with a DSA algorithm, contact your CA and get a new certificate. You can check with `openssl x509 -in {certificate file} -text -noout` and search for “Signature Algorithm.” If you do have one of these certificates and do not change it, users will see an override-able error.
    • HTTP/2 AltSvc is temporarily disabled due to a bug. We implemented HTTP/2 AltSvc support for opportunistic encryption. This feature allows encryption over TLS for unauthenticated connections that would otherwise be clear text. Configuration is very simple, and Patrick McManus has written instructions for how to set it up on your server.
    • We have disabled insecure TLS version fallback. If a secure site isn’t working, you can try setting the “security.tls.version.fallback-limit” preference in about:config to 1 and see if it works then. If you see this anywhere, please file a Tech Evangelism bug, noting the URL of the site, so we can work with the operators to update it. Site operators should make sure their servers aren’t TLS-intolerant, which you can do with the SSL Labs tool.
    • Users can now report SSL connection problems for a variety of non-certificate-related errors. For example, if a user encounters a non-override-able TLS error, they can now send a report to Mozilla directly from the error page. The information in the report consists of the domain you were trying to reach, the certificates the server sent, the time, which error was encountered, and some user agent information. We use this information to work with site operators to fix their configurations, and to improve our software that detects these issues, so please do send reports. Check out a screenshot of what this looks like.
    • TLS False Start optimization now requires a cipher suite using AEAD construction. If you’re running a server and false start isn’t working as expected, try using an AEAD cipher suite. Learn more about AEAD at Wikipedia and in RFC 5288. The only AEAD cipher suite that Firefox supports at this time is AES-GCM.
    • We now log usage of weak ciphers to the web console. For example, if you visit a site with a SHA-1 certificate with the web console open you’ll now see a message like, “This site makes use of a SHA-1 Certificate; it’s recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1. Learn more…” If you run a site and your certificate was signed with SHA-1, get a new certificate from your CA.

    Firefox Beta

    In six short weeks Beta will be available for general release, becoming Firefox 38. Here’s some of what’s coming your way:

    • All Firefox preferences are now in a new tab-based UI.
    • Improved page-load times with speculative connection warmup.
    • MSE support on Mac OS X.
    • EME support for encrypted media playback.
    • Web platform features: WebSockets in Web Workers, KeyboardEvent.code, and the BroadcastChannel API.

    Read the Firefox 38 Beta release notes for the full list.

    Firefox Developer Edition

    This release of Firefox Developer edition (which will be Firefox 39) is frankly kind of ridiculous. The developer tools are getting precariously close to something indistinguishable from magic. Huge props to the developer tools team for what you’re about to see.

    • Developer Tools: Wi-Fi debugging of Firefox OS devices from WebIDE, drag and drop of nodes in the Inspector’s markup view, Web Console input history persistence, localhost works with WebSocket connections when you’re offline, and the cubic bezier tooltip now shows a gallery of pre-sets you can choose from to make your CSS animations super slick.
    • Web platform features include the “switch” role in Aria 1.1, CSS scroll snap points, Cache API, Fetch API, <link rel=”preconnect”> and more.

    Read the full release notes for this release of Firefox Developer Edition.

    Nightly

    The nightly branch of Firefox is where a lot of features are in active development. It’s a place where you can test experimental Web APIs and see user-facing browser features that are not yet ready for hundreds of millions of users. You might see a crash or two, you might lose you session data, but you also might experience the vision and wonder of what the future holds. It’s the Mos Eisley of browsers – a dangerous place, but we stick around for the action.

    There are a number of features that have landed and are shipping nightly builds either enabled by default or by pref:

    • E10s – Web content runs in a separate process from the browser UI.
    • Partial implementation of Service Workers.
    • Shumway – Flash implemented in JavaScript is enabled for some sites.

    Thus concludes the first edition of Trainspotting. Let us know what you think in the comments, and what you’d like to see more of!

  9. Using the Firefox DevTools to Debug fetch() on GitHub

    Firefox Nightly recently added preliminary support for Fetch, a modern, Promise-based replacement for XMLHttpRequest (XHR). Our initial work supported most of the Fetch Specification, but not quite all of it. Specifically, when Fetch first appeared in Nightly, we hadn’t yet implemented serializing and de-serializing of FormData objects.

    GitHub was already using Fetch in production with a home-grown polyfill, and required support for serializing FormData in order to upload images to GitHub Issues. Thus, when our early, incomplete implementation of Fetch landed in Nightly, the GitHub polyfill stepped out of the way, and image uploads from Firefox broke.

    In the 15-minute video below, Dan Callahan shows a real-world instance of using the Firefox Developer Tools to help find, file, and fix Bug 1143857: “Fetch does not serialize FormData body; breaks GitHub.” This isn’t a canned presentation, but rather a comprehensive, practical demonstration of actually debugging minified JavaScript and broken event handlers using the Firefox DevTools, reporting a Gecko bug in Bugzilla, and ultimately testing a patched build of Firefox.

    Use the following links to jump to a specific section of the video on YouTube:

    • 0:13 – The error
    • 0:50 – Using the Network Panel
    • 1:30 – Editing and Resending HTTP Requests
    • 2:02 – Hypothesis: FormData was coerced to a String, not serialized
    • 2:40 – Prettifying minified JavaScript
    • 3:10 – Setting breakpoints on event handlers
    • 4:57 – Navigating the call stack
    • 7:54 – Setting breakpoints on lines
    • 8:56 – GitHub’s FormData constructor
    • 10:48 – Invoking fetch()
    • 11:53 – Verifying the bug by testing fetch() on another domain
    • 12:52 – Checking the docs for fetch()
    • 13:42 – Filing a Gecko bug in Bugzilla
    • 14:42 – The lifecycle of Bug 1143857: New, Duplicate, Reopened, Resolved
    • 15:41 – Verifying a fixed build of Firefox

    We expect Firefox Developer Edition version 39 to ship later this month with full support for the Fetch API.

  10. Firefox Developer Edition 38: 64-bits and more

    In celebration of the 10th anniversary of Firefox, we unveiled Firefox Developer Edition, the first browser created specifically for developers. At that time, we also announced plans to ship a 64-bit version of Firefox. Today we’re happy to announce the next phase of that plan: 64-bit builds for Firefox Developer Edition are now available on Windows, adding to the already supported platforms of OS X and Linux.

    A 64-bit build is a major step toward giving users rich, desktop-quality app experiences in the browser. Let’s also take a look at at some of the other features that make this a release worth noting. If you haven’t downloaded the Developer Edition browser yet, it’s a fine time to give it a try. Here’s why:

    DevEditionEpic

    Unreal demo in Win 64-bit Developer Edition

    Run larger applications

    A 32-bit browser is limited to 4GB of address space. That address space is further whittled down by fragmentation issues. Meanwhile, web applications are getting bigger and bigger. Browser-based games that deliver performant, native-like gameplay, such as those built with Epic Games’ Unreal Engine, are often much larger than we expect from traditional web applications. These games ship with large assets that must be stored in memory so they can be synchronously loaded.

    For some of the largest of these apps, a 64-bit browser means the difference between whether or not a game will run. For example, when porting to asm.js it’s recommended to keep heap size to 512mb in a 32-bit browser. That goes up to 2GB in a 64-bit version of Firefox.

    Emscripten helps port C and C++ code to run on the Web and deliver native-like performance. For an in-depth look at how assets are stored and accessed using a variety of methods in asm.js/emscripten built applications, read Alon Zakai’s post on Synchronous Execution and Filesystem Access in Emscripten.

    Gain faster execution and increased security

    64-bit Firefox just goes faster. We get access to new hardware registers and instructions to speed up JavaScript code.

    For asm.js code, the increased address space also lets us use hardware memory protection to safely remove bounds checks from asm.js heap accesses. The gains are pretty dramatic: 8%-17% on the asmjs-apps-*-throughput tests as reported on arewefastyet.com.

    The larger 64-bit address space also improves the effectiveness of ASLR (address space layout randomization), making it more difficult for web content to exploit the browser.

    Firefox Developer Edition additions and improvements

    Beyond the new 64-bit capabilities, the Firefox 38 Developer Edition release implements many new features, as it does every 6 weeks when it is updated. Some of these are described below. For all the details and associated bugs in progress, you’ll want to visit the release notes.

    WebRTC changes

    In a post about WebRTC from 2013, we documented some workarounds and limitations of WebRTC mozRTCPeerConnection. One fix involved adding multiple MediaStreams to one mozRTCPeerConnection and renegotiating on an existing session.

    The new version of Firefox Developer Edition fixes these issues. We now support adding multiple media streams (camera, screen sharing, audio stream) to the same mozRTCPeerConnection within a WebRTC conversation. This allows the developer to call the addStream method for each additional stream, which in turn triggers the onAddStream event for the clients.

    Renegotiation allows streams to be modified during a conversation, for example sharing a screen stream during a conversation. This is now possible without re-creating a session.

    webrtcexample

    WebRTC with multiple streams

    Last week we announced that WebRTC requires Perfect Forward Secrecy (PFS) starting in Firefox 38. We’ll dig a little deeper into details of our WebRTC implementation in an upcoming article. Stay tuned.

    The BroadcastChannel API

    The BroadcastChannel API allows simple messaging between browser contexts with the same user agent and origin is now available. Here’s more detail and some ideas for how to use the BroadcastChannel API in Firefox 38.

    Support for KeyboardEvent.code

    KeyboardEvent.code is now enabled by default. The code attribute give a developer the ability to determine which physical key is pressed without keyboard layout or keyboard state modifications.

    keyboard.code

    KeyboardEvent code attribute

    For more examples of uses cases see the motivation section of the UI Events Specification (formerly DOM Level 3 Events).

    XHR logging

    The Network Monitor already displays a great deal of information on XMLHttpRequests, but often the console is used to debug code along with network requests. In the latest Developer Edition of Firefox, the console now supports filtering XMLHttpRequests within console logging.

    xhrnet

    Network Monitor XHR Request

    xhrfilter

    XHR logging in console

    Let us know what you think

    Many additional improvements are available in this version. Download it now. Tell a friend.

    As always, you can take a close look at the Developer Edition release notes. Please be sure to share your feedback and feature ideas in the Firefox Developer Tools UserVoice channel.