Merge branch 'main' into v4.7.0

replugged-org · Sep 22, 2023 · 9818e76 · 9818e76
2 parents d4ee941 + 79cb139
commit 9818e76
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 27 deletions.
diff --git a/docs/plugins/devtools.md b/docs/plugins/devtools.md
@@ -0,0 +1,56 @@
+---
+sidebar_position: 5
+title: Developer Tools
+description: Use these tools to improve the development experience
+---
+
+## React Developer Tools
+
+From v4.6.0, Replugged comes with the possibility to enable the
+[React Developer Tools](https://react.dev/learn/react-developer-tools) extension. With the React
+DevTools you can inspect the React tree and debug more easily.
+
+### How to enable
+
+React DevTools can be enabled in Replugged's General Settings, under the Advanced Settings category,
+and after a client relaunch, you'll be ready to use the extension.
+
+### How to use
+
+React DevTools come together with the Chrome DevTools (<kbd>Ctrl</kbd> + <kbd>Shift</kbd>
++&nbsp;<kbd>I</kbd> or <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>) in two new panels called
+exactly `⚛️ Components` and `⚛️ Profiler` (if you don't see them, they may be hidden in the dropdown
+menu).
+
+The `⚛️ Components` panel will become a very useful companion when looking for a React component's
+source. It will be enough to select the component, after activating the option of selecting an
+element in the top left corner, and click on the `< >` icon in the panel next to the tree.
+
+![Demo](../../src/assets/RDT-demo.gif)
+
+## Development Companion Extension
+
+Replugged v4.3.0 contains support for
+[Vencord's dev companion extension](https://marketplace.visualstudio.com/items?itemName=Vendicated.vencord-companion).
+It is an extension for VSCode that allows you to test your module finds and plaintext patches
+without having to rebuild your plugin and reload your client.
+
+After installing, your module finds and plaintext patches should now have small texts like "Test
+Find" and "Test Patch" above them. Clicking them will show a notification within VSCode with
+diagnostics about the result.
+
+:::note
+
+For plaintext patches to work, your patch MUST have a `find`! The extension was not made to parse
+patches without them.
+
+```js
+export default [
+  {
+    find: "SOMETHING",
+    replacements: [{}],
+  },
+];
+```
+
+:::
diff --git a/docs/plugins/getting-started.md b/docs/plugins/getting-started.md
@@ -97,33 +97,6 @@ with your command to disable it.
 Some plugins will require you to fully reload Discord (<kbd>Ctrl</kbd> + <kbd>R</kbd>) to apply
 changes, for example if you are using plaintext patches (we will go over that later).
 
-## Development Companion Extension
-
-Replugged v4.3.0 contains support for
-[Vencord's dev companion extension](https://marketplace.visualstudio.com/items?itemName=Vendicated.vencord-companion).
-It is an extension for VSCode that allows you to test your module finds and plaintext patches
-without having to rebuild your plugin and reload your client.
-
-After installing, your module finds and plaintext patches should now have small texts like "Test
-Find" and "Test Patch" above them. Clicking them will show a notification within VSCode with
-diagnostics about the result.
-
-:::note
-
-For plaintext patches to work, your patch MUST have a `find`! The extension was not made to parse
-patches without them.
-
-```js
-export default [
-  {
-    find: "SOMETHING",
-    replacements: [{}],
-  },
-];
-```
-
-:::
-
 ## Building, updating, and releasing
 
 ### Release Tool

diff --git a/src/assets/RDT-demo.gif b/src/assets/RDT-demo.gif