CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-devtools
Chris
Chris

Reputation: 7853

Extending Chrome Developer Tools with a special network view

I'm working a lot with the chrome developer tools to develop web applications. Currenty in one big project we have an application which features its own JSON-format for requests to the server. The JSON objects sent contain various information about the type of the request and its data and so on.

Is there an opportunity to extend chromes developer tools (especially the network view) with a special view which displays the data from the request in a way that makes it more readable for developers working with the project?

I tried to find out about extending the tools but i don't know really where to start. I found some information how i can add tabs and pages to the developer tools but nothing about how i can get the request / response information to display them.

Upvotes: 2

Views: 2248

Answers (3)

Rob W
Rob W

Reputation: 349112

There is no standard API to extend the network view of the developer tools. If you're happy with using a custom devtools tab, use the chrome.devtools.network API to filter and format responses, and render it in your tab.

If you're adventurous, you can use the next approach to directly modify the content of the network view.

  1. First, you need to know how to debug the devtools.
    1. Open the developer tools (F12).
    2. If it's docked, undock it.
    3. Press F12 to open the devtools of the devtools.
  2. Then, you need to use your debugging/coding skills to find out which methods are responsible for rendering the network panel (tip: use DOM breakpoints to quickly discover where to start).
  3. Write code which transforms the network tab to the desired format (either by monkey-patching, or by hooking up on the event you've found at the previous step).
  4. At this point, you know how to change the lay-out of the network tab. Now, you need to permanently activate the code for your developer tools. I've explained two of such methods at How to inject javascript into Chrome DevTools itself.

Upvotes: 2

Uzair Farooq
Uzair Farooq

Reputation: 2437

You can make use of chrome.devtools.network.onRequestFinished. For more control and advanced information you can use chrome.webRequest api.

Upvotes: -1

Danny Beckett
Danny Beckett

Reputation: 20806

You could download a copy of Google Chrome's source code and play with it; it's written in C++.

/trunk/src/chrome/browser/devtools looks to be the correct dir to look at.

Upvotes: 0

Related Questions