Idea: Chome Devtools Network Panel export and import

Sure Chrome Devtools Network Panel has the Save All as HAR with Content menu :

Unfortunately I am not able to save the raw network data to a file directly. So I cam up with this solution:

File selection dialog for selecting .rnd files:

Imported Network Panel

but that saves the network traffic in HAR format - which is a standard format but does not capture the network traffic as one sees it when it is live. Also when viewed in HAR viewers the requests get grouped by pages, instead of the exact order in which the requests were issued. This especially is sub-optimal when tracking multi-page redirects - especially when the Preserve Log is checked.

To me that is not satisfactory. Instead why not export the raw data from Network Panel and when imported load it in a separate Network Panel. That way you can exactly see the way it was recorded initially. Granted this will be very specific to Chrome Devtools, but then who uses any other browser :) Just kidding.

Anyhow, after my experience with JSOD integration with Chrome Devtools, I feel encouraged to implement the above. The idea will be to add an Export Raw... and Import Raw... menu items to the above context menu. Export functionality will basically export the raw data behind the Network Panel. Import will create an Network Panel clone and load the data in it.I will develop the import functionality in a modular fashion so that it can be launched standalone.

I have started the work on this. The Google code git repository:

https://code.google.com/p/sandipchitaleschromedevtoolsrnd/

Current progress:

• As seen above, I am now adding the Export Raw... and Import Raw... context menu items.
• Able to capture the network raw requests.
• Able to create the Imported Network Panel
• With the following code I am able to export the requests in JSON format




JSON.stringify(this._requests, function(key, value) {
if (value instanceof WebInspector.Target) {
        return;
        }
return value;
}, 4);


• Now am able to import the data back.

TODO:

• Export
• Export the data in JSON format to a file or URL. 

• Import
• Convert it into WebInspector.NetworkRequest
• Load the converted WebInspector.NetworkRequest into Imported Network Panel

Almost there. Stay tuned!