[skip e2e] debug using source maps (#16933)

development/README.md

@@ -75,3 +75,26 @@ To debug in a production Sentry environment:
 -   Build the project to the `./dist/` folder with `yarn dist`
 
 Errors reported whilst using the extension will be displayed in Sentry's `Issues` page.
+
+## Source Maps
+
+### Debugging production builds using Source Maps
+
+To unbundle the extensions compiled and minified JavaScript using Source Maps:
+
+- Open Chrome DevTools to inspect the `background.html` or `home.html` view  
+- Click on the `Sources` tab in Chrome DevTools
+- In the Sources tab, click on the `Page` panel
+- Expand the file directory in the Page panel until you see the source files you're after
+- Select a source file in the Page panel 
+```
+chrome-extension://{EXTENSION_ID}/common-0.js
+```
+- Double click the source file to open it in the Workspace
+- Right click in the body of the source file and select `Add source map...`
+- Enter the path to the corresponding source map file, and Click `Add`
+``` 
+file:///{LOCAL_FILE_SYSTEM}/metamask-extension/dist/sourcemaps/common-0.js.map
+```
+- Repeat the steps above as necessary adding all the relevant source map files
+- Your source maps should now be added to the DevTools Console, and you should be able to see your original source files when you debug your code