feat[devtools]: support x_google_ignoreList source maps extension #26951

hoxyq · 2023-06-14T17:09:41Z

Summary

This was originally implemented by Mengdi @mondaychen in #26506.

Because we patch console methods (to append components stack and some other features), errors in console will include react_devtools_backend-....js in its stack traces. Example:

Using https://github.com/mondaychen/devtools-ignore-webpack-plugin to support x_google_ignoreList source maps extension.

@mondaychen created a react app, which throws an error via console.error, when user click on the button - https://3owqsn.csb.app/.

Stack trace with these changes:

react-sizebot · 2023-06-14T17:15:12Z

Comparing: 4ddc019...eba1938

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	164.23 kB	164.23 kB	=	51.73 kB	51.73 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	171.67 kB	171.67 kB	=	53.97 kB	53.97 kB
facebook-www/ReactDOM-prod.classic.js	=	570.12 kB	570.12 kB	=	100.58 kB	100.58 kB
facebook-www/ReactDOM-prod.modern.js	=	553.90 kB	553.90 kB	=	97.75 kB	97.75 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against eba1938

hoxyq · 2023-06-15T12:41:37Z

packages/react-devtools-shared/src/__tests__/utils.js

@@ -152,7 +152,7 @@ export function getRendererID(): number {
    return rendererInterface.renderer.rendererPackageName === 'react-dom';
  });

-  if (ids == null) {
+  if (id == null) {


this is just a typo fix

mondaychen · 2023-06-15T13:31:51Z

nice!!

List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [#27008](#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [#26997](#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [#26955](#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [#26963](#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [#26830](#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](#26825))

@mondaychen

…cebook#26951) ## Summary This was originally implemented by Mengdi @mondaychen in facebook#26506. Because we patch console methods (to append components stack and some other features), errors in console will include `react_devtools_backend-....js` in its stack traces. Example: <img width="763" alt="Screenshot 2023-06-15 at 13 31 49" src="https://github.com/facebook/react/assets/28902667/fa9c3d26-b6c5-4965-af71-62d100cd806d"> Using https://github.com/mondaychen/devtools-ignore-webpack-plugin to support [x_google_ignoreList source maps extension](https://developer.chrome.com/blog/devtools-better-angular-debugging/#the-x_google_ignorelist-source-map-extension). @mondaychen created a react app, which throws an error via `console.error`, when user click on the button - https://3owqsn.csb.app/. Stack trace with these changes: <img width="759" alt="Screenshot 2023-06-14 at 14 26 38" src="https://github.com/facebook/react/assets/28902667/b118b168-3200-4a47-9718-39fc455ea993">

List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [facebook#27032](facebook#27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [facebook#27008](facebook#27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [facebook#26997](facebook#26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [facebook#26955](facebook#26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [facebook#26963](facebook#26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [facebook#26983](facebook#26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [facebook#26951](facebook#26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [facebook#26887](facebook#26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [facebook#26947](facebook#26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [facebook#25510](facebook#25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [facebook#26888](facebook#26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [facebook#26830](facebook#26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [facebook#26825](facebook#26825))

@mondaychen

…6951) ## Summary This was originally implemented by Mengdi @mondaychen in #26506. Because we patch console methods (to append components stack and some other features), errors in console will include `react_devtools_backend-....js` in its stack traces. Example: <img width="763" alt="Screenshot 2023-06-15 at 13 31 49" src="https://github.com/facebook/react/assets/28902667/fa9c3d26-b6c5-4965-af71-62d100cd806d"> Using https://github.com/mondaychen/devtools-ignore-webpack-plugin to support [x_google_ignoreList source maps extension](https://developer.chrome.com/blog/devtools-better-angular-debugging/#the-x_google_ignorelist-source-map-extension). @mondaychen created a react app, which throws an error via `console.error`, when user click on the button - https://3owqsn.csb.app/. Stack trace with these changes: <img width="759" alt="Screenshot 2023-06-14 at 14 26 38" src="https://github.com/facebook/react/assets/28902667/b118b168-3200-4a47-9718-39fc455ea993"> DiffTrain build for commit e3fb7c1.

feat[devtools]: support x_google_ignoreList source maps extension

eba1938

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 14, 2023

hoxyq requested review from motiz88 and tyao1 June 15, 2023 12:27

hoxyq marked this pull request as ready for review June 15, 2023 12:40

hoxyq commented Jun 15, 2023

View reviewed changes

motiz88 approved these changes Jun 21, 2023

View reviewed changes

hoxyq merged commit e3fb7c1 into facebook:main Jun 21, 2023
2 checks passed

hoxyq deleted the devtools/support-x-google-ignore-list branch June 21, 2023 11:36

styfle mentioned this pull request Jun 30, 2023

chore(deps): bump react 18.3.0-canary-1fdacbefd-20230630 vercel/next.js#52005

Merged

hoxyq mentioned this pull request Jul 4, 2023

React DevTools 4.27.8 -> 4.28.0 #27051

Merged

styfle mentioned this pull request Jul 5, 2023

chore(deps): bump react to 7118f5dd7 vercel/next.js#52282

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat[devtools]: support x_google_ignoreList source maps extension #26951

feat[devtools]: support x_google_ignoreList source maps extension #26951

hoxyq commented Jun 14, 2023 •

edited

Loading

react-sizebot commented Jun 14, 2023

hoxyq Jun 15, 2023

mondaychen commented Jun 15, 2023

feat[devtools]: support x_google_ignoreList source maps extension #26951

feat[devtools]: support x_google_ignoreList source maps extension #26951

Conversation

hoxyq commented Jun 14, 2023 • edited Loading

Summary

react-sizebot commented Jun 14, 2023

Critical size changes

Significant size changes

hoxyq Jun 15, 2023

Choose a reason for hiding this comment

mondaychen commented Jun 15, 2023

hoxyq commented Jun 14, 2023 •

edited

Loading