Take me back!

Developer Tools for Non Developers

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.

Network

First, open up the browser dev tools (For example, ctrl+shift+c or 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 POST requests and see if the response is more helpful there (also try looking in the console tab for javascript errors). It's also great for security/privacy purposes, as it is easy to see what kind of analytics sites the website is sending requests to.


Inspector

Do ctrl+shift+i or 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.


Local Storage

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.


Responsive Design Tool

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.