Browse through any social media site as long as you want, and you’ll see an image of a bizarre dialogue or a similar message that appears to be outrageous. In the end, the majority of them are fake.
It’s not apparent it’s incredibly easy to modify the content on a site and take the image. It doesn’t require any expensive tools for editing photos, either. In this guide, we will explain how you can change the text of a webpage with Chrome.
A few years ago, I discovered how to edit pages that I didn’t have, so here are the steps that you could use to accomplish similar. It allows you to modify the information on the page without needing to edit an image using some other program like Canva or Photoshop.
What is the Inspect Element?
It is a tool that allows you to inspect Element, a program used by web designers that is accessible across a variety of internet browsers. With this tool, it will show what’s in the HTML, Javascript, and CSS code that comprise the site. It displays data like the various colors used by the website, as well as the time it takes to load and the amount of bandwidth that the site makes use of.
Most people employ Inspect for editing the code for a short period. It is advantageous because you will be able to view the result of the changes immediately within your browser; however, the modifications are only effective for the specific browser session. That means web designers could make adjustments or try to identify the root of any issues within the site without harming the site or causing further problems.
How to Edit Web Pages
This is a step-by-step tutorial on editing the text on a webpage, even though the website you’re editing isn’t the one you own.
Start any webpage in Chrome and click on the text from the page you want to modify.
Click on the text you want to highlight, then select Inspect Element from the context menu.
The developer tools will appear within the lower part of your browser. The associated DOM element will be chosen.
Double-click the chosen node, and it’ll change to editing mode. Change the text in Dev Tools and click outside the Chrome Dev Tools window to make the change.
If you’re already familiar with using HTML tags, you could employ the same method for editing not only content on websites but also for replacing images, modifying the formatting style, and much, much more.
Design Mode
A specific browser feature known as Design Mode enables you to modify your bookmarklet directly on the current web content. It is dependent on the browser you use. The feature may even highlight mistakes. The feature seems to work differently with different configurations; for instance, Firefox does not appear to be working at present.
Enter F12 for Developer Options and navigate to the Console tab to access the console. Press Enter after you type in the following text you see on the console (next to the arrow that appears at the end of any messages you’ll see):
document.designMode = “on”
Once you’ve finished, you’re able to click on any of the text options and start editing the text immediately.
This must be done each time you want to utilize the feature because it is only compatible with the current tab. But it’s worth the effort when you’re required to make many modifications to the text on a page.
Developer Tools
Nowadays, most browsers offer the ability for users to log into the tools for developers and modify their settings. Here’s how:
Open Google Chrome. Note that you are able to make use of any other browser to do this.
Select the three dots located at the very top of the ribbon.
Choose More Tools.
Click to access Developer Tools.
Click to open Elements on the upper ribbon.
The cursor icon is located in the upper left edge of the Inspector panel.
Click and hover over the webpage’s text.
After that, right-click on the code highlighted within the Element window, then select Edit Text. Be aware that you could double-click the code to modify it.
Hit Enter.
Inspect Element in Mozilla Firefox
It’s called the Inspect Element panel and is also an integrated feature of Mozilla Firefox. Mozilla Firefox browser. This is how you can make use of it:
Open Mozilla Firefox.
You can visit a website. In this case, hostinger.com, we’ll use hostinger.com.
Click right-click anywhere on the page, and choose Inspect.
If you prefer, simply click on the three-stripes menu > Tools.
Select Web Developer Tools.
It is also possible to make use of the keyboard shortcut Ctrl+Shift+I to open the Inspect Element.
The Firefox inspector will be displayed in the lower part of the page as a default. For a change in its position, select the menu with three dots in the upper-right corner, and then select a different option for display.
The tool lets you choose a particular element and discover the code. Use the Inspect tool on the left-hand side of the screen to go into the selection mode.
The inspector panel of Firefox is similar to Chrome as well as Safari. Its HTML source code has been colored – blue represents content, yellow refers to the margin, and purple is padding.
Here’s how to change an element of a webpage in Firefox:
Open Mozilla Firefox.
Connect to a site. In this case, the website we’ll use is Hostinger.com.
Click right-clicking on a specific area of the website page and choose to inspect.
Double-click to edit the wording.