How to debug Background Services in Microsoft Edge Browser

Last Updated : 23 Nov, 2023

In Microsoft Edge, one can utilize a feature called Background Services that helps in improving the user experience by allowing web apps to run tasks in the background. But one needs to debug these services to ensure they work as intended. In this article, we will learn how to debug Background Services in Microsoft Edge with a complete example along with their features and benefits.

Features and Benefits

Debugging in Microsoft Edge is real-time to find issues when they occur.
Developer Tools provides an environment for debugging including Background Services.
You can inspect variables and elements in your background script which makes it easier to diagnose problems.
The Network tab helps to monitor and debug network requests and ensures that the service communicates correctly.

How to create a Background Service for Edge?

To Debug the background Service you need to learn to create a background Service. To create a background service you need to create an extension for the browser like below:

Step 1: Create a directory for your extension and create a manifest file (manifest.json) inside it with the following content :

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Step 2: Create an HTML file with the following code

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
</body>
</html>

Step 3: Create a background.js file for the background script

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed or updated.");
});

// Background service to fetch weather data
function fetchDataAndSetBadge() {
  console.log("Fetching Some data...");
}

// Start fetching data when the extension is installed or updated
chrome.runtime.onInstalled.addListener(fetchDataAndSetBadge);

Step 4: Go to the Edge Extension Page using edge://extensions and enable Developer Mode by toggling the right switch then click Load Unpacked and select the folder containing the above manifest file.

Screenshot-2023-11-16-193026

Steps to Debug Background Services in Edge

Let us debug the above-created extension :

Step 1: After uploading your extension it will appear on the extension tab. Click on the service worker hyperlink(blue color) to open the inspected page for the background service that you uploaded following the above steps. It will open the DevTools for Background Service.

ezgifcom-video-to-gif(5)

Step 2: In the Devtools, go to the services tab and set some breakpoints to Debug the background script

ezgifcom-video-to-gif(6)

Conclusion

Here finally we understood how to build and debug Background Services with a few simple steps. It Enabled us to set breakpoints and log in to the console to rectify issues. We learned to test the working of headless applications in Edge Browser using the inbuilt Developer Tool.

Suggest improvement

How to Browse in Microsoft Edge Browser

Share your thoughts in the comments