Add x_google_ignoreList (Ignore-listing code) support to sourcemaps

[0xdevalias]

Describe the problem

Currently, while debugging applications using Chrome DevTools, developers often face the challenge of navigating through not only their own code but also through extensive third-party library or framework code. This situation arises particularly in projects with complex structures and numerous dependencies, leading to a cumbersome and time-consuming debugging process.

Describe the proposed solution

Introduce the x_google_ignoreList extension in the sourcemaps generated by this project. This will facilitate a more streamlined debugging experience in Chrome (and other supporting browsers) by automatically filtering out framework and dependency code.

Benefit

Implementing x_google_ignoreList in the sourcemaps will align this project with modern web development practices, offering a more focused and efficient debugging experience for developers using Chrome DevTools. This change will particularly benefit those who regularly engage in debugging complex applications with numerous dependencies.

Background Context

• https://developer.chrome.com/blog/devtools-modern-web-debugging/#just-my-code

  • The ignore-listing is enabled by populating an extra x_google_ignoreList field in the source map that Angular generates when compiling the project. The Chrome DevTools team encourages other framework authors to implement a similar change. Refer to the Case Study: Better Angular Debugging with DevTools post for more details.

• https://developer.chrome.com/blog/devtools-better-angular-debugging/#ignore-listing-code

  • Ignore-listing code
    When debugging applications using Chrome DevTools, authors generally only want to see just their code, not that of the framework underneath or some dependency tucked away in the node_modules folder.

    To achieve this, the DevTools team has introduced an extension to source maps, called x_google_ignoreList. This extension is used to identify third-party sources such as framework code or bundler-generated code. When a framework uses this extension, authors now automatically avoid code that they don't want to see or step through without having to manually configure this beforehand.

    The x_google_ignoreList source map extension is supported by Chrome DevTools starting with Chrome 106.

• https://developer.chrome.com/articles/x-google-ignore-list/

  • The ignoreList source map extension

    Improve debugging experience in Chrome DevTools with the ignoreList source map extension.

Alternatives considered

1. Manual Filtering in Chrome DevTools:

The first alternative involves the use of manual filtering within Chrome DevTools. This method requires developers to individually specify scripts or code segments to be skipped during debugging. While this provides a basic level of control, it is inefficient and time-consuming, particularly in larger projects with numerous dependencies. Each developer must set up these filters, leading to inconsistent experiences and increased setup time for each debugging session.

2. Community Plugins or Extensions:

Another option is to use community-developed plugins or extensions that offer functionality similar to x_google_ignoreList. This approach could be a quick fix, providing an interim solution without requiring significant development effort from our team. However, it depends heavily on the reliability and continued support of these third-party solutions. There's also a risk of these plugins not being fully compatible with all versions of Chrome or other browsers, and they may not integrate as seamlessly as a native solution would.

Evaluation of Alternatives:

• Manual Filtering: Offers basic control but is inefficient and inconsistent across different developers' setups.
• Community Plugins: Provides a quicker, less resource-intensive solution but relies on third-party support and may lack long-term viability and integration.

Conclusion:

While both of these alternatives offer some benefits, they fall short in terms of efficiency, consistency, and reliability compared to the proposed implementation of x_google_ignoreList in our sourcemaps. The native integration of x_google_ignoreList with Chrome DevTools ensures a more streamlined and uniform debugging experience, aligning our project with modern web development practices.

Importance

would make my life easier

See Also

• Add x_google_ignoreList (Ignore-listing code) support to sourcemaps facebook/react#27774
• Add x_google_ignoreList (Ignore-listing code) support to sourcemaps markerikson/react-prod-sourcemaps#19
• Add x_google_ignorelist vercel/next.js#41370
  • Add `x_google_ignorelist` vercel/next.js#41371
• Add `x_google_ignoreList` (Ignore-listing code) support to sourcemaps vuejs/rfcs#607
• Add x_google_ignoreList (Ignore-listing code) support to sourcemaps developit/microbundle#1066
• feat(@angular-devkit/build-angular): Identify third-party sources in sourcemaps angular/angular-cli#23545
• https://nuxt.com/blog/v3-3#better-logging-in-browser-devtools
  • feat(vite): add node_modules and buildDir to x_google_ignoreList nuxt/nuxt#19243
• https://vitejs.dev/config/server-options.html#server-sourcemapignorelist
  • feat: add sourcemapIgnoreList configuration option vitejs/vite#12174
  • fix: sourcemapIgnoreList for optimizedDeps vitejs/vite#12633
  • docs: update x_google_ignoreList documentation url vitejs/vite#12694
• https://rollupjs.org/configuration-options/#output-sourcemapignorelist
  • Add support for x_google_ignoreList rollup/rollup#4847
  • Update magic-string and adjust types. rollup/rollup#4846
  • Introduce sourcemapIgnoreList config predicate rollup/rollup#4848
  • docs: Update the x_google_ignorelist url rollup/rollup#4926
• Add support for x_google_ignoreList Rich-Harris/magic-string#241
  • feat(x_google_ignoreList): initial support for ignore lists Rich-Harris/magic-string#240
  • feat: add the ability to ignore-list sources Rich-Harris/magic-string#243

[0xdevalias]

• https://developer.chrome.com/blog/new-in-devtools-120/#ignore-list-spec

  • The source maps specification has adopted the ignoreList field instead of x_google_ignoreList and DevTools now supports the new name with a fallback for the old one. Frameworks and bundlers can now use the new field name.

Originally posted by @0xdevalias in facebook/react#27774 (comment)