PDF download Download Article
A user-friendly guide to temporarily changing the text on any website with Inspect Element
PDF download Download Article

Do you want to edit the text on a web page to fool a friend? Most modern browsers are equipped with Developer Tools, which allows you to look at and change the code on a web page. You don't need to be familiar with coding to do this; it will only take a few simple steps. Keep in mind these changes will only be temporary as they are applied locally; you can refresh the page to revert it back to normal. This wikiHow will show you how to edit text on any website using Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari.

Changing Text on a Website

  • On Chrome, click "â‹®" → "More tools" → "Developer tools". Click the cursor icon and select the text to replace it.
  • On Edge, click "•••" → "More tools" → "Developer tools". Click the cursor icon and select the text to replace it.
  • On Firefox, click "☰" → "More tools" → "Web Developer Tools". Click the cursor icon and select the text to replace it.
Method 1
Method 1 of 4:

Using Google Chrome

PDF download Download Article
  1. This looks like a red, green, yellow, and blue sphere icon. [1]
  2. As long as the website contains actual text and not images of text, you'll be able to edit it.
    Advertisement
  3. This will be in the top-right corner.
    • A drop-down menu will open.
  4. This will open a new panel on the right side of the page.
    • If you aren't already on the Elements tab, click it now.
  5. This will be in the same row as the Elements , Console , and Sources tab.
    • When you click it, you'll be able to interact with the web page.
  6. Use the left side of the browser with the webpage. As you hover your cursor, the element will highlight. Click the text you want to change.
    • The right panel will be redirected to the text's code location.
  7. When you double-click the text, a box will appear around the text part of the code.
    • Pay close attention to the original text; you don't want to delete the code itself. In most cases, the text will be encased by > and < .
  8. Typing will automatically delete the text.
  9. This is in the top-right corner of the Elements panel.
    • The new text will be reflected on the web page.
    • To return the text back to normal, refresh the page.
  10. Advertisement
Method 2
Method 2 of 4:

Using Safari

PDF download Download Article
  1. Enable the Develop menu . You must have this menu enabled in order to edit the web page's code. Do the following:
    • Open Safari.
    • Click Safari in the menu bar.
    • Click Preferences .
    • Click Advanced .
    • Check the box for Show Develop menu in menu bar .
  2. As long as the website contains actual text and not images of text, you'll be able to edit it.
  3. Click and drag your cursor over the text to highlight it.
  4. This will be towards the bottom of the pop-up menu.
  5. Pay close attention to the original text; you don't want to delete the code itself. In most cases, the text will be encased by > and < .
  6. The new text will take effect.
  7. This will close the Inspect Element window.
    • To return the text back to normal, refresh the page.
  8. Advertisement
Method 3
Method 3 of 4:

Using Microsoft Edge

PDF download Download Article
  1. This is the default browser for Windows.
  2. As long as the website contains actual text and not images of text, you'll be able to edit it.
  3. This will open a drop-down menu.
  4. This will open a new panel on the right side of the page.
    • If you aren't already on the Elements tab, click it now.
  5. This will be in the same row as the Elements tab.
    • When you click it, you'll be able to interact with the web page.
  6. Use the left side of the browser with the webpage. As you hover your cursor, the element will highlight. Click the text you want to change.
    • The right panel will be redirected to the text's code location.
  7. When you double-click the text, a box will appear around the text part of the code.
    • Pay close attention to the original text; you don't want to delete the code itself. In most cases, the text will be encased by > and < .
  8. Typing will automatically delete the text.
  9. This is in the top-right corner of the Elements panel.
    • The new text will be reflected on the web page.
    • To return the text back to normal, refresh the page.
  10. Advertisement
Method 4
Method 4 of 4:

Using Mozilla Firefox

PDF download Download Article
  1. This looks like an orange fox wrapped around a globe.
  2. As long as the website contains actual text and not images of text, you'll be able to edit it.
  3. This will open a drop-down menu.
  4. This will open a new panel at the bottom of the page.
    • If you aren't already on the Inspector tab, click it now.
  5. This will be in the same row as the Inspector tab.
    • When you click it, you'll be able to interact with the web page.
  6. Use the top part of the browser with the webpage. As you hover your cursor, the element will highlight. Click the text you want to change.
    • The bottom panel will be redirected to the text's code location.
  7. The code will expand.
  8. Pay close attention to the original text; you don't want to delete the code itself. In most cases, the text will be encased by > and < .
    • Highlight the original text and type your new text. Typing will automatically delete it.
  9. This will save your text and apply it to the web page.
  10. This is in the top-right corner of the Inspector panel.
    • To return the text back to normal, refresh the page.
  11. Advertisement

Expert Q&A

Search
Add New Question
  • Question
    What is inspect element used for?
    Mitch Harris
    Consumer Technology Expert
    Mitch Harris is a Consumer Technology Expert based in the San Francisco Bay Area. Mitch runs his own IT Consulting company called Mitch the Geek, helping individuals and businesses with home office technology, data security, remote support, and cybersecurity compliance. Mitch earned a BS in Psychology, English, and Physics and graduated Cum Laude from Northern Arizona University.
    Consumer Technology Expert
    Expert Answer
    Inspect element lets you view the source of a website, so you can gain insight into how the website is designed. You can also use this tool to grab an element for yourself, like a graphic, underline, or particular font.
  • Question
    How can I edit an existing website with inspect element?
    Mitch Harris
    Consumer Technology Expert
    Mitch Harris is a Consumer Technology Expert based in the San Francisco Bay Area. Mitch runs his own IT Consulting company called Mitch the Geek, helping individuals and businesses with home office technology, data security, remote support, and cybersecurity compliance. Mitch earned a BS in Psychology, English, and Physics and graduated Cum Laude from Northern Arizona University.
    Consumer Technology Expert
    Expert Answer
    Inspect element won't let make any actual changes to a website's code. You'll have to edit the HTML and CSS externally.
  • Question
    Will anyone see if I edit a text?
    Community Answer
    No, no one else will see it. This is because you have only edited the page on your computer, not anyone else’s.
See more answers
Ask a Question
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Thanks for submitting a tip for review!

      About This Article

      Thanks to all authors for creating a page that has been read 432,236 times.

      Reader Success Stories

      • Anonymous

        Jan 23, 2018

        "The home one worked, thanks!"
      Share your story

      Did this article help you?

      Advertisement