The application tool provides all kinds of information about a web app, which helps the developers get an idea related to the web app. Some of this information is manifest, service workers, storage, etc., which you can use to check for background processes and test for PWA. The application tool provides information under various categories, which are application, storage, background services, preloading, and frames.
Benefits of Application Tool:
The tool provides various information about the web app services and storage. The tool benefits are:
- A single tab for everything: Provides all web app-related services and storage information under the Application tab. All possible options are categorized in the sidebar for easy access.
- Easy to edit: You can very easily modify stuff in this tab and view the changes live on the webpage. The tool allows you to modify storage and debug them for optimal performance.
- Debug and Test the Site: You can test the site’s background services and view various details regarding the web app, which will provide information that can be used during debugging.
- Deal with Background Services: The tool provides options to deal with various background services, such as background fetch and sync.
When to use the Application Tool:
- Manipulating of storage: There are many types of storage methods that a web page can use such as local storage, cookies, session storage, etc. This storage can be manipulated or viewed using the application tool.
- Background services information: The various services working in the background with respect to the service worker are displayed in the tool and this information is about cache, sync, fetch, payment handler, etc.
- PWA testing and debugging: The manifest, service worker, and other information provided by the tool can be used to debug the site as a PWA. The various features of PWA are offline usage, notifications, installation, etc.
How to open Application Tool in Microsoft Edge:
The tool is present in DevTools and you can open DevTools by pressing F12 or “Ctrl+Shift+I” or right-clicking on the webpage and then pressing inspect from the context menu that appears. In DevTools there are multiple ways to open the tool which are:
- Using Add button: At the end of the main toolbar will find an add button. Click that add button and select the Application from the list of tools that pops up.
Opening Application tab using add button
- Using More Tools: In the top-right corner of DevTools click the three dots. Then navigate to More Tools > Application from the menu that appears.
Opening Application tab using more tools option
- Using Run Command: Press the shortcut key “Ctrl+Shift+P” or select Run Command from the menu in the three dots button which is present in the top-right corner of DevTools. The Run Command search menu will appear, in that type of application, and then select Show Application from the list of options that appears.
Various Categories in Application Tool:
The various features related to web apps are categorized under different categories in the sidebar. There are 5 categories which are Application, Storage, Background services, Preloading, and Frames.
Sidebar of the Application Tool
1. Application Category:
This category includes panes related to features of the web app.
- Manifest: The manifest is a JSON file providing information about the PWA which will be used when the app is installed. Some of that information includes the Identity, Presentation, Protocol Handlers, Icons, and Window Controls Overlay.
Manifest pane
-
Service workers: Service workers are scripts running in the background by the user to improve the offline experience of the site and also allow push notifications and background sync. The Service workers provide various buttons which are:
- Offline: If checked then the DevTools behave as same as the site going offline.
- Update on reload: If checked then the service workers get updated in every page load.
- Bypass for network: If checked then the browser is forced to look for requested resources.
- Network requests: If checked then the network tab is opened in the drawer of DevTools.
- Update: Click it to update the service worker.
- Unregister: Click it to remove the service worker from the webpage.
- Source: Mentions the service worker file if you click it you will brought to the Sources tab with that file opened.
- Status: Mentions the ID of the service worker and the status of the service worker. You also get a start/stop button to enable/disable the service worker.
- Clients: Mentions the origin that the service worker is working on. You also get the focus button if there are multiple service workers then on clicking it the tab gets open where the service worker belongs.
- Push: The button emulates a push notification.
- Sync: The button emulates a background sync service.
- Periodic Sync: The button allows periodic background sync service without your interaction.
- Update Cycle: Displays the update information of the service worker along with the start and end time under the expandable ID.
- See all registrations: Click it to view all the service workers in the browser.
Service Workers pane
-
Storage: The pane provides a summary of the storage usage of the web page. The various options provided under it are:
- Simulate custom storage quota: If checked you can type your own custom limit of memory usage.
- Clear site data: Click this button to clear the webpage storage.
- including third-party cookies: if checked then when you Click clear site data then 3rd party cookies also get removed.
- Unregister service workers: If checked then the service worker is disabled for the site.
- Local Session Storage, IndexedDB, Web SQL, Cookies, Cache storage: If checked then the Clear site data option clears the checked storage.
Storage pane
2. Storage Category:
This category includes the various types of storage used by the web app.
- Local Storage: This pane displays various data stored by the web page in the user’s system which are just key-value pairs with no expiry date. This is one of the commonly used storage for basic use cases.
Local Storage pane
- Session Storage: This pane displays session data which persists until the browser is closed. The storage method is used by the sites to prevent saving of the data thus protecting any leaks or misuse of the data.
Session Storage pane
- IndexedDB: This pane displays the indexed DB used by the site. IndexedDB is just like key-value pairs like local storage but allows transactions. This storage method allows developers to query the data and handle large amounts of complex data sets.
IndexedDB pane
- Web SQL: If a site is using a web page API for storing or managing the data in databases using SQL then this database information is displayed under this pane.
Web SQL pane
- Cookies: These are meant to be used to provide different experiences for different users by storing some user-related information in the user’s own system by the server. It is used by most browsers to provide a better user experience by storing various values on the server.
Cookies pane
- Private state tokens: Provide information about the various cryptic tokens that the web page share with the browser to validate that the user is human and not a bot.
Private state tokens pane
- Interest groups: Displays the various websites that web pages find important to use. This can be used to auction ads on the web page and the information is stored in the browser and not shared with anyone.
Interest groups pane
- Shared Storage: This pane displays information that is being shared between multiple users or systems where the webpage is being run. If the site supports multi-user capability from the same account then some key-value pairs are stored in the shared storage.
Shared Storage pane
- Cache Storage: This pane displays the cache storage which is just the network requests and response information that if required frequently. Used to save download time and fast response which requests the same resource multiple times.
Cache Storage pane
3. Background Services Category:
The various services working in the background are displayed in this category.
- Back/forward cache: The browser saves the pages that the user navigates around the website so that when you press the backward or forward navigation button in Edge the pages instantly appear.
Back/forward cache pane
- Background fetch: The various resources whose sizes are huge and require time to download can be downloaded before their use using the Background fetch API.
Background fetch pane
- Background sync: The various data that service workers send to the server after the user system comes online are under this pane. This data is used to sync the web page to the server.
Background sync pane
- Bounce tracking mitigations: Provides cross-site tracking information about the site and you can not only view but delete them.
Bounce tracking pane
- Notifications: The service worker displays data to the user using the notification API when the server uses a push message.
Notifications pane
- Payment handler: The API which handles payment requests on behalf of the user helps to handle multiple payment services.
Payment handler pane
- Periodic background sync: The service worker can be made to update information periodically to update the site with the latest information.
Periodic background sync pane
- Push messaging: The server user pushes messaging informing the service worker to display it as a notification. The service worker uses the Notifications API to display the message.
Push messaging pane
- Reporting API: There are many problems that can only be found in the production environment such as deprecated API or security violations. This reporting API is used to monitor and display these kinds of errors for the developers to debug.
Reporting API pane
4. Preloading Category:
The resources or pages which are loaded before it’s used in a web app are called preloading and this category provides information related to preloading.
- Speculation Rules: Provide rules set which will be used to prefetch or pre-render URL.
Speculation Rules pane
- Preloads: This pane provides a list of all the prefetched URLs or pre-rendered URLs from the speculation rule.
Preloads pane
- This Page: This page provides information regarding the pre-rendered status of the current web page.
This Page pane
5. Frames Category:
The various frames and their resources are displayed under this category. The information that it displays is about the document, security, Isolation, API availability, Origin Trials, and Permission Policy. The expandable menu also provides panes related to various resources and assets used by the site such as images, fonts, scripts, etc.
Frames of YouTube
Showing usage of the Application tool:
Let’s visit the GEEKSFORGEEKS Website and use the application tool to view the site for various information.
- Step 1: Using Edge visit the GFG site and then right-click anywhere on the page and select Inspect from the context menu. Alternatively, you can use the shortcut key “Ctrl+Shift+I“.
- Step 2: The DevTools will show up from there and locate the Application tool.
- Step 3: Check the required information about the site and use this information for debugging purposes.
Example of Application Tool
Conclusion
The tool is an umbrella for working with many web app-related features. The storage, manifest, and various services of the webpage can be viewed and to an extent edited to debug and test the site. This tab is very important for developers who want to build their website to be a PWA or to have some features related to PWA.