Everyone knows how to use a browser to perform certain tasks. And yet (or maybe because of that) there are problems many people might work around, because they don't know the browser’s full potential. Possible problems:
- You suspect that the browser cache, local storage or cookies are responsible for a problem and delete them to test this theory.
- You write debugging code to help analyzing the status (change) of the application.
- You have to log in to a web service (Gmail, Office365, ...) with different user IDs and therefore use a different browser for each user account.
- Instead of clearing the browser cache, etc., simply use the browser’s private/incognito mode. It strictly separates cache, local storage, cookies, etc. from the non-private tabs.
- So-called web extensions (formerly called browser add-ons) allow you to add functionality to the browser. Ad blockers are the best known, but there are also some special extensions for developers. These allow, for example, to monitor the Redux State.
- In Firefox, Mozilla has taken the encapsulation of private tabs one step further:
- So-called container tabs (contextual identities) allow you to create new tabs, which run separately from the normal tabs – similar to the private mode. Unlike in private mode, cache, cookies, etc. are not forgotten when closing the tab.
- That way, you can create separate containers – for the company, the customer and also for the private account. Simply press the plus in the tab bar a bit longer or search using the menu "File -> New Container Tab".
Web extensions worth looking at:
- Container tabs: Firefox Multi-Account Containers, Temporary Containers
- Developer tools: Augury (Angular), React Developer Tools, Redux DevTools, ColorZilla, CORS Everywhere, Nimbus Screenshot & Video Recorder, Page Ruler, Let's get color blind
- Recording and playing back sequences: iMacros, Selenium IDE
- Inspect and edit cookies: Cookie Quick Manager, EditThisCookie
- Written by me:
- Popups or sidebars can provide information or controls
- Panels can complement browser developer tools
- HTTP headers can be inspected and modified live. It is also possible to redirect requests to other URLs.
- Code and CSS can be injected into web pages to add missing functionality.
- Reading, saving and deleting cookies is part of the basics.
API documentation: https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions
Author: Santo Pfingsten / Software Engineer / jambit office Leipzig