CSS Grid has just been uplifted to Firefox 52 Developer Edition (download it here!). With Chrome (and hopefully Safari and Edge) implementations coming shortly, using grid to build websites will soon be possible in release browsers across the board.
Grid allows users to decouple HTML from layout concerns, expressing those concerns exclusively in CSS. It adapts to media queries and different contexts, making it a viable alternative to frameworks such as Twitter’s Bootstrap or Skeleton which rely on precise and tightly coupled class structure to define a content grid.
Reducing the risks of fragility, code bloat, and high maintenance costs inherent in how we currently build on the web, grid really does have the potential to change the way we do layouts. Jen Simmons calls it Real Art Direction for the Web and Rachel Andrew has built Grid by Example to inform, share, and evangelize it. If you’re new to grid, be sure to have a look.
As you can see in the video, the grid highlighter tool will help get you started illustrating the grid in-page as you’re working. Additional tooling is planned for the near future to continually improve working with grid.
To access this tool, make sure you’re running an up-to-date version of DevEdition. Next, open a page that is known to have grid code—we recommend one of these demos for this. Open the Inspector via Developer ? Inspector. Select an element with the property display: grid;. To toggle grid lines, click the icon next to “grid” which will persist the lines permanently.
The Firefox Developer Tools team have planned a series of improvements to make working with grid easier in the future. You can follow our progress through these bugs:
Making the Inspect Page button automatically turn on grid highlighters when applicable (bug 1297100)
Extending the grid highlighters to our new responsive design mode and adding custom options to make displaying grids in responsive design mode easier, and
Chris has been around the web block several times and knows a lot about standards and how developers make them applicable to various different environments. He worked on various browsers and has a high passion for the open web and empowering developers with standards and great browsers.
Here are the questions we covered:
One of the worries with Web Components was that it would allow developers to hide a lot of complexity in custom elements. Do we have a problem understanding that modules are meant to be simple?
Isn’t part of the issue that the web was built on the premise of documents and that a nature of modules needs to be forced into it? CSS has cascade in its name, yet modules shouldn’t inherit styles from the document.
One thing that seems to be wasteful is that a lot of research that went into helper libraries in the past dies with them. YUI had a lot of great information about animation and interaction. Can we prevent this somehow?
Do you feel that hacks die faster these days? Is a faster release schedule of browsers the solution to not keeping short-term solutions clog up the web?
It amazes me what browsers allow me to do these days and create working layouts and readable fonts for me. Do you think developers don’t appreciate the complexity of standards and CSS enough?
I played a bit of devil’s advocate interviewing Monica as she has a lot of great opinions and the information to back up her point of view. It was very enjoyable seeing the current state of the web through the eyes of someone talented who just joined the party. It is far too easy for those who have been around for a long time to get stuck in a rut of trying not to break up with the past or considering everything broken as we’ve seen too much damage over the years. Not so Monica. She is very much of the opinion that we can trust developers to do the right thing and that by giving them tools to analyse their work the web of tomorrow will be great.
I’m happy that there are people like her in our market. It is good to pass the torch to those with a lot of dedication rather than those who are happy to use whatever works.
Over the last few weeks I was busy recording interviews with different exciting people of the web. Now I am happy to announce that the first edition of Decoded Chats is live on the new Decoded Blog.
In this first edition, I’m interviewing Rob Conery about his “Imposter Handbook“. We cover the issues of teaching development, how to deal with a constantly changing work environment and how to tackle diversity and integration.
We’ve got eight more interviews ready and more lined up. Amongst the people I talked to are Sarah Drasner, Monica Dinculescu, Ada-Rose Edwards, Una Kravets and Chris Wilson. The format of Decoded Chats is pretty open: interviews ranging from 15 minutes to 50 minutes about current topics on the web, trends and ideas with the people who came up with them.
Some are recorded in a studio (when I am in Seattle), others are Skype calls and yet others are off-the-cuff recordings at conferences.
Do you know anyone you’d like me to interview? Drop me a line on Twitter @codepo8 and I see what I can do 🙂
Firefox Developer Edition 50 is here. It has numerous improvements that will help you work with script-initiated network requests, tweak indexedDB data, and much more. It also introduces something special we’ve all been really wanting for a while, so let’s get right to it:
A long awaited feature is finally coming to the dev tools, but we need your help in this final phase of testing. The source maps feature is currently preffed off by default, as we test before shipping it to everyone.
Curious how the solution came about? I’ll paraphrase our own Joe Walker,
“Interns often don’t have all the background on how difficult bugs are, and sometimes jump into really challenging bugs—which is to say, yay interns! ”
So, a big thanks to Firefox Developer Tools’ intern Jaideep Bhoosreddy for figuring it out.
Those times are over. The console will now show the original source, and not the compiled one anymore. You can view it in action in the gif below, with a CoffeeScript file:
Source map support is currently off by default and can be activated through a preference. Because there are various implementations in the wild depending on the tool used to build the source map file, we want to get some initial testing of the different variations. That’s where you come in.
Here’s how you can help:
To activate source map support in the console, please set the preference on.
The Memory Tool is also now enabled by default. This is a must-have tool for debugging and maintaining top-notch app performance. It helps you to find and fix memory leaks in your application. If you want to learn more about it, check out the article on MDN or go read the Hacks post on Firefox’s New Memory Tool.
In Firefox 49, the “Cause” column was added. It shows how a given network request is initiated, its type and, if available, the stack trace that led to it. The stack trace bubble now shows the frame asynchronous cause (XHR, Promise, setTimeout, etc.), similar to the debugger stack trace panel.
Service Workers are definitely the next big thing in Web development, providing a whole set of tools you can use to build progressive web apps that match native apps in functionality, with offline capabilities and push notifications.
Did you know that you can manage registered Service Workers in the about:debugging#workers page? This page now also shows push subscription endpoints and allows you to send a test notification with no more effort than the click of a button.
With that, we’ve completed the overview of Developer Edition 50. Download the latest update now and let us know what you think. One last thing, though. A lot of the improvements we covered in this post were made possible by awesome contributors. Big thanks to all of you.
This feature is useful if you want to figure out why and from where on the page a particular HTTP request is issued. (See bug 1134073.)
Animation performance info in Inspector
You can use the Inspector panel to investigate details of your CSS and DOM animations. In Firefox 49, you can now get detailed performance information for your animations. If an animation property cannot be run on the compositor (i.e., cannot be hardware-accelerated), it is underlined in the expanded animation view, and an associated tooltip explains what’s going on.
In the example below, the transform and width properties cannot be accelerated at the same time. With this new tool in Inspector, you can now spot under-performing animations and learn what changes you need to make to accelerate them.
Read David Baron’s blog post if you want to learn more about how animations are optimized in Gecko. (See bug 1254408 for more detail.)
Reorganized context menu in markup view
The Inspector has a context menu with many actions, which was becoming long and unwieldy. Contributor Moaaz Sidat reorganized the menu, dividing it into several sub-menus. (See bug 1211613.)
Other improvements in the Inspector Panel
Firefox 49 adds support for #rrggbbaa and #rgba syntax for color values. The Inspector in developer tools now supports this syntax, too. (See bug 1271191.)
In the CSS rule editor, autocomplete now displays more possible properties, in a scrollable list. As a result, it’s much easier to find the value that is relevant to you, or learn about new CSS properties that you were not familar with previously. (See bug 1260419.)
In the markup view, self-closing tags like <br> are now displayed as <br></br> only if the doctype is XHTML. For normal HTML, the markup is now displayed in a more accurate and less verbose form. (See bug 820926.)
When you see an unfamiliar error message in the Console, you no longer need to copy the message and search online for documentation. You can simply click on a direct link to the MDN reference page about the error that is a part of the message. Read a blog post by @floscholz and @mrrrgn to learn more about this feature and how you can contribute to make it better. (See bug 1179876.)
New color scheme for syntax highlighting
We thought our syntax highlighting colors were looking a little dated, so we changed them up in both the light- and dark-themed versions of Developer Edition Firefox. The new colors are optimized for accessibility: they have better contrast and are easier to distinguish in all situations.
We’ve made important accessibility improvements throughout this release. Most developer tools UI elements now have a clearly visible focus indicator, the UI is navigable using the keyboard, and accessibility semantics in the Inspector panel were improved. (See bugs 1242694, 1242715, and 1242851.).
Other notable changes
In addition to the improvements above, we have polished various areas throughout the developer tools, in particular:
The about:debugging page displays a warning when service workers are disabled, whether by private browsing mode or by a pref. (See bug 1266415.)
Step by step, the Storage Inspector is becoming more editable. In this release, we are adding a context menu option to delete an IndexedDB database. (See bug 1205123.)
Network Inspector now shows the exact number of bytes if the response size is smaller than 1KB. (See bug 1263945.)
Pressing the ‘h’ key in the Inspector panel, which is a shortcut to hide the selected element, now also grays out the element markup. (See bug 1127572.)
Thanks to everyone who has contributed to this Developer Edition release! Grab a copy of the latest Developer Edition now and let us know what you think.
As part of porting Firebug features to the built-in tools, we’re also porting the Firebug theme, giving Firebug users a more familiar environment to work with. This is the initial release of the theme so please let us know if you find any bugs and report them here. Here is a screenshot of the Firebug theme:
The DOM panel is another feature we are porting from Firebug. This panel provides a handy tree view which allows you to browse and inspect the DOM structure of your page. Here’s a screenshot of the new tool:
Editing support inside the storage inspector is one of the most frequently requested features. In this release, we added the ability to edit and delete cookies, local storage, and session storage entries. You can edit a cell by double-clicking on it. You can also delete entries by using the context menu.
In this release, we have added a new visual editing tool that allows you to easily tweak the positioning of any absolutely positioned or fixed-position element. You can change the values of the top, left, bottom and right properties using this tool. To launch the geometry editor, go to the Box Model tab in the inspector and click on the icon.
Memory tool improvements
The memory tool is now enhanced with a brand new tree-map view that gives a quick and intuitive visual overview of how memory is being used. This new view groups objects together by their types, which allows you to easily see the quantity of similar items (arrays when drawing canvas lines, scripts when loading a script-heavy website, etc.) taking up memory. Also, the size of each item in the map is proportional to the amount of bytes used, which allows you to easily see which items are taking up most of your memory.
The memory tool provides a useful aggregate view that groups all instances of the same type of node. In this release, you can now click the ? icon to view all individual instances of a specified type in a separate view. You can also view the retaining paths of those individual nodes, using the retaining paths panel added in the previous release. This allows you to precisely pinpoint how a specific object is leaking when debugging your web app.
Finally, we have also added the ability to remove individual snapshots from the memory tool sidebar.
We have polished the user experience in the inspector to make it smoother and easier to use. The Rules view autocomplete now selects the most used property by default to make your authoring experience faster. For example, background will be selected instead of backface-visibility because it’s more frequently used. Here is a screencast of the feature in action:
We have also improved the way long values are handled in the Rules view. A new multi-line mode specifically for long values lets you conveniently reach and select different parts of the value you’re editing.
The markup view now emphasises the relationship between a parent node and its children. The selected element now has a line underneath it that highlights the child nodes. This allows you to easily spot the selected element child nodes when the HTML markup is complex.
A quick way to switch between different angle units in the Rules view has been added. There is now a swatch next to angle values which you can shift-click to cycle between different units, similar to the colour values interaction. This feature was added by contributor Nicolas Chevobbe.
Finally, we have added keyboard shortcuts to easily navigate between the markup view search results. You can now use Shift+Enter to navigate backwards within the search results. Also, Ctrl/Cmd+G and Ctrl/Cmd+Shift+G now work as aliases for Enter and Shift+Enter. These keyboard shortcuts were added by contributor Steve Melia.
The console has also received various tweaks that will make your daily experience with the tool more enjoyable. The first improvement comes from the set of Firebug features we’re porting. You can now expand network logs to inspect them and reveal a Firebug-style details view. Here is a screenshot:
If you’re working with Map or Set objects, you can now view and inspect their individual entries from the console sidebar. This feature was added by contributor Jarda Snajdr.
Finally, we have added support for console.clear() to clear the console output.
In preparation for the release of WebExtensions, we’ve added a feature that will be a great help to add-on developers. You can now reload add-ons from about:debugging, which allows you to quickly develop your add-on without having to re-install it every time you make a change.
If you’re working with Service Workers, you’ll notice that we have added a way to unregister individual workers. Here is a screenshot:
Other notable changes
In addition to the changes above, we have polished various areas of the toolbox including:
We have added the ability to emulate a custom user agent on any webpage from responsive mode. You can now simply type your new user agent string inside the “Custom User Agent” field. You can use this to check whether a site uses user agent sniffing. For example, you can type in a mobile browser user agent to see how a website would look on your phone.
Here is a screencast of the feature:
Retaining paths as graph
In the previous release, we added a dominator view to help you debug memory-intensive applications. In this version, we’ve improved it by adding a retaining paths panel, which gives you a graph displaying all the nodes that are preventing a selected node from being garbage collected. This is particularly useful when you are debugging a possible memory leak. You can read more about this feature in the MDN documentation here.
Here is a screenshot of the graph:
Console multi-line input
The way multi-line input in the console is handled has been improved. When pressing the “Enter” key, the console will now detect whether your input is complete or not. If it is, pressing “Enter” will simply execute your command. If not, pressing “Enter” will add a new line to your input, so you can seamlessly continue writing your command.
The storage inspector now has support for cache storage, which is very useful if you’re debugging a service worker. Be sure to check Sole Penadés’ blog post that dives into the details of service worker debugging.
In addition to cache storage support, you can now filter the contents of the table using the search box located on the top toolbar. Here’s a screenshot of the feature:
In this release, we gave a visual tune-up to the toolbox. We have made small tweaks such as reducing the default tab width and adding new icons inside the memory tool, but we have also made some major changes. For example, we gave the light theme a complete makeover, to give it a lighter and more polished look and feel.
Here is a screenshot of the new light theme:
We have also updated the debugger gutter style—conditional breakpoints are now highlighted in the gutter in orange. Here’s a screenshot:
Finally, we have moved the network monitor toolbar to the top to be more accessible and more consistent with the other tools.
Debugging popups for addons
In preparation for the release of WebExtensions, we are adding new features that will make add-on debugging easier. In this release, we’ve made inspecting popups much easier. You can now lock popups so they don’t disappear once you click away. To use this feature, you need to launch the Browser Toolbox and click the icon with the four squares located in the top-right corner of the toolbox. You can read more about how to debug your extensions here.
Here is a screencast showing this feature in action:
Other notable changes
In addition to the improvements above, we have polished various areas throughout the toolbox, in particular:
We have also removed the 3D view, since this feature conflicts with the multi-process version of Firefox. If you’d like to use the feature, you can install this add-on instead.
Finally, the font inspector has been disabled by default, since it will be reworked for future releases. You can re-enable the tool by toggling the devtools.fontinspector.enabled preference in about:config.
Thanks to everyone that has contributed to this Developer Edition release! Grab a copy of the latest Developer Edition now and let us know what you think.
Firefox Developer Edition 46 is now here! In this version, we’ve added various memory profiling features and improved many of our current tools as well. This post covers some of the big changes that landed in this release.
Dominator view in the memory tool
A new view is now available within the Memory Tool that will aid in debugging and profiling memory intensive web applications. Dominator view provides insight into object memory allocation. This is a cumulative view indicating the size of the objects (shallow) and any referenced objects (retained) that are currently allocated. This allows you to easily see the impact a particular object is having on memory. Using this view also lets developers quickly locate the code responsible for creating a specific object. You can read more about this feature here.
Here’s a screenshot of the Dominator view:
Performance tool and GC profiling
The performance tool now allows you to include allocations in your recordings. This is useful to help you reduce the amount of GC done in your web app for more responsiveness. You can enable allocations in the performance tool by clicking on the settings cog, then by checking the “Record Allocations” menu item.
Here’s a screenshot of the Allocations view:
Emscripten demangling feature
When compiling native code through Emscripten, you will notice that the function names are changed by the compiler. We’ve now added support for demangling C function names in the profiler call tree, so you can easily refer to your original uncompiled code (development notes)
Style Editor and @media queries
Firefox Developer Tools provides a Responsive Design View, used to develop responsive websites that can respond to accommodate many screen sizes. You can use this view along with the media query sidebar to quickly see which media rules are currently activated for a given screen size selection. The new release of the media query sidebar now provides quick links on each media rule that automatically adjust the screen view size in the Responsive Design View. You can check the development notes here.
Here’s a screencast of the feature in action:
Also, the debugger will now always pause on debugger statements when the toolbox is opened, even if the panel hasn’t been activated yet. You can read James Long’s blog post for more technical detail.
In addition to the improvements above, we’ve also polished many areas of the toolbox, in particular: