Previewing tutorial
Madis0 opened this issue ยท 3 comments
Hello,
I'm posting the tutorial for easily (kinda) previewing styles, you could add this to the readme for example.
Feel free to modify this in any way (wording, markup, simplification). Reference: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
Testing styles
Pre-setup
Before being able to try styles, you need to enable two developer options (only do this once). To do that:
- Press
Ctrl
+Shift
+I
on Win/Linux orCmd
+Opt
+I
on Mac - Click on the cog that appears in a right or left top corner, next to other buttons.
- Scroll down to Advanced Settings and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
- Close the developer tools panel and proceed with next tutorial
Testing a style
- Press
Ctrl
+Alt
+Shift
+I
on Win/Linux orCmd
+Opt
+Shift
+I
on Mac - Click on the tab Style Editor, choose file userChrome.css on the sidebar
- Choose the style you want to preview from this repository, copy the code
- Scroll down on the development tools window textbox, paste the code
- You should see the style being applied. If you like what you see, you can click Save, otherwise it will disappear after restarting the browser.
You can actually select the userChrome.css
file and change this one. After changing it to your liking, you can save it directly from the devtools.
You're right, updated the tutorial.
I posted the tutorial here: https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/