Mozilla

Firefox Articles

Sort by:

View:

  1. Firefox Developer Tool Features for Firefox 23

    Another uplift has left the building and it’s time to take a look at what’s in Firefox Developer Tools in Firefox 23 currently Aurora, our pre-beta channel. You can download it from the Aurora Download page today. Firefox 23 is currently scheduled to hit the release channel on Tuesday August 6th, 2013.

    Episode XXIII is a barn-storming, hair-raising spectacle of incredible epicness that is sure to delight and amuse. If you want a sneak peak at features under active development, give Nightly a try.

    Network Monitor

    There’s a new tool in the toolbox: The Network Monitor. It’s a classic waterfall timeline view of network activity on a site. This data’s been available since Firefox 4 via the Web Console, albeit in a less visually pleasing way.

    Please file bugs under the Developer Tools: Netmonitor component in Bugzilla.

    Remote Style Editor

    In Firefox 23, you can now edit styles via a Remote Connection on a suitably-enabled device. This should be great help for App Developers interested in testing and debugging styles on a mobile device over the remote protocol in real time.

    As of the time of this writing, the Remote Style Editor should be compatible with Firefox for Android version 23, also scheduled for uplift to Aurora. We are working on incorporating the Style Editor Actors for the remote protocol into the Firefox OS Simulator and investigating what it will take to backport them to Firefox OS release.

    Options Panel

    We’ve added a Gear menu to the Toolbar containing an Options panel for turning tools on or off. As we add more stuff, this is going to be a popular place to manage preferences related to the Developer Tools.

    Currently, there are options to turn on the Light or Dark theme for the tools and enable Chrome Debugging.

    Initial SourceMap Support for Debugger Protocol

    The first pieces of SourceMap support for the Debugger have landed and we are now able to serve up SourceMapped JS files for your debugging pleasure. Soon to follow will be column support for breakpoints allowing you to debug minified JS with a SourceMap.

    Watch for the upcoming blog post by Nick Fitzgerald on Hacks explaining the magic.

    Variables View Everywhere

    Our Variables View is an improved Object Inspector and an integral part of our Debugger. Naturally, we wanted to put it in Everything. So now the Web Console and Scratchpad have a Variables View. Use the ESC key to close it.

    Browser Console

    If you have Chrome Debugging turned on, check out the Browser Console. It’s a replacement for the ancient Error Console and gives you a Chrome-context command line for executing JavaScript against the browser. It’s nice and should be enabled by default in Firefox 24.

    GCLI Appcache Command

    We finally have a little something for developers trying to use App Cache to store offline data. A new appcache command for the Graphical Command Line. You can read about it in Mike Ratcliffe’s The Application Cache is no longer a Douchebag.

    Web Console in Debugger Frame

    The Web Console is now fully-remoted (and has been since version 18). It now makes use of the Debugger’s current Frame if paused on a breakpoint.

    Multiple Paused Debuggers

    You can now debug multiple tabs at the same time using the Script Debugger. Previously, when attempting to use the debugger on two separate tabs, you’d be given a notification to resume the debugger in the other tab. Now you can debug as many tabs as you like.

    There is one caveat to this awesome power, however. Due to the nested event loops each Debugger creates, you have to resume each tab in the order in which they were paused. Debug carefully and always carry a big stack.

    You can see a comprehensive list of bugfixes in table form in Firefox 23 Developer Tools Fixes.

  2. HiDPI support, HTML5 notifications, Parallel JS, asm.js and more – Firefox Development Highlights

    Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    HiDPI support

    We’re happy to say that ico/icns with multiple images are now supported: the highest resolution icon is now used on HiDPI/Retina displays.

    Favicon implementation is described in bug 828508 and ico/icns is described in bug 419588.

    Performance improvements/Snappy:

    Numerous performance improvements have been made, such as faster startup, better scrolling on touchpads and smoother animations.

    The most important improvement, however, is probably multithreaded image decoder. The result should be faster page loads and tab switching. All the nitty-gritty detalis are described in bug 716140.

    HTML5

    When it comes to the world of HTML5 & friends, we have some good additional support:

    <input type=”range”>

    We now support the <input type="range"> element in forms. To style it, you can use the ::-moz-range-progress:

    ::-moz-range-progress {
        background: #f00;
    }
     
    <input type="range">

    You can see this <input type=”range”> demo in action on jsFiddle.

    HTML5 notifications

    HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification:

    function authorizeNotification() {
        Notification.requestPermission(function(perm) {
            alert(perm);
        });
    }
     
    function showNotification() {
        var notification = new Notification("This is a title", {
            dir: "auto",
            lang: "",
            body: "This is a notification body",
            tag: "sometag",
        });
    }

    See the HTML5 notification demo in action on jsFiddle.

    WebAudio API activated by default

    WebAudio API has been activated by default in Firefox Nightly. Testers welcome, though there are still work to be done before it can be released.

    JavaScript

    Parallel JS

    The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.

    asm.js

    We’re happy to say that asm.js is now in Firefox, scheduled to be released in Firefox 22! Luke Wagner has written more about it in asm.js in Firefox Nightly.

    ES6 Arrow function syntax

    We now support the ES6 Arrow function syntax

    let square = x => x*x;
    console.log(square(3));

    CSS

    @supports activated by default

    We plan on releasing this with Firefox 22. More about @supports on MDN.

    min-width and min-height ‘auto’ keyword

    min-width and min-height 'auto' keyword is no more supported. It has been removed from CSS3 Flexbox. More about that in bug 848539.

    CSS Flexbox has been re-enabled

    Happy to let you know that CSS Flexbox has been re-enabled by default in Firefox 22, which is currently in Firefox Aurora!

  3. Developer Tools Update – Firefox 22

    This is the first in a series of posts published on or about the time a new Firefox version graduates from ‘Nightly’ status and becomes Firefox Aurora. We think that is the absolute best time to let you know about all the cool new developer-related features that have landed in the last 6 weeks, and we encourage you to check out Firefox Aurora if you haven’t already.

    What’s that font?

    First up, a handy new pane has been added to the Inspector that lets you inspect whatever font rules are applied to the selected html node, or optionally you can view all fonts being used on the page in a single view:

    Web_fonts_example

    We see this as being particularly helpful for fine-tuning cross-platform font differences, or testing how web fonts are working in your app.

    Let’s re-paint

    The developer toolbox also has a new mode that visualizes what parts of the page are being re-painted by Firefox using a colorful ‘flashing’ effect. I recorded a quick 1-minute screencast to give you an idea of how it works:

    In modern web apps we tend to rely heavily on JS libraries and CSS animations to bring user experiences alive, but in order to get the experience we need it’s important to understand how hard the browser is working to display the page. Visual Paint mode seeks to give insight into all of this.

    Toolbox on the side

    Wide-screen laptop and desktop LCD monitors are now the norm so we added a nice way to switch the Toolbox location to the right side of the browser window in addition to the bottom of the window or as a separate window:

    dock-to-side
  4. Ambient Light Events and JavaScript detection

    I think that one of the most interesting things with all WebAPIs we’re working on, is to interact directly with the hardware through JavaScript, but also, as an extension to that, with the environment around us. Enter Ambient Light Events.

    The idea with an API for ambient light is to be able to detect the light level around the device – especially since there’s a vast difference between being outside in sunlight and sitting in a dim living room – and adapt the user experience based on that.

    One use case could be to change the CSS file/values for the page, offering a nicer reading experience under low light conditions, reducing the strong white of a background, and then something with more/better contrast for bright ambient light. Another could be to play certain music depending on the light available.

    Accessing device light

    Working with ambient light is quite simple. What you need to do is apply a listener for a devicelight event, and then read out the brightness value.

    It comes returned in the lux unity. The lux value ranges between low and high values, but a good point of reference is that dim values are under 30 lux, whereas really bright ones are 10,000 and over.

    window.addEventListener("devicelight", function (event) {
        // Read out the lux value
        var lux = event.value;
        console.log(lux);});

    Web browser support

    Ambient Light Events are currently supported in Firefox on Android, meaning both mobile phones and tablets, and it’s also supported in Firefox OS. On Android devices (the ones I’ve tested), the sensor is located just right to the camera facing the user.

    It is also a W3C Working Draft, following the type of other similar events, such as devicemotion, so we hope to see more implementations of this soon!

    Demo

    Dmitry Dragilev and Tim Wright recently wrote a blog post about the Ambient Light API, with this nice demo video:

    You can also access the demo example directly, and if you test in low light conditions, you’ll get a little music. Remember to try it out on a supported device/web browser.

  5. Firefox Developer Tools work week wrap-up

    Last week in Sunnyvale we had the first Developer Tools work week to include the recently-integrated Jetpack team ( for a slightly different take on the week, see Paul’s post. ). And what a week! I was a bit shocked by how many things I thought were just interesting ideas suddenly became real things that actually worked. By Friday morning we had some amazing demos from the team, which I will try to group together according to theme:

    Remote everything, everywhere.

    Within the next 3 months we will land remote protocol support for all of the development tools we ship. The remote protocol is a network client/server protocol that exposes the developer tools to each other external tools like editors as well as Firefox on Android and Firefox OS. We had some awesome demos that leverage or extend these capabilities:

    • Based on Heather Arthur’s work on implementing remote style editing, Paul Rouget amazed us and soon many others with remote CSS editing from popular editor Sublime Text 2: (Tweet, Youtube, Github).
    • Joe Walker showed off how to run gcli commands remotely between different instances of Firefox Desktop.
    • Jim Blandy walked us through some important platform fixes that will enable content process debugging on Firefox OS. This will allow us to support remote on-device debugging of B2G apps.

    Revolutionary Dev Tools hacks

    Many team members got a ton of work done on their existing projects and showed us some great enhancements by the end of the week:

    • Mihai Sucan showed off progress on the Global Console, which now understands all network requests and also supports stdin/stdout and some handy timing utilities.
    • Anton Kovalyov showed off an initial integration of Codemirror as the source editor for the devtools, replacing the current Orion editor.
    • Nick Fitzgerald got sourcemaps working with the debugger and gave us a demo of Coffeescript debugging.
    • Joe Walker re-factored gcli commands to de-couple processing from presentation, making it much easier to implement multiple commands that use a common data formatter.
    • Last but not least, Victor Porov walked us through a fully-operational Network Panel that is nearly ready to land!
    • Stephen Shorlander showed off some great first steps on defining what in-browser web app development might look like.

    Developer tools + Jetpack == Super Powers!

    On Tuesday Paul Rouget walked us through the fledgling developer tools API and challenged the Jetpack team to see how working with the developers could be made simpler. By Friday Irakli answered the challenge by showing us a Jetpack add-on called ‘Add-on Pad’ for live-coding SDK-based add-ons.

    Dave Camp had a slightly different take on Jetpack’s possibilities and by the end of the week was able to show off a version of the Developer Tools code-base that could be dynamically re-loaded from disk using Jetpack’s CommonJS loader, without the need to re-build or even restart Firefox.

    Not to be outdone, Dave Townsend made some tweaks to tilt mode to expose it to add-ons and even scratchpad hacks to change how tilt visualizes a page based on arbitrary code that could be injected either via an add-on or from scratchpad.

    Paul also released a new version of his excellent Firefox Terminal add-on recently which you should go install it immediately! Right now! I’ll still be here when you get back.

    Add-on developer love

    The developer tools team has been focused like a laser on improving life for web developers, but Firefox itself is created and extended with web technologies like JS and CSS. At this first Devtools work week that included the Jetpack team we saw some really promising work:

    • Eddy Bruel tackled several bugs I don’t completely understand and by the end of the week showed us debugging for almost all browser chrome and add-on Javascript code. There are still some known limitations to work through ( not all add-ons or content scripts can be debugged currently ) but the Browser is already very useful to developers as of today’s Nightly build.
    • Mihai Sucan and Alexandre Poirot made changes to both the SDK and the Global Console that will pipe any calls to console.log in Jetpack code to the Global Console, greatly improving ‘printf’-style debugging for add-on developers.

    Some of these hacks landed last week during the work week, many will be landing over the next couple weeks. If you’d like to get involved in driving these features home, find us in #devtools and #jetpack on irc.mozilla.org or the Developer Tools project mailing list at mozilla.dev.developer-tools.

  6. Font Inspector and <time> and <data> elements – Firefox Development Highlights

    Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    Font Inspector

    A Font Inspector is now available in the Firefox DevTools.

    image

    In the Firefox Inspector, a “Fonts” panel is now available. It exposes different information about the @font-faces used in the page:

    • Font name and font family
    • Its location (system vs. remote, and URL)
    • A preview (you can change it)
    • @font-face code

    HTML5 and

    We have implemented support for two new elements:

    <time> element

    The HTML time element (

    Example:

    <p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

    More information can be found in the MDN documentation for the <time> element, and in the W3C specification.

    <data> element

    The data element represents its contents, along with a machine-readable form of those contents in the value attribute. The value attribute must be present and its value must be a representation of the element’s contents in a machine-readable format.

    The <data> element adds a new attribute, value, which contains a string representation of the data. In script we can use the .value property to get the reflected value:

    Example:

    <data id="user" value="humphd">David Humphrey</data>
    document.getElementById("user").value; // "humphd"

    It’s available in the WHATWG specification, and David Humphrey’s wrote more about it in HTML5 time and data elements in Firefox.

  7. WebRTC enabled, H.264/MP3 support in Win 7 on by default, Metro UI for Windows 8 + more – Firefox Development Highlights

    Time again for looking at the latest progress with Firefox. These posts are part of our Bleeding Edge and Firefox Development Highlights series – take note that most examples only work in Firefox Nightly (and could be subject to change).

    WebRTC enabled by default

    Previously, you needed to go to about:config in Firefox and set the media.peerconnection.enabled option to true, but now it’s enabled by default. This is a huge step forward, to be able to run WebRTC directly in a web browser without it needing any special settings or configuration.

    For more details behind this decision, please read Pref on WebRTC by default.

    Want to get started with WebRTC? Then we recommend our article Cross-browser camera capture with getUserMedia/WebRTC.

    Metro UI

    The new Firefox User Interface for Windows 8 has landed (if you had Firefox Nightly as your default browser, reset that permission to see the new UI).

    There are more screenshots available too.

    H.264 & MP3 support enabled by default in Windows 7

    We talked about H.264 & MP3 support before, and now that support is activated by default.

    We are still working on supporting Mac OS X and Linux.

    WebAudio API progress

    We are working on implementing the WebAudio API, and the first parts of support has just started appearing.

    It’s available in about:config in the media.webaudio.enabled preference – set it to true to enable it and be able to access things such as AudioContext.decodeAudioData.

    Crypto API: window.crypto.getRandomValues

    If you provide an integer-based TypedArray (i.e. Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, or Uint32Array), window.crypto.getRandomValues is going fill the array with cryptographically random numbers:

    /* assuming that window.crypto.getRandomValues is available */
     
    var array = new Uint32Array(10);
    window.crypto.getRandomValues(array);
     
    console.log("Your lucky numbers:");
    for (var i = 0; i < array.length; i++) {
        console.log(array[i]);
    }

    canvas: ctx.isPointInStroke

    This has been uplifted to Firefox 19 Beta.

    From the WHATWG mailing list:

    “We have recently implemented isPointInStroke(x,y) in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=803124). This is a parallel to isPointInPath(x,y) and returns true if the point is inside the area contained by the stroking of a path.”

    JavaScript: Math.imul

    Math.imul allows for fast 32-bit integer multiplication with C-like semantics. This feature is useful for projects like Emscripten.

    Polyfill:

    function imul(a, b) {
        var ah  = (a >>> 16) & 0xffff;
        var al = a & 0xffff;
        var bh  = (b >>> 16) & 0xffff;
        var bl = b & 0xffff;
        // the shift by 0 fixes the sign on the high part
        return (al * bl) + (((ah * bl + al * bh) << 16) >>> 0);
    }
  8. Firefox Development Highlights – H.264 & MP3 support on Windows, scoped stylesheets + more

    Time for the first look this year into the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    H.264 & MP3 support on Windows

    Firefox for Android and Firefox OS already support H.264 and MP3. We are also working on bringing these formats to Firefox Desktop. On Windows 7 and above, you can already test it by turning on the preference media.windows-media-foundation.enabled in about:config. Decoding is done on the OS side (no decoder included in Firefox source code, not like WebM or Ogg Theora). For Linux and Mac, work is in progress.

    The new Downloads panel has been enabled

    We have now enabled the new Downloads panel:

    Scoped style attribute

    It’s now possible to define scoped style elements. Usually, when we write a stylesheet, we use <style>...</style>, and CSS code is applied to the whole document. If the <style> tag is nested inside a node (let’s say a <div>), and the <style> tag includes the scoped attribute (<style scoped>), then the CSS code will apply only to a subtree of the document, starting with the parent node of the <style> element. The root of the subtree can also be referred via the :scope pseudo-class.

    Demo

    Scoped style demo support on JS Bin.

    Our friends over at HTML5Rocks have also written about it in A New Experimental Feature: scoped stylesheets.

    @supports and CSS.supports

    In Firefox 17, we shipped the @supports CSS at-rule. This lets you define specific CSS code only if some features are supported. For example:

    @supports not (display: flex) {
      /* If flex box model is not supported, we use a different layout */
      #main {
          width: 90%;
      }
    }

    In Firefox 20, it’s now possible to do the same thing, but within JavaScript:

    if (CSS.supports("display", "flex")) {
      // do something relying on flexbox
    }
  9. Firefox Development Highlights – Per Window Private Browsing & Canvas’ globalCompositeOperation new values

    On a regular basis, we like to highlight the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    Per Window Private Browsing

    Private browsing is very useful for web developers. A new private session doesn’t include existing persistent data (cookies and HTML5 storage). It’s convenient if we want to test a website that stores data (login and persistent informations) without cleaning every time these cached data, or if we want to login to a service with 2 different users.

    Until now, when entering Private Browsing in Firefox, it was closing the existing session to start a new one. Now, Firefox will keep the current session and open a new private window. You can test it in Firefox Nightly (to be Firefox 20). There’s still some frontend work to do, but the feature works.

    Canvas’ globalCompositeOperation new values

    The ‘globalCompositeOperation’ canvas property lets you define how you want canvas to draw images over an existing image. By default, when canvas draws an image over existing pixels, the new image is just replacing the pixels. But there are other ways to mix pixels. For example, if you set ctx.globalCompositeOperation = "lighter", pixel color values are added, and it creates a different visual effect.

    There are several effects available, and more on them can be found in globalCompositeOperation on MDN.

    Rik Cabanier from Adobe has extended the Canvas specification to include more effects. He has also implemented these new effects in Firefox Nightly. These new effects are called “blend modes”. These are more advanced ways of mixing colors.

    Please take a look at the list of these new blending modes.

    And here’s an example of how to use them:

    JS Bin demo.

    If you don’t use Firefox Nightly, here is a (long) screenshot:

    image

  10. Firefox Development Highlights: video.playbackRate and download attribute

    Here are the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    <video>: support for custom playbackRate

    Setting video.playbackRate changes the “video speed”. 1.0 is regular speed, 2.0 is 2 times faster. From the MDN documentation on HTMLMediaElement:

    The default playback rate for the media. 1.0 is “normal speed,” values lower than 1.0 make the media play slower than normal, higher values make it play faster.

    Example:

    <video src="v.webm" id="v" controls autoplay></video>
    <button onclick="fastForward()">fast foward</button>
    <script>
      fastFoward() {
        v.playbackRate = 2;
      }
    </script>

    Interactive demo:

    video playbackRate demo

    <a> “download” attribute

    From Downloading resources in the Living standard at Whatwg.org:

    In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.

    This attribute is particularly useful with blobs. With Blobs, You can create files in JavaScript. A binary blob can be an image built in a canvas element for example. Linking binary blobs to a <a> element (with a URL constructor) and marking this <a> element as downloadable with this new attribute, the user will be able to save the blob as a file on his hard-drive.

    Example from Tom Schuster’s blog post about his work on the HTML5 download attribute: ]

    var blob = new Blob(["Hello World"]);
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.download = "hello-world.txt";
    a.textContent = "Download Hello World!";

    It has also been covered on HTML5Rocks in Downloading resources in HTML5.