> [!WARNING]
> **Warning:** You're viewing the deprecated Manifest V2 version of this article. See [Manifest V3 - Debugging extensions](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug.md.txt) for the MV3 equivalent. The Chrome Web Store no longer accepts Manifest V2 extensions. Follow the [Manifest V3 Migration guide](https://developer.chrome.com/docs/extensions/develop/migrate.md.txt) to convert your extension to Manifest V3.

Extensions are able to leverage the same debugging benefits [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) provides for web
pages, but they carry unique behavior properties. Becoming a master extension debugger requires an
understanding of these behaviors, how extension components work with each other, and where to corner
bugs. This tutorial gives developers a basic understanding of debugging extensions.

## Locate the logs

Extensions are made of many different components, and these components have individual
responsibilities. Download a broken extension [here](https://storage.googleapis.com/web-dev-uploads/file/WlD8wC6g8khYWPJUsQceQkhXSlv1/KZdyzIighjOsDUPaibEn.zip "broken_background_color.zip") to begin locating error logs for different
extension components.

### Background script

Navigate to the chrome extensions management page at `chrome://extensions` and ensure developer mode
is on. Click the **Load Unpacked** button and select the broken extension directory. After the
extension is loaded, it should have three buttons: **Details** , **Remove** and **Errors** in red
letters.

![Image displaying error button on extension management page](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/image-displaying-error-bu-ed273047649fa.png)

Click the **Errors** button to view the error log. The extensions system has found an issue in the
background script.

`Uncaught TypeError: Cannot read property 'addListener' of undefined`

![Extensions Management Page displaying background script error](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/extensions-management-pag-9bd711e490a2f.png)

Additionally, the Chrome DevTools panel can be opened for the background script by selecting the
blue link next to **Inspect views**.

![DevTools displaying background script error](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/devtools-displaying-backg-7bb812ba09054.png)

Return to the code.

    chrome.runtime.oninstalled.addListener(function() {
      chrome.storage.sync.set({color: '#3aa757'}, function() {
        console.log('The color is green.');
      });
      chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
          conditions: [new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostEquals: 'developer.chrome.com'},
          })],
          actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
      });
    });

The background script is attempting to listen for the [`onInstalled`](https://developer.chrome.com/docs/extensions/reference/runtime#event-onInstalled) event, but the property
name requires an upper case "I". Update the code to reflect the correct call, click the **Clear
all** button in the upper right hand corner, then reload the extension.

### Popup

Now that the extension initializes correctly, other components can be tested. Refresh this page, or
open a new tab and navigate to any page on developer.chrome.com, open the popup and click the green
square. And... nothing happens.

Navigate back to the Extensions Management Page, the **Errors** button has reappeared. Click it to
view the new log.

`Uncaught ReferenceError: tabs is not defined`

![Extensions Management Page displaying popup error](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/extensions-management-pag-50796c04207b4.png)

Popup errors can also be viewed by inspecting the popup.

![DevTools displaying popup error](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/devtools-displaying-popup-3dcd4fd1d1b0a.png)

The error, `tabs is undefined`, says the extension doesn't know where to inject the content script.
This can be corrected by calling the [`tabs.query()`](https://developer.chrome.com/docs/extensions/reference/tabs#method-query) method, then selecting the active tab.

      let changeColor = document.getElementById('changeColor');

      chrome.storage.sync.get('color', function(data) {
        changeColor.style.backgroundColor = data.color;
        changeColor.setAttribute('value', data.color);
      });

      changeColor.onclick = function(element) {
        let color = element.target.value;
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.executeScript(
              tabs[0].id,
              {code: 'document.body.style.backgroundColor = color;'});
        });
      };

Update the code, click the **Clear all** button in the upper right hand corner, and then reload the
extension.

### Content script

Refresh the page, open the popup and click the green box. And... nope, the background still hasn't
changed colors! Navigate back to the Extensions Management Page and... there is no **Errors**
button. The likely culprit is the content script, which runs inside the web page.

Open the DevTools panel of the web page the extension is trying to alter.

![Extension error displayed in web page console](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/extension-error-displayed-0739d7c3296.png)

Only runtime errors, `console.warning` and `console.error` will be recorded on the Extensions
Management Page.

To use DevTools from within the content script, click the dropdown arrow next to **top** and select
the extension.

![Uncaught ReferenceError: tabs is not defined](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/uncaught-referenceerror-3861371b8972f.png)

The error says `color` is not defined. The extension must not be passing the variable correctly.
Correct the injected script to pass the color variable into the code.

```javascript
  {code: 'document.body.style.backgroundColor = "' + color + '";'});
```

### Extension tabs

Logs for extension pages displayed as a tab, such as [override pages](https://developer.chrome.com/docs/extensions/mv2/override.md.txt) and [full-page options](https://developer.chrome.com/docs/extensions/mv2/options.md.txt#full_page),
can be found in the web page console and on the extensions management page.

## Monitor network requests

The popup will often make all of the required network requests before even the speediest of
developers can open DevTools. To view these requests, refresh from inside the network panel. It will
reload the popup without closing the DevTools panel.

![Refresh inside the network panel to view popup network requests](https://developer.chrome.com/static/docs/extensions/mv2/tutorials/debugging/image/refresh-inside-network-p-34ee6b66dbd8b.gif)

## Declare permissions

While extensions have similar capabilities as web pages they often need permission to use certain
features, such as [cookies](https://developer.chrome.com/docs/extensions/reference/cookies), [storage](https://developer.chrome.com/docs/extensions/reference/storage) and [Cross-Origin XMLHttpRequest](https://developer.chrome.com/docs/extensions/mv2/xhr.md.txt). Refer to the
[permissions article](https://developer.chrome.com/docs/extensions/mv2/permission_warnings) and the available [Chrome APIs](https://developer.chrome.com/docs/extensions/reference) to ensure an extension is requesting
the correct permissions in its [manifest](https://developer.chrome.com/docs/extensions/reference/tabs).

      {
        "name": "Broken Background Color",
        "version": "1.0",
        "description": "Fix an Extension!",
        "permissions": [
          "activeTab",
          "declarativeContent",
          "storage"
        ],
        "options_page": "options.html",
        "background": {
          "scripts": ["background.js"],
          "persistent": false
        },
        "page_action": {
          "default_popup": "popup.html",
          "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
          }
        },
        "icons": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        },
        "manifest_version": 2
      }

## Next steps

For further information on debugging extensions, watch [Developing and Debugging](http://www.youtube.com/watch?v=IP0nMv_NI1s&feature=PlayList&p=CA101D6A85FE9D4B&index=5). Learn more
about [Chrome Devtools](https://developers.google.com/web/tools/chrome-devtools/) by reading the documentation.