#18 - Tools: Debug Your PWA (Part 2)
Tags: pwa, pwabuilder, webdev, beginners
Published: 2022-03-04 14:18:10

---
title: #18 - Tools: Debug Your PWA (Part 2)
published: true
description: Let's continue our #30DaysOfPWA journey by learning how to debug advanced issues in your PWA! https://aka.ms/learn-pwa/30days-blog
tags: pwa, pwabuilder, webdev, beginners
canonical_url: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/04
series: Learn Progressive Web Apps with 30DaysOfPWA
cover_image: https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04.jpg
---

Welcome to Day 18 of #30DaysOfPWA! New to the series? Three things you can do to catch up:

 * Read the kickoff post below for context.
 * Watch the [GitHub Repository](https://github.com/microsoft/win-student-devs) for updates.
 * Bookmark [#30DaysOfPWA Blog](https://aka.ms/learn-pwa/30Days-blog) for resources.

{% link https://dev.to/azure/welcome-to-30daysofpwa-2e54 %}

This is a shortened version of [this canonical post](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/04) for the #30DaysOfPWA. 

---

## About The Author

Today's post is authored by _Chait Pinnamaneni_ - a member of the Edge Developer Tools team at Microsoft. Follow Chait at [@noobtiger11](https://twitter.com/noobtiger11) or here on dev.to.

{% user noobtiger %}

---

Welcome to day **week 3 day 4**  of the [30 Days of PWA](https://aka.ms/learn-pwa/30Days-blog) series! It's the second day of debugging PWA using browser DevTools!

Yesterday, you learned to debug common issues related to PWA using DevTools. However as you learned in [week 2](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/) of this series, PWAs are capable of more advanced features like [background synchronization](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/06.md), [push notifications](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07.md), and more.

Today we will go through the tools available to you for debugging these advanced features of PWAs.

|  | What you will learn today |
|:--- |:---|
| _PWA permissions_ | How to check for PWA permissions |
| _Manage notifications_ | How to emulate push notifications |
| _Background sync and fetch_ | How to view background sync and fetch events |
| _IndexedDB storage_ | How to view and manage your data stored in IndexedDB |

Please note that all of the screenshots in today's article are taken from Microsoft Edge DevTools, but other browsers offer similar tools.

## Managing PWA permissions

PWAs can make full use of modern web features such as notifications, location, and storage, however, for PWAs to use these features, they must be granted permission.

For example, to send notifications to the user, a PWA has to request permission via the [Notifications API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/Notifications_API), which looks something like this:

```javascript
Notification.requestPermission().then(function(result) {
  console.log(result);
});
```

This will prompt browsers to show a dialog requesting users for the permission as shown below.

![The permissions dialog in Microsoft Edge prompting the user to allow or deny notifications from a site.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-permission-dialog.png)

During development, you often need to test different user flows based on whether the user has granted or denied certain permissions.  This can be achieved by using the **App permissions** list. With this list, you can validate and manage all the permissions that your app uses.

For example, to reset notifications permission:

* Open the **App permissions** page by clicking the **View site information** icon in the url bar or the **Settings and more** menu button in an installed PWA's title bar.
* Find **Notifications** in the list and reset it back to its default value.
* Alternatively you can also reset all permissions by clicking **Reset permissions**.

![Steps to open App permissions list and reset notification permission in Microsoft Edge.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-all-permission.png)

## Push notifications

As you learned in [Notifying Your Users of Updates](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07.md), PWAs can improve engagement by sending push notifications to the user. This is achieved through the [Push API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/Push_API) and the [Notifications API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/Notifications_API), both of which are accessible to service workers.

PWAs can subscribe to push messages from the server via the Push API. Once subscribed, a PWA will start receiving push events even if the application is closed. When a push event is received, the PWA can send a notification to the user via the Notifications API.

DevTools can track all these events for you, which can help you debug the entire user notification flow. To see the list of all the push messages and notifications in DevTools:

* Open DevTools.
* Open the **Application** tool.
* Open **Push messaging** under the **Background services** section.
* Click **Start recording events** to start listing push notification events in the table.
* For notifications, open **Notifications** under the **Background services** section and click **Start recording events**.
* Click on any notification to view the details.

![Steps to view Push messages and notifications list in Microsoft Edge DevTools.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-notifications-table.png)

Since the push events have to be triggered by the server, to test and debug push messaging flow in a PWA, you often have to send mock events from the server.

DevTools provides a convenient way to avoid this by simulating sending push events directly from the browser. To send mock push events in a PWA:

* Open DevTools and open the **Application** tool.
* Open **Service Workers** in the **Application** section.
* Type your test message in the **Push** input field.
* Click the **Push** button to send the message.
* You can then validate that the event was sent in the **Push messaging** table as described above.

![Mock push messages in Microsoft Edge DevTools.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-push-messages-mock.png)

## Background sync/fetch

PWAs can also use the [Background Sync API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API), [Background Fetch API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/Background_Fetch_API), and [Periodic Background Sync API](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API) to send and receive network requests and messages.

The advantage of using these background APIs over Fetch or XMLHttpRequest is that network requests made through these APIs can be deferred until the PWA has active network connectivity and be done even when the PWA is not being used. Check out [Synchronizing app data in the background](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/06.md) for more information.

Similar to how you can view push messages and notifications, Background API events can also be viewed in DevTools. The **Background services** section of the **Application** tool has 3 sub-sections:

* **Background Fetch** can record the background fetch events.
* **Background Sync** can record background sync events.
* **Periodic Background Sync** can record periodic background sync events.

You can also send test background sync events and periodic background sync events in the **Service Workers** section, which works like when sending test push messages as explained previously.

These mock events trigger all the event handlers in PWA and also gets listed in the corresponding background services table.

![Background sync in Microsoft Edge DevTools.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-background-services.png)

## IndexedDB storage

To provide offline support, PWAs should be able to store data locally. There are multiple storage options for the web and you can read more about them [here](.https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/05.md).

In PWAs, a recommended practice is to use [Cache storage](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/05.md) for storing static resources and [IndexedDB](https://aka.ms/learn-PWA/30Days-3.4/developer.mozilla.org/docs/Web/API/IndexedDB_API) is used for more structured data. You can learn more about IndexedDB in the upcoming [Best Practices for Reliability](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/platforms-practices/04.md) article.

[Yesterday](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/03.md), you learned about debugging cache issues in DevTools. To view and manage your app's IndexedDB data in DevTools:

* Open DevTools
* Open the **Application** tool.
* Under **Storage**, expand the **IndexedDB** section until you find your database and the table you want to open. Note that there can be multiple databases here.
* Your table appears in the main area of the tool, and you can view the data.
* The toolbar displayed at the top of the table can be used to clear the entire table or delete the selected row.

![Steps to view indexedDB data in DevTools.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/dev-tools/_media/day-04-indexeddb.png)

---

## Summary

After reading yesterday's and today's articles in this series, you should have a pretty good understating of how the browser DevTools can be used for PWA development and debugging. A lot of PWA issues can be resolved with DevTools and development can be made easy by using the specialized tools we went over in the past two days.

The feature set available to PWAs is always growing and the DevTools is planning to add tooling support for these new features as well. If you have any feature requests or feedback, you can contact the Microsoft Edge DevTools team by clicking the **Send Feedback** button in upper right corner of DevTools.


---

Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to:

{% org azure %}

---