Add x_google_ignoreList (Ignore-listing code) support to sourcemaps

[0xdevalias]

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

• Sourcemaps added to React:
  • Distribute source maps for easier debugging in Chrome's Performance tab facebook/react#20186
    • Generate sourcemaps for production build artifacts facebook/react#26446
• 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.

See Also

• Add x_google_ignoreList (Ignore-listing code) support to sourcemaps facebook/react#27774
• 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 preactjs/preact#4225
• Add x_google_ignoreList (Ignore-listing code) support to sourcemaps sveltejs/svelte#9740
• 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

Tangentially related issues for improving modern debugging support:

• Add Async Stack Tagging API support facebook/react#25742

[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)