Contribute

Debug

You can debug the chrome dev tools with ... the chrome devtools! Just open the devtools in the page (inspect element) and press ctrl+shift+j (on windows) A new dev tools windows will come up that debugs the previous devtools

Get Started

Get the source, go to the extension page, disable the 'official' version! (else you will get a double panel etc), check developer mode, load the folder.

When you make changes, don't forget to reload the extension

Catch

You can place breakpoints in the parts that are executed on 'the context of the extension'. Pieces of code that are executed on the context of the page that you are debugging, are not debuggable.

Example: you can put a breakpoint in

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
      updateElementProperties(); //line on which you can place a breakpoint
  });

But the page_getKnockoutInfo function itself is not debuggable because it is passed as a string (I know, ugly) to the chrome api.

sidebar.setExpression("(" + page_getKnockoutInfo.toString() + ")()");

I type console.log statements (or use the debug function) because they appear in the console, in the devtools of the page.