Introduction
Today, authors can use many abstractions to build their Web applications. Instead of directly interfacing with the lower-level APIs that the Web Platform provides, many authors leverage frameworks, build tools and compilers to write their applications from a higher-level perspective.
For example, components built on top of the Angular framework are authored in TypeScript with HTML templates. Underneath the hood, the Angular CLI and webpack compile everything to JavaScript and into a so-called bundle, which is then shipped to the browser.
When debugging or profiling Web applications in DevTools, you currently get to see and debug this compiled version of your code instead of the code you actually wrote. As an author, this is not want you want, though:
- You don’t want to debug minified JavaScript code, you want to debug your original JavaScript code.
- When using TypeScript, you don’t want to debug JavaScript, you want to debug your original TypeScript code.
- When you use templating like with Angular, Lit, or JSX, you don’t always want to debug the resulting DOM. You might want to debug the components themselves.
Overall, you likely want to debug your own code as you wrote it.
While source maps already close this gap to some extent, there is more that Chrome DevTools and the ecosystem can do in this area.
Let’s take a look!
Authored versus Deployed Code
Currently, when navigating the file tree in the Sources Panel, you get to see the contents of the compiled—and often minified—bundle. These are the actual files that the browser downloads and runs. DevTools calls this the Deployed Code.
This is not very handy and often hard to grasp. As an author, you want to see and debug the code that you wrote, not the Deployed Code.
To make up for it, you can now have the tree show the Authored Code instead. This makes the tree more closely resemble source files you get to see in your IDE, and these files are now separated from the Deployed Code.
To enable this option in Chrome DevTools, go to Settings > Experiments and check