add instructions in readme for live debugging of user chrome

Tanvir1337x · Jul 8, 2024 · 9ba9088 · 9ba9088
1 parent b4ac75a
commit 9ba9088
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/chrome/panel/statuspanel.css b/chrome/panel/statuspanel.css
@@ -43,3 +43,8 @@
   background-color: #202020 !important;
   color: #c38f8f !important;
 }
+
+/* Hide the status panel */
+/*
+#statuspanel {display: none !important ;}
+*/
diff --git a/readme.md b/readme.md
@@ -107,6 +107,15 @@ Look for specific topics in github: [userchrome](https://github.com/topics/userc
 
 More handy resources: [userchrome.org](https://www.userchrome.org), [FirefoxCSS Store](https://firefoxcss-store.github.io), [Mozilla Bugzilla](https://bugzilla.mozilla.org)
 
+### Live debug and update `userChrome.css`
+
+1. Set `devtools.debugger.remote-enabled` to `true` in `about:config`.
+2. Set `devtools.chrome.enabled` to true in `about:config`.
+3. Open remote debugger using **Ctrl+Alt+Shift+I**.
+4. Allow the incoming connection.
+5. Select Style Editor tab, then open `userChrome.css`.
+6. Edit and save the file for it to take effect (hot reload).
+
 ## Theme
 
 The theme I'm currently using: [RosyBrown Dark by Me](https://addons.mozilla.org/en-US/firefox/addon/rosybrown_dark/)