How to get and save by code the responseBody or data from some or the selected requests already made and captured by the browser in DevTools Network tab?
By following the steps listed on this question to open devtools on devtools and end up with 2 detached devtools windows, in the 2nd one now it is posible to get access to the UI object.
The goal here would be to be able, by pasting a script in JS console, to download or save or at least get a print in console the responseBody or content of the currently selected request despite if it is a JSON (which usually displays in not so many lines), a text file (of may lines, that requires a scroll), an image or media.. Which then could be used to do it with many request at a time probably.. But lets focus on the first step.
So, in order to get the responseBody, that is inside the Preview or specially in the Response tab of the sidebar that appears when selecting a request in the ones listed in the Network tab of a Devtools window,
I have tried to use this code line:
UI.panels.network.networkLogView.dataGrid.selectedNode.dataGrid.selectedNode.request()
but no matter what I add to it, even if it is .response .responseBody .getContent .content .data or it's method versions like .response() .getContent(), etc. I get an error, of course, because those attributes or methods doesn't exist or aren't available (which BTW reminds me that they are not available also when exporting a HAR).
Unlike the previous questions where the main goal was to list the URLs from all the requests, here I used selectedNode instead of rootNode() which I have tried some things in too but since I maybe got lost with too many attributes in the objects and accepted to pass quickly to .selectedNode, it's worth mentioning that I may have missed something with rootNode(). It's worth to mention that looking at the comments I am not the only one who would like to see the challenge of getting the responseBody solved.
Meanwhile, trying another approach, a visual approach to get the lines of the text file in Response, using this following codeblock allowed me to get the lines of the file, but since it has many lines and requires a scroll, the window opts to make visible only a certain range of lines depending on the scrolling position (so, when I scroll to the top I get the 58 first lines. In the middle, I get 72 middle lines. At the bottom, I got 78 lines), and, thus, this following codeblock requires an improvement to get all the lines:
var el = document.getElementsByClassName("vbox flex-auto")[18].shadowRoot.children[4].children[0].children[0].children[0].shadowRoot.children[0]
var dataVarInStringFormat = '';
for(let i_el=0;i_el<el.getElementsByClassName("cm-line").length;i_el++){
dataVarInStringFormat += '\n' + el.getElementsByClassName("cm-line")[i_el].innerText;
}
console.log(dataVarInStringFormat);
//TO DO: check if the type responseBody or content is JSON, text file or imag or media, maybe by checking their attribute in HAR
if(dataVarInStringFormat[0]=='{'){
eval('let temp0 = ' + dataVarInStringFormat + ';');
eval('console.log(temp0);');
}
And I don't know why but this codeblock for scrolling that element didn't work here:
//var elementToScroll = el;
//var elementToScroll = el.children[0];
//var elementToScroll = el.children[0].children[0];
var elementToScroll = el.children[0].children[1];
var scrollingElement = (document.scrollingElement || elementToScroll);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
Anyway, I know that my central question is the one I mentioned at the top, but I would like to also hear any opinion on either of the approaches I mentioned or another approach, maybe using devtools API(?) for chrome extensions(?) as I am not so familiar with it... Thanks in advance.