Editing a webpage in Google Chrome

Editing a webpage in Google Chrome

       What if I told you that you could edit any webpage or website on the internet right from your home computer without any special software or insane computer programming skills? It's easy! The only thing that you need to make this trick work is the popular web browser Google Chrome. This trick will allow you to change the appearance of any webpage on your local machine. This means that it is localized; only you can see this, as it is only affecting the static page on your machine. It is also temporary. Once you refresh, reload, whatever, the changes you made will be lost. However, this is still a fun and potentially useful trick.

Sorry in advance if the picture quality is not desirable, the screenshots that I took were not high quality.

Step 1: Use the Developer Tools

In Google Chrome, there is a feature known as 'Developer Tools'. This is similar to an onscreen view of the webpages' source code, except that it is in some ways dynamic. You can change the code that you see, and the webpage will respond accordingly. So, how do we access this magical feature? Simple. On your keyboard, press

       Ctrl + Shift + I

Mind you, that is an uppercase i (I), not a lowercase l (L). If you prefer to access this feature without your keyboard, or don't want to try and remember the keyboard shortcut, never fear. Simply press on the Tools button in the upper right-hand corner. It will either look like a wrench, or a series of three lines on top of each other. Once there, hover over the menu item labeled Tools, about halfway down the menu. There will be another menu that appears. Near the bottom is an item labeled Developer Tools. Click on it. Now you have access to Chrome's dynamic source editor. To edit HTML/CSS, navigate to the tab marked Elements. To use the JavaScript Console, select the tab marked Console.