Document React DevTools

src/content/docs/ext-dev/devtools.md

@@ -25,16 +25,38 @@ To see the source of a module, print the function with `spacepack.inspect`:
 spacepack.inspect(/* module ID */)
 ```
 
-The returned value will be a function you can double click to see the module source. The bottom left "Pretty print" button can be used to make the output more readable. It is suggested to disable pretty printing temporarily when writing patches.
+The returned value will be a function you can double click to see the module source.
 
 You can chain `inspect` with `findByCode` (or an equivalent) when trying to find the source of a patch in a rush:
 
 ```js
 spacepack.inspect(spacepack.findByCode(/* finds */)[0].id)
 ```
 
-The pattern `n(/* some number */)` represents a require, and is another module ID inside of the argument. You can pass that module ID to `spacepack.inspect` to read the required module source.
+## Using the Sources tab
+
+- Minimize the navigator by clicking "Hide navigator" on the top left. This introduces a severe amount of lag by having it open.
+- The bottom left "Pretty print" button can be used to make the output more readable.
+  - Toggle on pretty print when reading and debugging code.
+  - Toggle off pretty print when testing or writing patches.
+- When testing patches, use Find (Ctrl+F) and enable regex mode on the right side, and paste the find in without the surrounding slashes (`/`).
+
+## Common patterns
+
+- The pattern `n(/* some number */)` represents a require, and is another module ID inside of the argument. You can pass that module ID to `spacepack.inspect` to read the required module source.
+- `Z` and `ZP` usually correspond to `default` exports.
+- Mentions of `jsx` and `createElement` imply construction of React components.
 
 ## Using the debugger
 
-You can set breakpoints on Webpack modules to inspect the variables at runtime. Click on the left sidebar to set a breakpoint.
+You can set breakpoints on Webpack modules to inspect the variables at runtime. Click on the left line number area to set a breakpoint. See variables in breakpoints (and toggle breakpoints) on the right sidebar.
+
+## React DevTools
+
+React DevTools allows you to inspect the React component tree easier, instead of its representation with the DOM. You can view the sources of components and their props this way.
+
+Either [use the rehosted version](https://moon.light.pm/files/reactdevtools.zip) or [download the extension and extract it yourself](https://react.dev/learn/react-developer-tools). Use the "DevTools Extensions" extension to load it. A new Components tab will appear in DevTools.
+
+You can use the element picker to select components. Props are available on the right side. Click the bug icon to view data about the component. Click the bracket icon to view the source of the component.
+
+For best results, enable "Patch all" in the moonlight settings.

src/content/docs/ext-dev/helpful-exts.md

@@ -27,3 +27,7 @@ Spacepack allows you to find and inspect Webpack modules. The "Add to global sco
 - `findByCode`, `findByExports`: Returns an array of Webpack modules that has code/exports that match the arguments.
 - `findObjectFromKey`, `findObjectFromValue`, `findObjectFromKeyValuePair`, `findFunctionByStrings`: Search the exports of a Webpack module to find an object or function using the given arguments.
 - `modules`, `cache`: The Webpack modules and cache objects.
+
+## DevTools Extensions
+
+Allows you to load custom Chrome extensions into Discord, primarily for debugging. It is suggested to enable this and install [React DevTools](/ext-dev/devtools#react-devtools).