2

I've been trying to figure this out from the docs and samples but there just isn't enough there yet (or maybe I'm missing something?).

I want to create a devtools panel but I still want access to the inspected window's dom like I get in content scripts. Right now my option is eval something in the context of the inspected window, but i would really rather not do that if I can avoid it. If I can just use a content script along with my devtools page/scripts that would be idea, but it doesn't seem to be working like I expect that it should - i can't seem to use the background page to send messages between my devtools page and my content script.

Also, is there a way to get those cool dom subtrees to display like they do in the elements panel or in the console along with the awesome hover/highlight feature?

UPDATE

So I can connect to the content script from the panel page by forwarding the tab id of the inspected window and pulling that out in my background page. So I have to do this

// devtools.js
chrome.extension.sendMessage({ 
    'to': chrome.devtools.inspectedWindow.tabId, 
    'message': 'whatever'
});

and 

//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
    message.from = sender.tab.id;
    chrome.tabs.sendMessage(message.to, message, callback);
});

And my content.js script gets the message just fine ... and i thought that the sender's tab id would work to send things back from the content script, but it doesn't. The background script gets the message but the devtools page never gets it back.

I'm having a bit of trouble figuring out how to properly debug devtools extensions as well. The content script can log to the page's console and the background script logs to the background page that you can inspect from the extensions page, but where does the devtools page log to?

Ranganadh Paramkusam
  • 4,258
  • 2
  • 22
  • 33
underrun
  • 6,713
  • 2
  • 41
  • 53
  • Using the provided eval function would probably end up being simpler, just `eval("(" + someFunction.toSTring() + "())");` though I don't know why it won't work passing through the background page – gengkev May 12 '12 at 05:33
  • 1
    You are missing some bug in your code, I've done extension that communicates between devtools and content script via background page successfully, using same approach as you do. To debug devtools (i.e. see console output) use "unlock into separate window" button in the bottom left corner of devtools and click F12. Another devtools window will be opened. And then you'll be debuging devtools with devtools. Devtools, devtools, devtools - I'm not good with synonyms :( – Konrad Dzwinel Jun 19 '12 at 08:10

2 Answers2

0

The code I was originally testing works fine now with Chrome 26+ ... I think I was doing something that should have worked but didn't at the time that caused the behavior I was seeing.

@Konrad Dzwinel's comment was very helping on debugging devtools and noting that fact that this method actually should and does work. Thanks!

underrun
  • 6,713
  • 2
  • 41
  • 53
0

Just a quick update from 2016 (and Chrome 54+) for anybody who could also struggling debugging DevTools extension:

After adding custom DevTools pane successfully and showing Angular2 app in it, I found that the extension isn't connected to the page DevTools console and sources. Hitting on the page DevTools window F12 as suggested above doesn't work (have no idea if it's Chrome itself of some problems in my system), the page DevTools window is closed. But pressing Ctl+Alt+I on the page DevTools window opened one more DevTools window with the custom pane application sources and console attached.

Alex Korobko
  • 145
  • 5