Website

How to Inspect and Change Page Style Using Google Chrome

Introduction

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.
Inspecting element on Google Chrome

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
is selected.
Checking necessary element

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.
Changing color

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:
Final view

Conclusion

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.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More in Website
How to Link a Stylesheet (CSS) File to Your HTML File

Close