Sometimes you need to check how a color, font or any other style change looks on the website and for testing purpose browsers allow
us to make changes directly in the browser without affecting any files on the server. This helps to test much faster and what’s more, you can leave the page active for visitors and check changes you want to make without any downtime (it’s not a good practice to test on the working website files). This tutorial explains how to test such changes on the Google Chrome browser.
What you’ll need
Before you begin this guide you’ll need the following:
- A website you want to test
- A Google Chrome browser
- Knowledge of HTML/CSS
Step 1 — Entering the website whose appearance you are going to change
Open your Google Chrome browser and enter the URL of the website you are planning to change to the address bar. www.facebook.com will be used in this example.
Step 2 — Opening Inspect panel
When a website is opened you should select any object on the screen you want to change, hover a mouse on it and right click the mouse.
Now click the last option of the drop-down list -> Inspect.
Step 3 — Selecting the necessary element
Now a necessary element should be automatically selected on the HTML code on the bottom (sometimes Inspect panel opens at the right side of
the page). You should pay attention to the Styles tab at the bottom where all the styles from CSS file are taken for the object which
Step 4 — Changing style attribute
In this example, the header of the website background color is being changed and instead of previous color (#3b5998) we
will test how a Facebook header will look in RED color. We simply delete the value
#3n5998 and enter value
red in that place.
Step 5 — Testing the final view
You can now test how the changes look on the website. Changes apply automatically and you do not need to refresh the page. If the page is refreshed all the changes are gone and the files from the server are uploaded again. This is how a facebook.com website looks with a red header:
This method speeds up testing style changes on the website dramatically. It also allows a developer to check how potential changes look
on the website without affecting any files and leaving the current view of the website for visitors. This tutorial explains how to make these changes using Google Chrome, however, all the modern browsers have a similar feature. There are also plugins for browsers which allow similar changes.