Move "debugging userscripts" to a different page

Author: WorldLanguages

content/docs/develop/userscripts/about-userscripts.md

@@ -128,15 +128,3 @@ Each userscript file is a JavaScript module that exports a function. Scratch Add
 Userscripts are JavaScript modules, so they always run on ["strict mode"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode). This also means that userscripts may use [top-level imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) to import other JavaScript files.
 
 <!-- TODO: explain execution order isn't guaranteed -->
-
-
-## Debugging userscripts
-
-<!-- TODO: revisit this section -->
-
-**Make sure to refresh Scratch Addons from `chrome://extensions` after making any changes to your addon.**  
-To debug userscripts, first of all make sure your addon is enabled.  
-Then, go to a URL where you specified your userscript should run.  
-Open the console by pressing Ctrl+Shift+J.  
-You should see console logs by addons, including yours. If you're a devtools pro, you won't have any trouble setting breakpoints in your code.  
-Protip: if you want to test the `addon.*` API without changing your file every time, make your addon `window.addon = addon;` (inside the main function), and you'll be able to access your addon's `addon` object from the console. Make sure to remove that line before contributing to the repo! Userscripts must not pollute the global object.

content/docs/develop/userscripts/debugging-userscripts.md

@@ -0,0 +1,29 @@
+---
+title: Debugging userscripts
+description: Tips to easily debug userscripts.
+---
+
+Tips to easily debug userscripts.
+
+#### It's not always necessary to reload the extension
+
+It's not necessary to reload the extension by going to `chrome://extensions` when changing the source of an already existing JavaScript or CSS files. In those cases, reloading the page is enough.
+
+#### Use the addon.* API from the console
+
+For development, you may choose to expose the `addon` object as a global variable, so that it can be accessed within the browser console.
+
+```js
+export default async function ({ addon, console }) {
+  window.addon = addon;
+  // ...
+}
+```
+
+#### Set breakpoints with the "debugger" keyword
+
+The `debugger;` keyword in JavaScript will freeze the page when ran, if the developer tools are open. Setting breakpoints is useful to inspect the value of local variables during execution.
+
+#### Filter console messages by addon ID
+
+Enter the addon ID on the "filter" console search bar to only view logs and warnings, as well errors logged with `console.error()`. Keep in mind that this will hide all exceptions, unless you're explicitly logging them in your code.