Firefox Developer Tools: a simple example

I don't use Developer Tools very often, so its a bit of a struggle remembering how to use them when I do.

 

Therefore this is a handy reminder to me (as much as anything) on how to make & test some simple edits.

I'm going to use the Gambas One forum as my test site for this example.

This example was prompted by a small issue concerning "underscore" characters which seemed to be missing from a recent Gambas forum post.

This was due to the display of the forum post on Firefox on my installation of PeppermintOS, so many other users may not see this problem.

It turns out that there is a simple formatting fix for this, which would need to be done by the website administrator. However, anyone can explore the web page code and experiment with potential fixes using the Developer Tools found on most common web browsers.

For this example I'm going to use Firefox, but hopefully you will be able to work out how to do the same thing with the tools available for other browsers.

procedure

So let's start by viewing the first post on this page.

Then right-mouse-click on the page and select Inspect from the pop-up menu.

The Developer Tools display will appear, and its screen position will depend upon your settings (e.g. below page, to the right side, & so on).

Select the control to turn on "Pick an element..." (note: this is a toggle button)

Pass the mouse cursor over the first line in the Gambas highlighter box, then left-mouse-click on the grey square at the end of this line:-

This page element is now selected

 

In the next Developer panel to the right, you should see the CSS code:-

In the line containing:-

 padding: 0 1em !important

...double click on 1em and edit to read:-

 padding: 10px !important

The text in the Gambas highlighter box will instantly change to reflect the new padding value. However, the line number spacing has not changed, so this is not quite the effect we were looking for.

Edit this change back to how it was:-

 padding: 0 1em !important

Now click on the link to theme.css

In the code that appears in this panel, make some space and add these new lines of code:-

As soon as you make this edit, the padding around the Gambas code should be applied.

This is one possible edit that could be applied to the website by the administrator to improve readability, but maybe just play around with settings and values to get the result that you prefer.

Here is an alternative possible improvement:-

 

 

Clearly this has added padding only to the top & bottom (not to the sides). 

conclusion

The browser Developer Tools give the user the ability to tweak page elements to see how these changes affect the page display. These changes are not permanent, and can only be made so by the site administrator applying the same changes to the website files.

Therefore you don't have to worry that you might break something on someone else's website!

With the theme.css displayed as shown in the last illustration, it is also possible to highlight all the code in theme.css and save a copy.