Go to https://docs.google.com/document/d/1tMOnLWZWzjykzwJ_-gE4rOX_x0TT7ZBhMTIPP7GkMyI/edit#
Firefox 57 Developer Edition is about to be released! This is a great opportunity to check what DevTools have been up to during the last months.
Say hello to a complete visual refresh of both our Light and Dark themes. The new design is simpler, cleaner and has better contrast. We also updated all the syntax highlighting colors to improve text readability. Check out the in-depth blog post at Firefox Nightly News by our UX Designer Victoria Wang for more details.
Babel, SCSS, WebAssembly, TypeScript... Compiling JS and CSS is now common practice. As a result, the code that the browser uses looks pretty different from the source files. We finally support sourcemaps in all our major tools, so you can focus on working with your original files.
We now support sourcemaps in the Inspector, the Console, the Debugger and the Style Editor!
CSS Grids are taking over the web, and DevTools are here to help you master them. Head over to the new Layout panel in the Inspector, where the CSS Grid widget lists all of the grid containers on the page. The grid overlays also got much better: they show line numbers, area names and adapt to the most complex CSS transforms.
Ever been bugged by a DOM element showing up in an unexpected spot? The Layout panel shows detailed box-model information, with all properties relevant to positioning, including the offset parent.
There are too many goodies in the Layout panel to list here, so have a look at our previous Hacks post dedicated to the Layout panel.
CSS Variables are now widely supported and ready to be used in the wild! The Inspector shows the current value of variable on hover. It also indicates why the variable has a given value for the selected element.
Adding, removing and toggling classnames is really useful when debugging CSS. Now you can easily do it from the Inspector. Click on the ".cls" button to reveal all of the classes applied to the selected element. You can toggle any of them or add new ones.
Don't remember all the possible values possible for font-variant? That's ok, you shouldn't have to! Our CSS autocompletion now returns many more values.
I want to highlight one last feature for the Inspector. If you work with test automation tools, you will like the new Copy XPath context-menu option. This feature used to be in Firebug, and we are really glad to bring it back to DevTools!
We are shipping a new Console UI with Firefox 57! Joining the Debugger and the Netmonitor, the Console was rewritten using modern web technologies such as React and Redux. Looking forward to your feedback!
The new console allows you to inspect objects in context. When an object is logged in the console, you can simply expand it and explore its contents. Existing features of the previous UI have been ported to this new frontend, such as filters and network request details.
console.group() is super useful to make your logs more organized and readable. You can now collapse log groups to see only what matters to you.
Did you know you could persist logs when navigating from page to page? The Persist logs checkbox is now much easier to find, directly in the Console panel.
Thanks to all the feedback received since the new Debugger was first released on Developer Edition, we are shipping it to all channels with Firefox 56. Thanks again for your help, let's take a look at the main new features.
[screenshot] or [screenshot showing both the outline view and function search]
Debugging is often about finding the right method. The new debugger features an outline view, with links to all the methods defined in the current source. If you prefer searching, you can also use function search and quickly jump to any function.
Talking about search, the new Debugger introduces project search, a.k.a. Find in all files. Pretty useful if you need to find where this console.log("foo") is coming from. This was one of our top requested features, we are very happy to ship it in Firefox 57.
Frameworks and libraries are everywhere in the Web landscape, and DevTools are embracing it! The debugger now displays matching icons in callstacks for framework sources. Framework methods are also collapsed by default in callstacks, no need to scroll through foreign method calls anymore. You can also enable blackboxing to completely forget about a file and never have to step through it.
With pinned breakpoints, the Debugger will keep track of your breakpoints even if your code has changed. If the statement where you had a breakpoint moved in your file, the breakpoint will automatically go to the correct location when the file is reloaded.
Async & await will change the way we write asynchronous code for the better! The Debugger can now seamlessly step-over or step-in with async functions.
If you want to follow more closely the (very active!) development of the Debugger, you should check out the weekly updates published by the team.
Scheme, timings, headers... Here are just some of the new Netmonitor columns! You can choose your own set of columns to only see what you want. The filter input also provides autocompletion based on the column names to build powerful filter queries.
What does the ETag header mean? What is status code 502? The Netmonitor now links to the Mozilla Developer Network (MDN) to help you learn about request & response headers, status codes, timings etc...
Timings for DOMContentLoaded and load are crucial when analyzing the performance of a website. They are now clearly visible in the new status bar, next to the requests' summary.
You can now toggle persist logs and disable cache right from the Netmonitor UI. persist logs is so handy when you need to inspect a POST request that triggers a page navigation!
Tired of typing localStorage.setItem in the Console? You can now add new cookies or localStorage entries in the Storage Inspector.
Last but not least, the Storage Inspector is now enabled by default for all channels!
That was a long read, we hope you will enjoy the new features we are rolling out. Feedback welcome, find us on Slack or on #devtools at irc.mozilla.org. And a HUGE thank you to all the contributors, always doing an amazing job on DevTools:
- Abhinav Koppula
- Adrien Enault
- Adrien Pachkoff
- Ahmed Towkir
- anejaalisha
- Bomsy (Hubert B Manilla)
- Brennan Brisad
- Christopher Phonis-Phine
- Eric Skoglund
- Espen Henriksen
- Gabrielle Singhcadieux
- Hemant Singh
- Henri Kemppainen
- Hossain Al Ikram
- Jaideep Bhoosreddy
- Leonardo Couto
- Locke Chen
- Maxwell
- Mayank
- Michael Kohler
- Mike Park
- Mohammed Yaseen Khan
- nbeltran14
- Nguyen
- Nick Fox
- Nicolas Ouellet-Payeur
- Oriol Brufau
- Pinkney
- Ragnis
- Rahul Chaudhary
- Ruben Schmidmeister
- Ruturaj Vartak
- Santiago Paez
- Sebastian Zartner
- Sheldon Roddick
- Stanford Lockhart
- Stefan Yohansson
- Stoyan Dimitrov
- Stylizit (Matt R)
- Swapnesh Kumar Sahoo
- Vangelis Katsikaros
- Vera
- Vincent Lequertier
- Xavier ALT
Comments!
Say hello to a complete visual refresh of Firefox DevToolscan be replaced with justSay hello to a complete visual refresh. OrVictoria Wang (DevTools UX Designer)can be written asVictoria Wang (our UX Designer)- this makes the post shorter and less tiresome to read :)Our CSS autocompletion now returns much more values.s/much more/many more/used to be in Firebug, we are really glad, s/Firebug, we/Firebug, and we/The new debugger proposes an outline views/proposes/featuresOther than that, great post! I'm feeling very excited by reading all these cool features :D