SEARCH

How-To Geek

Edit Text in a Webpage with Internet Explorer 8

Internet Explorer is often decried as the worst browser for web developers, but IE8 actually offers a very nice set of developer tools.  Here we’ll look at a unique way to use them to edit the text on any webpage.

How to edit text in a webpage

IE8’s developer tools make it easy to make changes to a webpage and view them directly.  Simply browse to the webpage of your choice, and press the F12 key on your keyboard.  Alternately, you can click the Tools button, and select Developer tools from the list.

image

This opens the developer tools.  To do our editing, we want to select the mouse button on the toolbar “Select Element by Click” tool.

image

Now, click on any spot of the webpage in IE8 that you want to edit.  Here, let’s edit the footer of Google.com.  Notice it places a blue box around any element you hover over to make it easy to choose exactly what you want to edit.

image

In the developer tools window, the element you selected before is now highlighted.  Click the plus button beside that entry if the text you want to edit is not visible.

 image

Now, click the text you wish to change, and enter what you wish in the box.  For fun, we changed the copyright to say “©2010 Microsoft”.

image

Go back to IE to see the changes on the page!

image

You can also change a link on a page this way:
image

Or you can even change the text on a button:

image

Here’s our edited Google.com:
image

This may be fun for playing a trick on someone or simply for a funny screenshot, but it can be very useful, too.  You could test how changes in fontsize would change how a website looks, or see how a button would look with a different label.  It can also be useful when taking screenshots.  For instance, if I want to show a friend how to do something in Gmail but don’t want to reveal my email address, I could edit the text on the top right before I took the screenshot.  Here I changed my Gmail address to test@yahoo.com.

image

Please note that the changes will disappear when you reload the page.  You can save your changes from the developer tools window, though, and reopen the page from your computer if you wish.

image

We have found this trick very helpful at times, and it can be very fun too!  Enjoy it, and let us know how you used it to help you!

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 03/4/10

Comments (2)

  1. Logan Dobson

    Thats so Cool :)

  2. Purdee

    I need help please. My computer at work has Window 5 and Internet Explorer 6. Some websites that I visit have very large text and pictures. I tried these solutions found on the web and they did not work:
    1. View – Text size – Small
    2. Tools – Options – General tab – Accessibility – Checked off “ignore font size specified in web pages”
    Is there no more solution to the problem? Please help.
    Thank you.

Enter Your Email Here to Get Access for Free:

Go check your email!