By Dan Callahan, Nick Fitzgerald
Firefox Developer Edition 44, released last week, includes a brand new memory tool to help you understand how your web applications are using and retaining memory. This is especially useful for developers targeting the mobile web, and thus working with constrained resources. Baptiste Kaenel, a freelance Creative Designer and Mozilla community member from France, put together a fantastic video demonstrating how to use this powerful new tool.
The Memory tool works by taking snapshots of everything in memory, and presenting them as a tree/table with various grouping settings. By default, the contents are grouped by “coarse type,” where each thing in memory falls into one of four classifications:
- Objects: JavaScript objects. Further grouped by each object’s internal [[Class]] name.
- Scripts: The JavaScript source text loaded by the web application and its resulting executable machine code produced by SpiderMonkey’s JIT compiler, IonMonkey.
- Strings: JavaScript strings used by the web application.
- Other: Miscellaneous structures that do not fit in the above categories.
You can also group the snapshot by “object class,” which groups by their JavaScript [[Object]] class, or by “internal type,” which groups things by their C++ type names. This latter view is mostly useful for Firefox platform developers.
Perhaps most interesting is the fourth and final grouping option: “allocation stack.” You have to turn this option on manually by ticking the “record allocation stacks” checkbox at the top of the Memory panel, since tracking allocations can degrade the application’s performance while the box is checked. The payoff, however, is worth it: this view groups the things in the heap by the source location in your JavaScript code. Unlike other groupings, this view directly ties items in memory back to the code that actually created them.
The list of snapshots also includes the total MB of memory accounted for in the snapshot. You can take several snapshots to help determine at a glance whether your application’s memory usage is growing or shrinking over time.
To learn more, check out the Memory tool documentation on MDN, and remember, we want to hear from you! Download Firefox Developer Edition today, and let us know what tools or enhancements you want to see next by leaving a comment or tweeting at @FirefoxDevTools.
About Dan Callahan
Engineer with Mozilla Developer Relations, former Mozilla Persona developer.
About Nick Fitzgerald
I like computing, bicycles, hiphop, books, and pen plotters. My pronouns are he/him.
Thanks! Please check your inbox to confirm your subscription.
If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
4 comments
- Valentin
Thanks a lot for this tool ! It already helped me a lot to find a few memory leak in a small project of mine.
Quick question : I guess it’s not easy, but is it planned to add a graphic visualization of memory usage (like the performance tool) ? It could be slow, but my goal is to identify how the memory size behave in function of real time actions.
Yep! It’s in the works right now 🙂
Pretty sure Chrome already has this… right?
Thanks a lot for this tool ! I
Comments are closed for this article.
Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike License v3.0 or any later version.
@chrisbhoffman
Mar 20, 2012, 4:00 am EST | 2 min read
Firefox 11 added two new web developer tools to Firefox’s already impressive arsenal. The Tilt feature visualizes website structures in 3D, while the Style Editor can edit CSS stylesheets on the fly.
The 3D feature, known as Tilt, is a way of visualizing a website’s DOM. It integrates with the existing Document Inspector and uses WebGL to display rich 3D graphics in your browser.
Tilt – 3D Website Visualization
You can access Tilt from within Firefox’s Page Inspector. To get started, open the Page Inspector by selecting “Inspect” from the Web Developer menu. You can also right-click in the current page and select “Inspect Element” to start the inspector at a specific element.
Click the “3D” button on the inspector toolbar.
You’ll see the page’s structure after activating 3D mode, but it will look flat until you rotate it.
Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.
This view is integrated with the other tools in the inspector. If you have the HTML or Style panels open, you can click an element on hte page to view that element’S HTML code or CSS properties.
More 3D Features
The 3D visualization feature was based off the Tilt extension, but it doesn’t have all the features of the Tilt extension. if you want to customize the colors or even export the visualization as a 3D model file for use with a 3D editing program, you’ll need to install the Tilt 3D add-on. Once you have, you’ll get a new “Tilt” option in the Web Developer menu.
Click the Cancel button to use the old version of Tilt when prompted.
You’ll find controls to customize the visualization at the left side of the window and other options, including the export feature, at the top of the page.
CSS Style Editor
To view and edit a page’s CSS style sheets, open the Style Editor from the Web Developer menu.
The Style editor lists the stylesheets on the current page. Toggle a stylesheet on or off by clicking the eye icon to the left of the stylesheet’s name. Edit a stylesheet by selecting it and modifying the code.
Changes are reflected on the page immediately. If you toggle a stylesheet off, the page will lose its style information. If you edit a stylesheet, you’ll see the edits appear on the page while you type.
You can save a copy of one of the stylesheets to your computer, import an existing stylesheet from your computer, or add a new, blank stylesheet with the Save, Import, or New links in the Style Editor window.
The 3D visualization feature watches for changes on the current page and notices when changes occur. When you use the Style Editor with the 3D inspector open, your changes will be reflected immediately in the 3D view. This also works with third-party extensions that modify web pages, such as Firebug.
@chrisbhoffman
Feb 14, 2012, 6:00 am EST | 2 min read
Firefox’s Web Developer menu contains tools for inspecting pages, executing arbitrary JavaScript code, and viewing HTTP requests and other messages. Firefox 10 added an all-new Inspector tool and updated Scratchpad.
Firefox’s new web developer features, in combination with awesome web-developer add-ons like Firebug and the Web Developer Toolbar, make Firefox an ideal browser for web developers. All tools are available under Web Developer in Firefox’s menu.
Page Inspector
Inspect a specific element by right-clicking it and selecting Inspect (or pressing Q). You can also launch the Inspector from the Web Developer menu.
You’ll see a toolbar at the bottom of the screen, which you can use to control the inspector. Your selected element will be highlighted and other elements on the page will be dimmed.
If you want to choose a new element, click the Inspect button on the toolbar, hover your mouse over the page and click your element. Firefox highlights the element under your cursor.
You can navigate between parent and child elements by clicking the breadcrumbs on the toolbar.
HTML Inspector
Click the HTML button to view the HTML code of the currently selected element.
The HTML inspector allows you to expand and collapse the HTML tags, making it easy to visualize at a glance. If you want to see the page’s HTML in a flat file, you can select View Page Source from the Web Developer menu.
CSS Inspector
Click the Style button to see the CSS rules applied to the selected element.
There’s also a CSS properties panel — switch between the two by clicking the Rules and Properties buttons. To help you find specific properties, the properties panel includes a search box.
You can edit the element’s CSS on the fly from the Rules panel. Uncheck any of the check boxes to deactivate a rule, click the text to change a rule, or add your own rules to the element at the top of the pane. Here, I’ve added the font-weight: bold; CSS rule, making the element’s text bold.
JavaScript Scratchpad
The Scratchpad also saw an update with Firefox 10, and now contains syntax highlighting. You can type in JavaScript code to run on the current page.
Once you have, click the Execute menu and select Run. The code runs in the current tab.
Web Console
The Web Console replaces the old Error Console, which has been deprecated and will be removed in a future version of Firefox.
The console displays four different types of messages, which you can toggle the visibility of — network requests, CSS error messages, JavaScript error messages and web developer messages.
What’s a web developer message? It’s a message printed to the window.console object. For example, we could run the window.console.log(“Hello World”); JavaScript code in the Scratchpad to print a developer message to the console. Web developers can integrate these messages into their JavaScript code to help with debugging.
Refresh the page and you’ll see the generated network requests and other messages.
Use the search box to filter the messages; click a request if you want to see more details.
As of Firefox 10, the Web Console can work in tandem with the Page Inspector. The $0 variable represents the currently selected object in the inspector. So, for example, if you wanted to hide the currently selected object, you could run $0.style.display=”none” in the console.
If you’re interested in learning more about using the console and its built-in functions, check out the Web Console page on Mozilla’s Developer Network website.
Get More Tools
The Get More Tools option takes you to the Web Developer’s Toolbox add-on collection on the Mozilla Add-Ons website. It contains some of the best add-ons for web developers, including Firebug and the Web Developer Toolbar.
If you’ve been using Firefox for a few years, you may remember the DOM Inspector. Firefox’s integrated developer tools have come a long way since then.
Welcome to your new favorite browser. Get the latest features, fast performance, and the development tools you need to build for the open web.
Firefox Developer Edition — English (US)
Your system may not meet the requirements for Firefox, but you can try one of these versions:
Firefox Developer Edition — English (US)
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
- Firefox Developer Edition
Firefox Privacy Notice
Firefox Developer Edition automatically sends feedback to Mozilla. Learn more
Firefox Browser Developer Edition
The browser made for developers
All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector.
A separate profile and path so you can easily run it alongside Release or Beta Firefox.
Preferences tailored for web developers: Browser and remote debugging are enabled by default, as are the dark theme and developer toolbar button.
New Tools
Inactive CSS
Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.
New Tools
Firefox DevTools
The new Firefox DevTools are powerful, flexible, and best of all, hackable. This includes a best-in-class JavaScript debugger, which can target multiple browsers and is built in React and Redux.
Innovative Features
Master CSS Grid
Firefox is the only browser with tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more.
Faster Information
Fonts Panel
The new fonts panel in Firefox DevTools gives developers quick access to all of the information they need about the fonts being used in an element. It also includes valuable information such as the font source, weight, style and more.
Design. Code. Test. Refine.
Build and Perfect your sites
with Firefox DevTools
Inspector
Inspect and refine code to build pixel-perfect layouts.
Console
Track CSS, JavaScript, security and network issues.
Debugger
Powerful JavaScript debugger with support for your framework.
Network
Monitor network requests that can slow or block your site.
Storage panel
Add, modify and remove cache, cookies, databases and session data.
Responsive Design Mode
Test sites on emulated devices in your browser.
Visual Editing
Fine-tune animations, alignment and padding.
Performance
Unblock bottlenecks, streamline processes, optimize assets.
Memory
Find memory leaks and make your application zippy.
Style Editor
Edit and manage all your CSS stylesheets in your browser.
Speak up
Feedback makes us better. Tell us how we can improve the browser and Developer tools.
Get involved
Help build the last independent browser. Write code, fix bugs, make add-ons, and more.
With time to kill at the airport, getting online is a great—if potentially expensive—way to while away the hours. But there are a couple of tricks you can use to get free internet access and bypass those paywalls.
Scan for wireless networks at the airport and you’ll probably find a Boingo hotspot. You may already know that you can very easily access some sites without paying . Connect to the network and click the The Good Stuff box. This gives you access to a limited number of complementary sites, but after clicking it, try opening a new tab in your browser and going somewhere else—you might just find it works.
Get Free Airport Wi-Fi with a Simple URL Hack
Blogger Felix Geisendorfer points out a clever URL hack that scored him free Wi-Fi at the Atlanta…
But there’s another trick to free airport Wi-Fi. WonderHowTo explains:
Many paywall sites, Boingo or not, simply block the address bar so that you can’t freely roam the web. This is great news for you, because you can access a website without an address bar via your web console and inserting window.location.href=” for instant access. Web developer tools are a great way to get around blocked content, and in some cases, they can also help you get around blocked Wi-Fi access.
You’ll need to access your browser’s developer tools to try this. In Firefox, click the menu button and select Developer > Web Console, or press Ctrl+Shift+K. Click next to the double blue arrow to the bottom left of the screen and type window.location.href=”URL of site to visit” and press Enter.
In Chrome, click the menu button and select Tools > Developer tools, or press Ctrl+Shift+I, and then head to the Console section. Use the same syntax to bypass any paywall that may be in place. You may notice that a security warning appears when connecting to sites in this way.
This technique is not guaranteed to work with every hotspot in every airport, but it’s definitely worth a try before you shell out for pricey airport Wi-Fi. Click the link below for more information.
Edge Dev/Canary adds 3D DOM Viewer, “inspired by” Firefox’s Tilt
Microsoft has introduced an interesting new tool for web developers in its upcoming Chromium-based Microsoft Edge via its Dev and Canary channels. The tool allows developers to view a 3D render of the web elements that make up their web page. The experimental feature is “inspired by” Firefox Tilt, both of which are intended to allow developers to more easily track down bugs.
Inspired by @FirefoxDevTools’ Tilt feature, we just released the 3D DOM viewer in Edge Dev/Canary builds 😀
1) Enable Developer Tools experiments in about://flags
2) Ctrl+Shift+P > “Experiments” > “Enable DOM 3D view”
3) Ctrl+Shift+P > “DOM 3D View”
— Microsoft Edge DevTools (@EdgeDevTools) August 5, 2019
A users who wants to try it out only need to go edge://flags on the latest version of Edge either on the Dev or Canary branches, and enable Developer Tools experiments. Then, hit Ctrl + Shift + I to open the developer options, then hit the ellipsis . menu to go to Settings, navigate to Experiments along the sidebar, then tick Enable Dom 3D View.
Afterwards, you can hit Ctrl + Shift + I again to open the developer options once more, hit the ellipsis . menu, then More tools, then DOM 3D View. Afterwards, just hit Take snapshot to generate a 3D view of your webpage.
Keep in mind that as this is an experimental feature, there may be bugs or other issues, and there’s no guarantee the feature is here to stay. But if it does, it could serve as a great tool for web developers and enthusiasts.
What do you think of the new feature? Is it something that you’d use or do you think Microsoft can do better? Let us know in the comment area below.
The Firefox Developer Toolbar is like wonderland, not only for web or extension developers, but also for regular users like you and I who like to use the keyboard for specific features that may otherwise be more difficulty or time consuming to reach. Yesterday I explained how you can use the Developer Console to take screenshots of the active web page, and before that, I explained how to use it to manage add-ons and change Firefox preferences.
Today, it is all about browser cookies and how you can use the Developer Toolbar to list, edit or remove cookies from the browser. If you have followed the other tutorials you should be familiar with the Developer Toolbar. Here is a short recap if you have not read them:
- You display and hide the Developer Toolbar in Firefox with the shortcut Shift-F2
- When you use the shortcut, a small toolbar opens at the bottom of the browser that contains a console and several links to additional tools
- To learn more about the commands available, simply enter help and tap on the return key.
Managing Cookies from Firefox’s Developer Toolbar
There are three cookie related commands that you can work with:
- cookie list displays all cookies set by the domain you are currently on
- cookie remove lets you remove select cookies from the browser
- cookie set enables you to set a new cookie
The cookie list command is the one that you probably want to get started with. It lists all the cookies set by the domain you are currently on including the key and value. You also find actions to remove or edit cookies here which sometimes is more convenient than using the remove or set commands to do so. It won’t remove the cookie right away but write the command to the console so that you only need to press enter to run it.
You can alternatively use the cookie remove key command to do that. Note that this does not appear to work properly right now in the Nightly version that I tested it with. While you can run the command, it won’t remove the cookie from the Firefox web browser when you do so.
To write a new cookie use the cookie set key value command. This can for instance be useful if you want to set a cookie to get YouTube’s new homepage when Google is testing a new layout of it or for web development purposes.
Especially the options to list and remove cookies can be useful to non-developers, for instance to quickly remove all cookies set by a website.
Mozilla Firefox’s Web Developer menu has tools for inspecting internet pages, running JavaScript code, and viewing HTTP requests and other relevant messages. In this tutorial you’ll learn about Firefox’s all-new Inspector tool and updated Scratchpad.
Mozilla Firefox’s new web developer features, combined with top of the line Firefox web developer addons like Firebug and Web Developer Toolbar, make Mozilla Firefox the ideal internet browser for web developers. All of these tools are available absolutely for free under Web Developer in Firefox’s menu.
Page Inspector
You can inspect a specific element’s code by right-clicking it and selecting Inspect (or by pressing Q on your keyboard). You can also launch the Inspector right from the Web Developer menu.
You will then see a toolbar at the bottom of the webpage, which you can then use to control the Inspector and check out all the elements on the page. Your selected element will be highlighted and other elements on the webpage will be dimmed out.
If you want to select a new element on the page, click the Inspect button on the toolbar, hover your mouse over the page and click you element. Mozilla Firefox will then highlight the element under your cursor as you maneuver it across the page.
You can also go back and forth between parent and child code elements by clicking the breadcrumbs on the Inspector toolbar.
HTML Inspector
Click on the HTML button to view the HTML code of your selected element.
The HTML Inspector will allow you to expand and collapse the HTML tags, making it easy to visualize your changes right on the page – very similar to WYSIWYG software like Adobe Dreamweaver.
If you want to see the webpage’s HTML in a flat file, you can also select View Page Source from the Web Developer Menu. (Remember to bring up the Web Developer Menu just use your cursor to right-click anywhere on the webpage).
CSS Inspector
Click on the Style button to see the CSS rules that are being applied to the selected element and there’s also a CSS Computed panel.
You can switch between Rules and Computed by clicking the Rules and Computed buttons. To help you find specific CSS properties, the computed panel includes a search box.
You can also edit the element’s CSS straight from the Rule panel. Uncheck any of the check boxes to temporarily deactivate the rule, click the text to change a rule, or add your own rules to the element at the top of the panel. Here, we’ve added the font-weight: bold CSS rule, making the element’s text bold.
JavaScript Scratchpad
The Scratchpad also saw an update with recent versions of Firefox, and it now contains syntax highlighting. You can type in JavaScript code to run on the current webpage.
As soon as you have, click the Execute menu and then select Run. The code runs in the current tab.
Web Console
The new Firefox Web Console replaced the old Error Console, which has been belittled by users and removed by Mozilla developers in the latest versions of Firefox.
The Web Console displays 4 different types of messages, which you can then toggle the visibility of – network request, CSS error messages, JavaScript error messages and web developer messages.
A web developer message is a notification printed to the window.console object. For example, you could run the window.console.log (“Hello World”); Javascript code in the Scratchpad to print a developer message to the console. Web developers can integrate these messages into their JavaScript code to help with debugging.
Refresh the webpage and you then see the generated network requests and other related messages.
Use the search box to filter the messages; click a request if you want to see more details.
With recent versions of Firefox, the Web Console can work in tandem with the Page Inspector. The $0 variable stands for the currently selected object in the Firefox Inspector. So, for example, if we wanted to hide the currently selected object, you could run $0.style.display=”none” in the console.
If you are interested in learning more about using the Web Console and its various built-in functions, check out the Web Console page on Mozilla’s Developer Network website.
It really depends on which pages are causing slow-loading and why. There are, as you might expect, many possibilities.
I’m going to use this as an opportunity to introduce a diagnostic tool available in most modern browsers. While it’s generally packaged in something called “developer tools”, you don’t have to be a developer to use it or benefit from it.
Since you’re using Firefox, I’ll show you there.
You can use web developer tools in Firefox and other browsers with network performance monitoring options that will display a file-by-file performance graph of a slow-loading page. Each file goes through several steps as part of the process, and looking for trends within a page, and across multiple page loads can point to problem areas.
Developer Tools
Web Developer on the Firefox menu.
Click on Web Developer. This will display a sub-menu of options.
Network item on Web Developer menu.
Click on network
Web Developer Tools – Network pane. (Click for larger image.)
You can adjust the location of the pane to be below, to the right, to the left, or in a separate window entirely by clicking on the ellipsis
Pane position options.
You can also adjust the relative size of the pane by clicking and holding on the border separating it from the main window and dragging to a size you find useful. To provide as much screen real estate as possible, maximize Firefox.
Getting performance information about slow-loading pages
Click the refresh button on the webpage you’re viewing. The networking pane will be updated to reflect all the resources being requested by your web browser. This includes:
- The page itself.
- Every image on the page.
- Every style-sheet used by the page.
- Every javascript
The result will display as a cascading “waterfall” of information in the networking pane. (You may need to resize the pane and/or the column containing the displayed waterfall. See the accompanying video for examples.)
Beginning of the waterfall diagram for a page load of msn.com.
Each file is listed, along with a multi-colored bar representing various aspects of the amount of time it took to load that file.
Depending on the website design, there can be hundreds of files involved in displaying a single webpage.
Click on a file to get a breakdown of the time spent fetching that single file.
Timing waterfall for a single file.
We can use this information to diagnose some of the issues that lead to a slow webpage.
Aspect of speed
The items in the timing breakdown tells us various things.
Blocked. The browser tries to fetch several things from the server it’s connecting to at once, which minimizes the time it’s doing nothing while waiting for one or more of the items to complete. By default, Firefox attempts only six things at the same time. Being “blocked” is time waiting for one of those six items to complete. (I believe it may also include some internal overhead, as it is non-zero even on the very first request.)
If you’re seeing lots of files spending a disproportionate amount of time “blocked”, there’s not a lot you can do — this is a function of the webpage design and the speed of your connection to the server.
If you find DNS resolution appears disproportionately long, it might be time to consider using a different DNS provider.
Connecting. This is the amount of time it takes for your computer to establish a connection to the server hosting the webpage we’re attempting to view. This is generally a function of the speed of your internet connection, the path to that server, and the speed of that server itself. Unfortunately, there is little you can do to control this, other than get a faster connection or a better ISP [Internet Service Provider]
Sending. This is the amount of time it takes for your computer to (finally) ask for the specific page you’re requesting. This is mostly a function of your internet speed.
Waiting. This is the amount of time spent waiting for the remote server to respond to your request. This is generally a function of the speed of that server, as well as the complexity involved in returning whatever you’ve asked for.
Receiving. This is the amount of time it takes to receive the response. Besides being mostly a function of your internet speed, larger responses (bigger pages, larger images, etc.) take more time.
Gather data, look for trends
When trying to diagnose slow-loading pages, we look for trends.
As I mentioned above, if DNS resolution takes a disproportionate amount of time across multiple files in your request, then it might be time to switch.
If you’re spending most of your time “waiting”, it could be that the service you’re accessing is simply slow.
If you look at the files being requested and notice a pattern — say all the files on one specific domain are slow, but the rest are fast — then perhaps just that specific service is slow. This often happens with servers that supply advertising, for example.
On occasion, the reason for a slowdown becomes quickly obvious. Unfortunately, that’s not always the case, and we need to rely on looking for these types of patterns as the webpage is fetched.
And finally, remember that big things take time. Two of the most common causes for things being slow are:
- We’ve asked the website to perform a lot of work before returning a response — something like completing a sale or querying a database.
- We’ve asked the website to return something large, such as one or more high-quality pictures.
In both cases, the solution remains the same: be patient.
If you found this article helpful (and hopefully not too slow-loading!) you’ll love Confident Computing! My weekly email newsletter is full of articles that help you solve problems, stay safe, and increase your confidence with technology.
