After following the approach mentioned on the answer of Multiple URLs copy in Sources/Network tab to open devtools on devtools, in the cases where many requests appear with the same name or displayName, I ask here for ways to,
after storing some relevantReqs or maybe relevantNodes of, for example, https://codesandbox.io/ with this following codeblock that targets there the requests named as ‘httpapi’:
let relevantNodes = [];
UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.forEach(function(node) {
//let nodeReq = node.request();
if (node.request().url().indexOf('httpapi')!==-1) {
relevantNodes.push(node);
}
});
ways to console.log (or even render by prepending a DIV on DevTools Network tab where I could log a REQ1 VS REQ2 HTML list or table to point out their DIFF, or in the worst case just a JSON with) the DIFF of 2 requests objects.
Picture of DevTools Network tab inspecting codesandbox.io
I know one could just suggest to type the filter word manually and enable all or all the necessary columns to spot the differences of the requests of the same name but, enabling all the columns every time with clicks every single time could be tedious, and I don’t know if all the available columns to display are the exact number of properties and methods that the .request() object or its related ‘entry’ object from exportHAR() has. Also, even if all columns are enabled they are not fully displayed and one must be constantly clicking to resize it.
So, this (JSON) object comparator or diff generator would be useful to spot the difference and to better the code filtering I just do with if (node.request().url().indexOf('httpapi')!==-1) {
that returns more than just 1 filtered request. And well, it could be a generic or multi-purpose)(JSON) object comparator or a custom one for this escenario or JS context in the devtools on devtools where UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes[0].request()
or any request() object has its different attributes splitted up into different propperties and methods (image here) of that object, that in the .exportHAR() method you get all of that data at once ironically, but we should target just the relevantNodes and not all like .exportHAR() does, if chrome extensions are considered.