The internet is home to life-changing information; sadly, depending on how you use it, the change can be positive or negative. On a lighter note, search engines are used to resolve a lot of arguments. I doubt we can put a number to how many factual disagreements were resolved after a "let's Google it up" 😂.
At other times, a well-timed screenshot, or "receipt" as we popularly call it 😏can serve as an alibi or provide clarity on issues. But what if credible sources can be manipulated? 😓. The challenge of getting verifiable information can become a lot harder if anyone can manipulate a verified source.
A Relatable Explanation
Now to the cover photo above, you may be wondering how such a tweet was manipulated or if it's a product of great photoshopping skills. The cover photo above is a screenshot, it's not photoshopped, yet the content isn't true. How's this possible, you say? 😮 Well, you probably have an idea if you read my article about DOM. An understanding of the DOM is key to knowing how we manipulate the web with code.
If you read that article, you may be asking how the screenshot above came about if it wasn't done by the Twitter team. Well, it just so happens that anyone on the web can have a sneak peek view of the inner workings of a website (to varying degrees), and depending on how much you can see, you can easily manipulate what is made available to you.
Manipulating the DOM Tree Using Browser Debugger
Step 1: Using your browser (on your PC), you right-click any empty space on any website, you'll see an "inspect" button (depending on your browser, in this case, I'm using Chrome) at the bottom of the pop-up option menu. An example is shown in the image below. I'll be right-clicking an empty space in the webpage provided by this link
Step 2: Click the "inspect" option, you'll end up with something like the image below
Step 3: Click on the cursor icon illustrated in the image below to enable you select any element on the web and see its properties.
Step 4: Double-click on any text content on the debugger (right-side of your screen) to edit it. Also note that you can edit the style and further customize web content if you're well versed in CSS (Cascading Style Sheet).
Finally...
Browser debugging wasn't invented for malignant purposes, rather to speed up development and fixing bugs in frontend web development by allowing developers to fix issues that are hard to spot in the code editor yet evident in the browser. It's also a good playground to test if something works before moving it to the code editor.
Browser debugging can also be used to learn best practices by reviewing the code of other developers whose websites you find insightful. Depending on what web development technology they're using, you may get a lot or not so much, however, it helps foster learning either way.
Images are somewhat more difficult to manipulate than text (if you're wondering how to make things harder for a prankster 😉). Lastly this article should teach you that when it comes to web screenshots, trust but verify 🥂.