Download Article
A user-friendly guide to temporarily changing the text on any website with Inspect Element
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.
Steps
-
Open Google Chrome . This looks like a red, green, yellow, and blue sphere icon. [1] X Research source
- If needed, you can download Google Chrome .
-
Navigate to the site you want to edit. As long as the website contains actual text and not images of text, you'll be able to edit it.Advertisement
-
Click â‹® . This will be in the top-right corner.
- A drop-down menu will open.
-
Hover over More tools and click Developer tools . 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.
-
Click the cursor icon. 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.
-
Select the text you want to edit. 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.
-
In the right panel, double-click the text. 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 < .
-
Replace the existing text with your text. Typing will automatically delete the text.
-
Click X . 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.
Advertisement
-
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 .
-
Navigate to the site you want to edit. As long as the website contains actual text and not images of text, you'll be able to edit it.
-
Highlight the text you want to edit. Click and drag your cursor over the text to highlight it.
-
Right-click the text and select Inspect Element . This will be towards the bottom of the pop-up menu.
-
Replace the existing text with your text. 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 < .
-
Press ↵ Enter . The new text will take effect.
-
Click X . This will close the Inspect Element window.
- To return the text back to normal, refresh the page.
Advertisement
-
Open Microsoft Edge. This is the default browser for Windows.
- If needed, you can update the browser or install it .
-
Navigate to the site you want to edit. As long as the website contains actual text and not images of text, you'll be able to edit it.
-
Click ••• in the top-right corner. This will open a drop-down menu.
-
Hover over More tools and click Developer tools . 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.
-
Click the cursor icon. 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.
-
Select the text you want to edit. 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.
-
In the right panel, double-click the text. 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 < .
-
Replace the existing text with your text. Typing will automatically delete the text.
-
Click X . 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.
Advertisement
-
Open Mozilla Firefox. This looks like an orange fox wrapped around a globe.
- If needed, download Firefox.
-
Navigate to the site you want to edit. As long as the website contains actual text and not images of text, you'll be able to edit it.
-
Click ☰ in the top-right corner. This will open a drop-down menu.
-
Click More tools , and then Web Developer Tools . This will open a new panel at the bottom of the page.
- If you aren't already on the Inspector tab, click it now.
-
Click the cursor icon. 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.
-
Select the text you want to edit. 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.
-
In the Inspector, right-click the text code and select Edit As HTML . The code will expand.
-
Replace the existing text with your text. 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.
-
Click outside the code box. This will save your text and apply it to the web page.
-
Click X . This is in the top-right corner of the Inspector panel.
- To return the text back to normal, refresh the page.
Advertisement
Expert Q&A
Search
-
QuestionWhat is inspect element used for?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.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.
-
QuestionHow can I edit an existing website with inspect element?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.Inspect element won't let make any actual changes to a website's code. You'll have to edit the HTML and CSS externally.
-
QuestionWill anyone see if I edit a text?Community AnswerNo, no one else will see it. This is because you have only edited the page on your computer, not anyone else’s.
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
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!
References
About This Article
Thanks to all authors for creating a page that has been read 432,236 times.
Advertisement