Add example docs for debug logging and diagnostics (#25128)

Co-authored-by: J. Nick Koston <nick@koston.org>

source/_docs/configuration/troubleshooting.markdown

@@ -97,3 +97,34 @@ The only characters valid in entity names are:
 - Underscores
 
 If you create an entity with other characters then Home Assistant may not generate an error for that entity. However you will find that attempts to use that entity will generate errors (or possibly fail silently).
+
+## Debug Logs and Diagnostics
+
+The first thing you will need before reporting an issue online is debug logs and diagnostics (if available) for the integration giving you trouble. Getting those ahead of time will ensure someone can help resolve your issue in the fastest possible manner.
+
+### Enabling Debug Logging
+
+To enable debug logging for an integration, go to **Settings -> Devices & Services** and then click the triple dots for the integration giving you trouble and click **Enable Debug Logging**.
+
+<p class='img'>
+  <img src='/images/docs/configuration/enable-debug-logging.gif' alt='Example of Enable Debug Logging'>
+  Example of Enable Debug Logging.
+</p>
+
+### Disable Debug Logging and Download Logs
+
+Once you enable debug logging, you ideally need to make the error happen. Run your automation, change up your device or whatever was giving you an error and then come back and disable Debug Logging. Disabling debug logging is the same as enabling, but now you will see **Disable Debug Logging**. After you disable debug logging, it will automatically prompt you to download your log file. Save this to a safe location to upload later.
+
+<p class='img'>
+  <img src='/images/docs/configuration/disable-debug-logging.gif' alt='Example of Disable Debug Logging'>
+  Example of Disable Debug Logging.
+</p>
+
+### Download Diagnostics
+
+After you download logs, you will also want to download the diagnostics for the integration giving you trouble. If the integration provides diagnostics, it will appear in the same menu that the Debug Logging toggle appeared.
+
+<p class='img'>
+  <img src='/images/docs/configuration/download-diagnostics.gif' alt='Example of Download Diagnostics'>
+  Example of Download Diagnostics.
+</p>

source/_integrations/unifiprotect.markdown

@@ -311,17 +311,6 @@ These URLs work great when trying to send notifications. Home Assistant will aut
 
 ## Troubleshooting
 
-### Enabling Debug Logging
-
-Both the UniFi Protect integration and the Python library it uses provide debug logging that can help you with troubleshooting connectivity issues. To enable debug logging for both, add the following to your `configuration.yaml` file:
-
-```yaml
-logger:
-  logs:
-    pyunifiprotect: debug
-    homeassistant.components.unifiprotect: debug
-```
-
 ### Delay in Video Feed
 
 The default settings on the stream integration will give you a 5-15+ second delay. You can reduce this delay to 1-3 seconds, by enabling [LL-HLS in the stream integration](/integrations/stream/#ll-hls). You will also want to put an HTTP/2 reserve proxy in front of Home Assistant so you can have connection pooling. If you do not add a reverse proxy, you may start to get "Waiting for Websocket..." messages while trying to view too many camera streams at once. One way to do this is using the official NGINX Proxy Add-on: