chrome.devtools.network.getHAR does not work

问题

I am trying create a simple chrome extension to get number of http requests visible in network tab of chrome developer toolbar. I added manifest.json:

{
  "name": "Entries",
  "version": "1.0",
  "description": "Give me entries",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

devtools.html :

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

devtools.js:

chrome.devtools.network.getHAR(function(result) {
    var entries = result.entries;   
    Console.warn("entries : " + entries.length);

});

But when I add this extension --> open developer toolbar --> load a page I don't see any result :( This is a very simple example.. can anyone please help me point if I am missing any inputs here ?

Is there any way I can debug ?

回答1:

First of all, Console doesn't exist, try console.

However, the bigger issue here may be that you are writing to the wrong console. This should became a bit more understandable when you'll get to the end of this answer.

To debug custom devtools extensions you have to debug devtools with devtools. If this sounds like a madness then follow these simple steps:

open devtools A for any website
detach devtools window (using button in the lower left corner)
open another devtools B (while in the first devtools) using one of available keyboard shortcuts
enjoy debugging devtools A with devtools B

Everything that you output to the console from your extension in the devtools A will appear in the console of the devtools B.

回答2:

create a new panel with in the devtools.js using 'chrome.devtools.panels.create'
add a listener to to panel onshow event 'panel.onShown.addListener'
with the onshow event call 'chrome.devtools.network.getHAR'

来源：https://stackoverflow.com/questions/18268084/chrome-devtools-network-gethar-does-not-work

标签

google-chrome-extension

google-chrome-devtools