Debugging Modern Web Applications

Building and debugging modern JavaScript applications in Firefox DevTools just took a quantum leap forward. In collaboration with Logan Smyth, Tech Lead for Babel, we leveled up the debugger’s source map support to let you inspect the code that you actually wrote. Combined with the ongoing initiative to offer first-class JS framework support across all our devtools, this will boost productivity for modern web app developers.

Modern JS frameworks and build tools play a critical role today. Frameworks like React, Angular, and Ember let developers build declarative user interfaces with JSX, directives, and templates. Tools like Webpack, Babel, and PostCSS let developers use new JS and CSS features before they are supported by browser vendors. These tools help developers write simpler code, but generate more complicated code to debug.

In the example below, we use Webpack and Babel to compile ES Modules and async functions into vanilla JS, which can run in any browser. The original code on the left is pretty simple. The generated, browser-compatible code on the right is much more complicated.

In the example below, we use Webpack and Babel to compile ES Modules and async functions into vanilla JS. The original code on the left is pretty simple. The generated, browser-compatible code on the right is much more complicated.
Figure 1. Original file on the left, generated file on the right.

When the debugger pauses, it uses source maps to navigate from line 13 in the generated code to line 4 in the original code. Unfortunately, because pausing actually happens on line 13, it can be difficult for the user to figure out what the value of dancer is at that time. Moving the mouse over the variable dancer returns undefined and the only way to find the scope of dancer is to open all six of the available scopes in the Scopes pane followed by expanding the _emojis object! This complicated and frustrating process is why many people opt to disable source maps.

A view of the disconnect between the original code file and the generated code, which opens multiple scopes
Figure 2. Value of dancer is undefined, six separate scopes in the Scopes pane.

To address this problem we teamed up with Logan Smyth to see if it was possible to make the interaction feel more natural, as if you were debugging your original code. The result is a new engine that maps source maps data with Babel’s syntax tree to show the variables you expect to see the way you want to see them.

Now the panel displays the correct value of dancer, and the Scopes pane shows one scope
Figure 3. Correct value of dancer is displayed, Scopes pane shows one scope.

These improvements were first implemented for Babel and Webpack, and we’re currently adding support for TypeScript, Angular, Vue, Ember, and many others. If your project already generates source maps there is a good chance this feature will work for you out of the box.

To try it out, just head over and download Firefox Developer Edition. You can help us by testing this against your own project and reporting any issues. If you want to follow along, say hello, or contribute, you can also find us on the devtools channel Github or Mozilla Discourse or in the devtools Slack!

Our 2018 goal is to improve the lives of web developers who are building modern apps using the latest frameworks, build tools and best practices. Fixing variables is just the beginning. The future is bright!

About jlaster

Staff Engineer on Firefox Developer Tools devving the DevTools and debugging the debugger.

More articles by jlaster…

About Harald Kirschner

Guiding Firefox's Devtools and Performance work. Come hangout with the DevTools team!

More articles by Harald Kirschner…


  1. Aaron

    Do the people at mozilla realize that a quantum leap is the smallest possible leap?

    May 15th, 2018 at 12:16


    1. Harald Kirschner

      True, relative to other leaps (big one for an electron though). We are also just big fans of the sci-fi TV series … and the metaphorical meaning.

      May 24th, 2018 at 12:56


  2. Valentin

    Still no debugging of a WebSocket frames in the network tab?

    May 17th, 2018 at 00:12


    1. Harald Kirschner

      We have WebSocket work lined up in the roadmap. The plan is to add an experimental web extension to provide the necessary APIs to bring the web extension panel back as extension.

      May 24th, 2018 at 12:54


  3. Thomazella

    Niiiice. I use the debugger a lot and any quality of life improvements are very welcome. Keep it up, if I run into issues I’ll investigate.

    May 17th, 2018 at 08:55


  4. Neville Bradley

    Looking good !

    May 19th, 2018 at 19:32


Post Your Comment