Developer tools, as the name may suggest, are tools made for the convenience of developers. However, these extremely useful and powerful tools can be useful even if you don't know a single line of code. This post will specifically post on browser related dev tools.
Warning: As Confucius once said, "Don't be a fucking idiot". Don't accidentally leak something potentially compromising, like your IP or login token in a screenshot. Don't paste in code you don't understand into the console, especially if it has urls in it.
First, open up the browser dev tools (For example,
cmd+option+c) and then navigate to the "Network" tab. This tab logs web requests that the page requests. There's all sorts of things you can do with this information. Website giving you vague error messages? You can check for failed
cmd+option+i to open up the web inspector. What you are seeing is HTML, the markup language of the web, and CSS, the styling language. Ad slip past your adblocker? Annoying top bar? Delete it! Plus, you can mess around with the CSS (styling) of various elements by selecting them. For example, add a
color: lime; somewhere, and now the text is lime green colored. Damn, that is bright.
You can also edit the contents of the page. It is fairly trivial to remove personal information from a page, or doctor a screenshot.
Best of all, any changes you make aren't permanent, and don't affect anyone else. Reload the page and everything's back to normal.
Oftentimes, websites store information on your computer, using cookies or local storage. We'll talk about the latter later.
Most browsers have a local storage editor builtin in the browser dev tools (look for a "Storage" tab), but if not, you can install a browser extension that can edit local storage. It's pretty useful.
Wordle for example, stores not only the answer in local storage, but also gameplay statistics and the board state. Give yourself a 100% win percentage, you deserve it.
Unlike normal managers, cookie managers have plently of utility. Again, this is often builtin in the browser dev tools (usually same tab as the local storage editor, "Storage"). You can remove cookies to reduce tracking (probably easier to do this in browser settings or a privacy focused extension, but whatever), and even more useful, trick news sites into thinking you have plently of free articles left this month.
Prefer the mobile version of a site? You might enjoy some therapy and/or the responsive design tool. As you might imagine, the responsive design tool can view the mobile version of a website.
This can also be found in the builtin dev tools: Look for an icon that looks like a phone in front of a tablet.