diff --git a/docs/plugins/devtools.md b/docs/plugins/devtools.md new file mode 100644 index 0000000..53bd7b4 --- /dev/null +++ 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 (Ctrl + Shift ++ I or Cmd + Shift + I) 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 index 0cfac26..10751a9 100644 --- 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 (Ctrl + R) 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 new file mode 100644 index 0000000..e7d1917 Binary files /dev/null and b/src/assets/RDT-demo.gif differ