CODEWITHSUNDEEP
google-chromepush-notificationdevelopment-environment
Tom
Tom

Reputation: 6004

How to use the chrome devtools push debug feature?

The Chrome Browser developer tools have under the application tab an option to test push notifications. I have a registered service worker running that can handle received push notifications but it doesn't receive any from it. How to test push notifications with it correctly?

Upvotes: 4

Views: 1127

Answers (2)

0xZ3RR0
0xZ3RR0

Reputation: 596

You can use Chrome's DevTools to trigger push events with custom data:

  1. In DevTools, open up the Application panel
  2. Open the Service Workers Pane
  3. In the Push input box, type in a message of your choice or use the prefilled text
  4. Click the Push button
  5. Observe a notification appear

How-to-in-Chrome

(credits to: Umaar)

On recent versions of Chrome you can also inspect the service workers using the Chrome developer tools:

  1. Visit the website that you want to inspect using Chrome
  2. Click View -> Developer -> Developer Tools
  3. Open the Application tab
  4. In the side navigation click Service workers

If your website sends push notifications, you should see at least one service worker that is registered and activated: a service worker, usually placed in the root directory, is always required in order to display the notifications received using the Push API. If you don't see a service worker, the push notifications won't be displayed. You can also inspect the code of the service worker by clicking Source.

Chrome debug service worker page

Another interesting feature for inspecting the push messages received is the Push messaging tab located under Background services in the side navigation. It allows to see the push messages received by the service worker regardless of whether notifications are displayed or not. For example, if you don't handle the push event in the service worker, a push message can be still received successfully and is listed there, even if you don't see any visible notification. If you are debugging notifications on a website, this allows to understand if the problem is that your device is not receiving the notifications, or if the notifications are received but not displayed.

Tip: remember to click the Start recording events button to see the push messages, otherwise the list will be empty.

Chrome debug service worker page

Lastly, you can try also the following two links for debugging service workers in Chrome.

chrome://serviceworker-internals/
chrome://inspect/#service-workers

In particular they can be useful to terminate the service worker or see console.log messages, errors, and whether the service worker code is updated.

chrome://serviceworker-internals/ page

(credits to PushPad)

Upvotes: 0

sably
sably

Reputation: 177

go test your code with edge devtools in this case; until chrome is update this bug.

Upvotes: -2

Related Questions