Any prankster can see the potential in being able to temporarily change the way a website appears on your computer, and there are lots of practical applications of being able to adjust the way a website appears to you as well.[1] Hopefully your goals are more playful or utilitarian than nefarious, but whatever you plan to get up to, the process is relatively simple.

Method 1
Method 1 of 3:

Appearing to Edit a Website with Any Browser with a Bookmarks Bar

  1. 1
    Find a link to the Edit Current Website bookmarklet. The simplest way to do this is just by Googling, “edit current website bookmarklet.” This will bring up a number of pages with the appropriate link.[2]
  2. 2
    Drag it into your bookmarks bar. You can edit the website you on which you found the link by simply clicking it, but you will more likely want to drag it into your bookmarks bar. This will enable you to use it on any website.
    Advertisement
  3. 3
    Put it to use. Navigate to the website you want to appear to edit, and click on the bookmark. Clicking it won't have any noticeable effect, but you will now be able to go into the text of the website and edit it as you see fit.
  4. Advertisement
Method 2
Method 2 of 3:

Appearing to Edit a Website with Chrome

  1. 1
    Find the text or photo you want to change. In Chrome, navigate to the website you want to appear to edit. If you want to edit text, highlight the words you want to change, and right-click them; if you want to edit a photo, just right-click it without highlighting.[3]
    • To appear to edit a photo, you will need to upload the photo with which you want to replace an existing one. You have to be able to replace the URL in the original code with a new URL.
  2. 2
    Open Inspect Element. When you right click, a menu will pop up. Click “Inspect Element.” A new window with lots of HTML will pop up inside the current one.[4]
    • If you are using Windows, you should also be able to open Inspect Element by pressing F12.
  3. 3
    Find the text you want to change in Inspect Element. If you are editing text, the words you highlighted on the original website should also be highlighted here. If you are editing a picture, a larger chunk of text will be highlighted, with an underlined URL at the end.[5]
  4. 4
    Change the code. If you are changing text, simply overwrite the words you highlighted with whatever you want to replace them with. If you are changing a photograph, replace the URL with the desired new one, leaving the rest of the code alone.[6]
    • If you make a mistake, just press Command+Z on a Mac or Control+Z on a Windows to undo it.
  5. 5
    Finish up. Click “Enter,” and close “Inspect Element.” The website should now appear to have the text or image you changed. You have not truly edited the website, of course, and these changes will disappear when you refresh the page.[7]
  6. Advertisement
Method 3
Method 3 of 3:

Appearing to Edit a Website with Safari

  1. 1
    Enable the Develop menu. In Safari, click the “Safari” menu on the menu bar at the top of the screen. From here click “Preferences,” and then select “Advanced” from the menu at the top of the Preferences window. Check the box at the bottom of the window that says, “Show develop menu in menu bar.” There will now be a “Develop” menu in the menu bar, between “Bookmark” and “Window.”[8]
  2. 2
    Find the text or photo you want to change. Navigate to the website you want to appear to edit. If you want to edit text, highlight the words you want to change, and right-click them; if you want to edit a photo, just right-click it without highlighting.
    • To appear to edit a photo, you will need to upload the photo with which you want to replace an existing one. You have to be able to replace the URL in the original code with a new URL.
  3. 3
    Open Inspect Element. When you right click, a menu will pop up. Click “Inspect Element.” A new window with lots of HTML will pop up inside the current one.[9]
    • You can also open Inspect Element window by click the “Develop” menu, and selecting “Show Web Inspector.” Then find the text you are looking for by pressing Command+F on a Mac or Control+F on Windows, and type in the text you want to change. This is a more roundabout method.
    • You can also open Web Inspector with the shortcut Alt+Command+I on a Mac, or by pressing F12 on Windows.
  4. 4
    Change the code. If you are changing text, simply overwrite the words you highlighted with whatever you want to replace them with.[10] If you are changing a photograph, replace the URL with the desired new one, leaving the rest of the code alone.[11]
    • If you make a mistake, just press Command+Z on a Mac or Control+Z on a Windows to undo it.
  5. 5
    Finish up. Click “Enter,” and close “Inspect Element.” The website should now appear to have the text or image you changed. You have not truly edited the website, of course, and these changes will disappear when you refresh the page.
  6. Advertisement

Expert Q&A

  • Question
    What is inspect element used for?
    Mitch Harris
    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.
    Mitch Harris
    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
    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.
    Mitch Harris
    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
    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.
Advertisement

References

  1. http://www.hongkiat.com/blog/google-chrome-extensions-designers
  2. http://www.labnol.org/internet/design/edit-web-pages-like-wiki/3832
  3. https://www.youtube.com/watch?v=M-iYQU2UvJA
  4. https://developers.google.com/web/tools/iterate/inspect-styles/basics
  5. Mitch Harris. Consumer Technology Expert. Expert Interview. 23 June 2021.
  6. Mitch Harris. Consumer Technology Expert. Expert Interview. 23 June 2021.
  7. Mitch Harris. Consumer Technology Expert. Expert Interview. 23 June 2021.
  8. http://hints.macworld.com/article.php?story=20110328132622709
  9. Mitch Harris. Consumer Technology Expert. Expert Interview. 23 June 2021.
  1. Mitch Harris. Consumer Technology Expert. Expert Interview. 23 June 2021.
  2. http://apple.stackexchange.com/questions/139767/inspect-element-in-safari

About This Article

Mitch Harris
Co-authored by:
Consumer Technology Expert
This article was co-authored by Mitch Harris. 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. This article has been viewed 348,488 times.
2 votes - 50%
Co-authors: 51
Updated: June 29, 2022
Views: 348,488
Advertisement