Let us quickly see how to edit a web page without using any special software. There are two simple ways to edit a webpage and preview it but remember that both these ways doesn’t make a permanent change in the site, these are just alternate ways to see how your website looks when you change the text, its color, etc.

Edit a Webpage for Fun

This is what most of them love to do, people love to change some stuff on their websites, but they fear making a mess out of it, so below is a simple technique or hack that can help you to quickly edit a webpage without messing up the live website.

  • You obviously need a browser to start with, so fire it up and navigate to your favorite website.
  • I am using Chrome Browser and I am right now on my own website.
  • Press SHIFT+ CTRL + J to open up the JavaScript console directly in Chrome. The JavaScript console is part of the developer tools and F12 is the common shortcut key that will open up the developer tools in Chrome, Firefox and Internet Explorer.
  • Now in the console, type the below JavaScript Command,

document.designMode=”on”

  • Now press enter key and you should see the message “on” returned back on the console as shown in the below screenshot.

Edit a webpage via JavaScript console

You should now see the cursor blinking on the web page as it would be on a text editor, you can go ahead and try changing the things on the web page.

Edit a Webpage like a Pro

Well this option is often used by developers but wait, why let them have all the fun? Let us give them a shot too, what do you say?

This also involves the use of developers tools so hit the F12 key again to bring it up.

This time click on the Elements tab. This is on Chrome browser but it might be something different in other browsers, for example in Firefox it is inspector and in Internet Explorer it is HTML.

Below are two simple ways to edit a webpage and I have demonstrated it as simple as possible, what else you can do is something I leave it to your imagination.

1) Inline HTML Editing

You can actually edit text or change colors inline using HTML tab. Click on any control (like button /text box), right click on it and click “Inspect element” as shown below and then apply the changes you want within the Elements tab.

Edit web page using inline HTML

2) Edit webpage using styles window

If you can learn a little CSS then you can also use the styles window to make changes as shown below:

Edit a webpage using CSS styles

Why edit a webpage while the changes aren’t permanent?

You can actually switch colors, change the background or change text without having to go to your back-end pages. This is something very useful to see how it looks from the front-end without having to switch back and forth every time. This is not just for developers, website owners can play around this and show their developers what they exactly need from them.

So did you learn something new? Is this useful to you? Found something difficult to understand or if you have any queries please feel free drop them in the comments section and also share this so that someone else might also get benefited.