fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-09-19 18:47:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

README.md: how to use remote debugger

Browse source
This commit is contained in:
Oliver Smith 2020-08-10 22:17:47 +00:00
parent 2872ff2a98
commit 56bd6a2e84
1 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
README.md
View file

@ -37,3 +37,28 @@ To save screen space, remove broken features, and have less distractions in the
* Replace `src/homepage/distro_links.html`
* Build with `make DISTRO=yourdistroname`
* In your packaging recipie, run something like `make DESTDIR=$pkgdir install`
## Contributing changes to userChrome
Firefox' developer tools include a [remote debugger](https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging), which even has the "pick an element" feature. You will be able to click that button on your PC, then tap on an element of the Firefox UI on your phone, and then you will see the HTML code and CSS properties on your PC just as if it was a website. So this is highly recommended when contributing changes to `userChrome.css`.
* Connect your phone and your PC to the same network (Wi-Fi or USB network)
* On your phone, open Firefox and `about:config`:
* Change `devtools.chrome.enabled` to `true`
* Change `devtools.debugger.remote-enabled` to `true`
* The debugger will only listen on localhost by default. If you know what you are doing, you may set `devtools.debugger.force-local` to `false`, so it listens on all interfaces. Otherwise you'll need something like an SSH tunnel.
* Close firefox
* Connect to your phone via SSH
* Set up environment variables properly, so you can start programs (one lazy way to do it, is `tmux` on your phone in the terminal, then `tmux a` in SSH)
* Run `firefox --start-debugger-server 6000` (or another port if you desire)
* Run Firefox on your PC
* (Firefox ESR 68: enable `devtools.aboutdebugging.new-enabled` in `about:config`)
* Go to `about:debugging`
* Add your phone as "network location"
* Press the connect button on the left
* On your phone
* Confirm the connection on your phone's screen
* If the button is not visible on the screen, try switching to a terminal virtual keyboard, hit "tab" three times and then return
* On your PC
* Scroll down to Processes, Main Process, and click "Inspect"
* Now use the "Pick an element" button as described in the introduction. Find the `userChrome.css` file in the "Style editor" tab and edit it as you like.
* Consider copy pasting the contents to a text editor every now and then, so you don't lose it when closing Firefox by accident.