Access Dev Tools from Electron via script. possible?


#1

I have a question on Electron and Network/DevTools:

I have a BrowserWindow and I want show all file requests (html, css, js etc.) in my Electron app. Is it possible? What is the best way to implement that?

(After some research I think the devTools might help to achieve that. But I wasn’t able to get access to the devTools from my Electron app.)

Help or hints appreciated.

Thanks in advance,
–Simon


#2

If you’re not setting a MenuBar, then by default you can use cmd+alt+i or ctrl+shift+i. Otherwise, BrowserWindow has a .openDevTools() function, which can be in your main process. Or you could do something like var thisWindow=require('remote').BrowserWindow.getAllWindows()[0]; thisWindow.openDevTools(); to open the devtools from within the renderer process. Otherwise, you can add it to your MenuBar using this cribbed from the docs:

{
 label: 'Toggle Developer Tools',
 accelerator: (process.platform == 'darwin')?'Alt+Command+I':'Ctrl+Shift+I',
 click: function(item, focusedWindow) {
  if (focusedWindow)
  focusedWindow.toggleDevTools();
 }
}

#3

thanks for the quick response. but that is not what I am looking for. May be I wasn’t clear enough…

I don’t want to use the devTools UI. I want to get access to the data that were gathered by devTools.
I need (on script level; not via UI) access to something like this (from my Electron app):

var arrayWithAllNetworkRequests = __SOME_MAGIC_FUNCTION__();

With devtools you can do something like this:

      chrome.devtools.network.onRequestFinished.addListener(
          function(request) {
            if (request.response.bodySize > 40*1024)
            chrome.experimental.devtools.console.addMessage(
                chrome.experimental.devtools.console.Severity.Warning,
                "Large image: " + request.request.url);
      });

That is going into the right direction. But how can I get access to “chrome.devtools” from Electron?

–Simon


#4

Ah, I see. It’s not something I’ve ever used, and I especially don’t know how it might be implemented in Electron. But this bit from the docs, makes me think it might be unlikely that it’s available:

chrome. APIs*
Some Chrome extensions may use chrome.* APIs for features and while there has been some effort to implement those APIs in Electron, not all have been implemented.
Given that not all chrome.* APIs are implemented if the DevTools extension is using APIs other than chrome.devtools.*, the extension is very likely not to work. You can report failing extensions in the issue tracker so that we can add support for those APIs.

Don’t take my word as gospel though, I have no idea.