How to Live-Edit a Site with Firefox’s Web Developer Tool

Live Edit Site With Firefox Featured

Would your site look better if the logo was moved five pixels to the right or had a blue background? Would adding a border or shadows to the images in your featured posts make them pop more? Modern browsers like Firefox come with Web Developer Tools that allow you to inspect a site’s inner workings and make live edits, watching the results in real-time.

In this tutorial you’ll learn how to make use of Firefox’s Web Developer Tools to live-edit any site.

Note: This tutorial applies for most browsers, including Chrome, Opera and Safari.

Meet the Web Developer Tools

Firefox’s Web Developer Tools is a comprehensive set of tools, from displaying all DOM elements to being able to measure its speed. For this tutorial you only need the “Inspector” and “Style Editor” tools.

Fire up Firefox and visit any/your site. From Firefox’s hamburger menu (on the top right by default), choose “Web Developer -> Style Editor” or press the Shift + F7 combination on your keyboard.

Live Edit Site With Firefox Launch Style Editor

Firefox’s Web Developer panel will appear on one side of its window – usually at the bottom part. You can change its position by clicking on the three-dots button on the top right of the panel and choosing “Dock to Right/Left” or “Separate Window.”

Live Edit Site With Firefox Separate Window

Note: This tutorial is not showing you how to code HTML and CSS. You can learn the basics here.

Inspecting the element

To be able to affect how an element looks, you have to be able to identify it. Click on the very first button on its toolbar or press Ctrl + Shift + C on your keyboard to enable the element-picker mode.

Live Edit Site With Firefox Element Picker

Move your mouse around the site to see different elements of the webpage highlighted. Next to them you will see their primary identifier hovering in a pop-up.

Live Edit Site With Firefox Choose Logo

When you click on an element, it will be selected in the Inspector tab of the Developer Tools.

Live Edit Site With Firefox Inspector

When you find the element you wish to tweak, right-click on its entry in the Developer Tools Inspector and select from the pop-up window that appears – “Copy -> CSS Selector.”

Live Edit Site With Firefox Copy Selector

Start Your Live Edit

With your element’s CSS Selector copied to the clipboard, move back to the Style Editor tab in the Developer Tools window. Click on the “+” button on the top left to “Create and append a new stylesheet to the document.”

Live Edit Site With Firefox New Stylesheet

Paste your CSS Selector inside the new, blank stylesheet. Add a space, followed by a set of opening and closing curly brackets.

Live Edit Site With Firefox Paste Selector

In CSS, an element’s looks is defined by first “targeting it” using an identifier like that CSS Selector, then adding some rules that affect its appearance, grouped inside curly brackets. Everything placed between the opening and closing curly brackets affects the “targeted element.”

For example, if you add the rule below:

This will hide from view the element where it is used. It is probably the easiest way to know that you’re targeting the correct element on your page. If it disappears, it was, indeed, the one you want, and you can delete this rule to try out others. If it didn’t disappear, it’s time to go back to the Inspector and select something different.

Live Edit Site With Firefox Change Background Color

We won’t be showing you how to code CSS here, but you can play around with some of the popular rules like:

You will notice that the site’s element changes as you add rules to the CSS stylesheet.

As a closing note, remember that nothing is saved. If you like how your tweaks look, copy your code somewhere – in a TXT file or your favorite note-taking application – so that you or a designer/developer will be able to add it to your sites’s stylesheet to make the changes permanent. If you need to learn about CSS, check out some online games to help you master the skill.

Related:

Leave a Comment

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.