Edit or “Hack” a website content in your browser

5 min readApr 1, 2021

Have you ever wonder where does those prank & funny websites comes from?

I believe your first reaction must be laughing at the first glance. Meanwhile, try to figure out who is the genius creator behind the screen!

Actually, there’s a trick to edit or even “hack” a website in your own browser! No deep technical knowledge is required, anyone could do this!

Step 1: Open up your desktop browser

This is the first thing that you gonna do to make this magic happen. Most of the browsers (eg. Chrome, Firefox, Safari etc.) will do, I’m using Firefox browser to do the demo.

Step 2: Bookmark a website

Just pick and bookmark any random website. This is an easy step, just click the star icon on the url bar, then it will auto bookmark the page for you.

Sample: Before bookmark

Sample: After bookmark

Now, you will see it appears at your browser’s bookmark bar.

Firefox bookmark bar

If you’re unable to see it, you will probably need to enable your browser settings to display the bookmark bar.

For your information, you can edit a bookmark’s information such as its name and link. Just right click on the bookmark itself, then select “Edit” or “Properties” depends on browsers. You can rename it with your own choice, eg. Testing site. For my side, I will just remain it as the original website name.

Step 3: Open the browser inspector

Now, just a right click and you should be able to see a pop up menu on the website.

Then, select “Inspect Element” or “Inspect”, you will see the browser’s inspector appears at the bottom of the browser window:

This is the default view of a browser inspector. You can change the its position by clicking the “…” menu on the top right for inspector settings. I selected “Dock to left”, meanwhile, selects “Console” on the inspector top panel, and this is how it should look like:

Here’s a tip, clicking on the trash bin icon will clear your consoles panel.

Step 4: Starts the magic!

To create the magic, we just need to paste 2 lines of codes in your consoles panel. Just follow this steps and repeat twice: Copy > Paste > Enter

1. document.designMode="on"
2. document.body.contentEditable="true"

This is what you should be seeing now:

Finally, here’s comes the MAGICCCCC….!!! Now, you can edit the browser’s content such as changing the text and picture as you wish!

Just click on any text and start editing it. You can also click on the inspector arrow to inspect any elements (eg. images, buttons icons etc.) on the page.

The inspector is displaying the values and properties of each element. Let’s change the font size here! Just double click on its value, then you will be able to change it. For example, we change it from 1.8em to 2.8em.

Here’s something to take note, although you can edit any values such as font size, colours and text on the page, but the original links and button behaviours are still working.

For more advanced part such as changing an image or background or adding shadows to an element, you might require some basic knowledge in HTML & CSS. If you’re interested to learn more about this, feel free to visit Google, YouTube or Udemy for web development tutorials. There are massive quality courses out there.

For web developers, this is an efficient way for you to learn and dive into the front end coding and structure. Aside of that, this is also a faster way to modify a website interface for any quick visualization or demo purposes, without requiring to set up any development environment or open up your Photoshop.

Marvelous! Now you can do anything you want in your browser without affecting the original site. Once refresh, all your changes will gone and the website will back to normal. Does it sounds like a Cinderella’s magic spell to you? Things just change at a glance. It’s not real. :)