Introduction: Editing a Webpage in Google Chrome

Picture of 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

Picture of 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.

Step 2: Editing the HTML

Picture of Editing the HTML

If you want to edit the HTML of the webpage, it's very easy. If the specific item that you want to edit is visible, use your mouse to scroll over the source code. As you do, the part of the webpage that that item or container controls will be highlighted, most likely in blue. If the source that your mouse is hovering over is a container, click the little drop down arrow to its immediate left. Once you have the element that you want, right click it. A menu will appear; select the item that is labeled Edit as HTML. Now, you can make the changes you want to the source. When you are done, click anywhere outside of the editor. Now, the webpage is updated to your specifications.

Step 3: Editing the CSS

Picture of Editing the CSS

If you want to change anything about the actual appearance of the webpage, like it's color for example, then you need to edit the CSS. This is done in much the same manner as is editing the HTML. Simply hover over the source until the part of the webpage that you want to edit is highlighted. Click on the corresponding source element. Now, shift your attention to the right side of the Source Editor. Here, you see the CSS editor, where you can change the appearance of the selected element. To change this code, just click on the desired item and preform your changes. 

Step 4: Where to Go From Here?

Picture of Where to Go From Here?

If you are already proficient in HTML, JavaScript, or CSS, then you can jump right into editing any webpage that you want. If you aren't, I would recommend trying to learn at least some basics. A great resource is w3schools. It has tutorials and code examples for almost everything you can think of. Happy coding!

Comments

Halifaxmick (author)2017-08-10

Hi there, I have edited my website several times using your instructions but it doesn't save when I exit. The webpage just keeps reverting to its original content. Can you help with this problem please? Cheers Mick

MD AJIJURR (author)2016-03-21

.....

AndrewB94 (author)2015-09-29

psdwordpress (author)2015-09-05

also if you need your PSD TO WORDPRESS you can easily edit it later and drop a message to www.psdtowordpress.eu

vishunathan2013 (author)2015-04-03

ScarletW made it! (author)2015-03-14

cxc..thanks

Baba3 (author)2015-01-17

Thank you for the instructions! My question is - After I have finished doing my edits to the source, how do I send the edited source to the web manager of the website so that he can use it?

By way of explanation, what I am doing is translating a website. The website is in Arabic, and I am translating it into English so that the web manager can put up an English language version of his website. I thought a good way to do this would be to go into the source and translate there, and then send the translated source to the web manager.

Any help gratefully received!

nerd7473 (author)2015-01-15

you don't even need Google chrome to do this... you just need a browser like firefox it has its own developer tools just go to the menu, click it and scroll down to developer. and you can pick out one of many tools including WebIDE

mareo.lancellotti (author)2014-09-05

@WoodshopInstructor codeacademy is a good place to learn how to code. w3schools is a great resource. w3schools has been a reputable resource for years.

WoodshopInstructor (author)2014-05-13

Stay away from w3schools! If you want to learn how to code, use codeacademy.com. It offers lessons to learn HTML, JQuery, Javascript, Ruby, and other languages. It's what I used to learn..pretty helpful. :)

About This Instructable

221,801views

28favorites

Bio: I am a computer programming, book reading, music making DIYer!
Add instructable to: