Debug a Google Chrome Developer Tools Panel Extension

A Google Chrome Developer Tools Panel Extension is (as stated in the documentation):

a way to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars…

Its an awesome way to increment a Chrome user experience while he is viewing another page in the main content area. For those who does not know, Chrome extensions are plain html + js + css files. They are really easy to implement.

The problem: How to debug a Google Chrome Developer Tools Panel Extension?

One of the main difficulties I’ve found when starting to developing them, was debugging. I could not find an easy way to see the errors they were giving, and I could not understand how to use Developer Tools itself to inspect the elements, check the javascript code, etc.

When you create a extension, you have a manifest.json file that contains information about it. Here is an example:

{
  "name": "Sample",
  "version": "0.1.0",
  "description": "Sample DevTools Extension",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

The devtools.html usually looks like this:

<html>
<body>
<script src="devtools.js"></script>
</body>
</html>

The devtools.js is where the magic happens. Here you usually call the chrome api methods to register your objects, panels, etcs:

// This will register the panel. 
// NOTE: The second argument is required, so you need a image file to be the icon of your panel otherwise it just won't work (it did not for me at least)
chrome.devtools.panels.create("Sample Panel",
                              "Icon.png",
                              "panel.html",
                              function(panel) { 
                              });

The panel.html is the page that will appear on the Developer tools panel. Here is an example:

<html>
<body>
    <h1>Hello from a panel!</h1>
</body>
</html>

Here is the final result:

The solution: Add the panel html page as an options page

Just add the panel html page as the options page of your extension, changing the manifest.json file like this:

{
  "name": "Sample",
  "version": "0.1.0",
  "description": "Sample DevTools Extension",
  "devtools_page": "devtools.html",
  "options_page": "panel.html",
  "manifest_version": 2
}

With that, you will be able to open your Panel page like an options page. Clicking on the options link of your extension on the “Extensions” tab:

By clicking the link, chrome will open the page as a normal html page, giving you access of the Developer Tools itself to debug your extension:

Happy debugging (and coding)! 😀

Advertisements

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: