How to capture network info in Chrome devtools when clicking a link pop up a new download tab and closed right away? - google-chrome-devtools

I’m trying to use chrome devtools to see what network requests are.
But for some links, a new tab will be created for downloading a file and once the file is downloaded the tab is immediately closed.
There is no time to for me to inspect what the network requests are involved in the new tab. Is there a way to force the download in the original window so that I can still see the network activity?

As this answer suggest, yo may want to use chrome net export using chrome://net-export/
How it works?
You open a new tab and enter chrome://net-export/
Press the start logging to disk button and select a file
Do whatever
Press the stop recording button and inspect the file (should be formatted to be readable)
How to reproduce?
function popup() {
window.open('https://google.com', '_blank')
}
<button onclick="popup()">
click me
</button>
You will get WAY more information than you wished for, so - be patient when going over all the traffic details and also - make your recording as targeted and short as possible
Enjoy
EDIT
#Nathan raises a fair point in the comment - this method is not visual. a tool that may help to visualize the data is netlog viewer
Use the link, press the choose file button and upload your json file
In the left menu select events - this will display all events in a big table
Filter table by using URL_REQUEST or
Click each item to inspect and get detailed information (such as: url, headers, method, etc.)
There are other cool tools there (such as timeline) but it is different from chrome dev tools. This solution is just another set of tools for developers, that's all

Related

Save initiator in Chrome when saving as HAR

I'm trying to include the initiator information shown in chrome network tab in the developer bar when exporting as HAR, but I'm unable to find a way to do so. Is there any addon or work around to be able to save this information in HAR or any other format?
Perhaps there was a limitation with copying the Initiator data when you created the OP. Anyway, it is working fine now, using the latest version of Chrome: Version 67.0.3396.79 (Official Build) (64-bit).
To create the HAR file:
In Chrome press F12 to open DevTools then click on the Network tab.
Verify that the Initiator column is being displayed. Turn it on if necessary.
Verify that the Recording icon in the top left is on (i.e. It displays as a red circle).
Check the Preserve log checkbox.
Navigate to the desired URL.
Right click and select Save as HAR with content from the context menu.
To display the content of the HAR file later:
In Chrome press F12 to open DevTools and click on the Network
tab.
Select the HAR file you created earlier from your file system manager (e.g. Windows Explorer) and drag it to the Network panel. Chrome will prompt you to Drag HAR files here. See the Release notes for Chrome 62 for more details.
The HAR file content, including the Initiator column, will be displayed.

Prevent Chrome from closing tab that downloads CSV

I want to find out the URL to a specific CSV file on a web page. The page is built using some arcane system called QLIK, and for some reason, the CSV path does not show up in my networks panels in Chrome when hitting the download button.
When I download the CSV, a new tab is opened. I want to keep that tab open and inspect the developer tools. But Chrome immediately closes it. How do I prevent Chrome from closing the tab?
Chrome doesn't pipe network information on downloads to the network panel. They go through a different pathway then page-pound network operations. You can't inspect binary downloads.

Selecting a file from a windows dialog box in Telerik Web Test

Hi guys,
Is it possible to select a file from a dialog box when we are running a web test in Telerik Test Studio? The scenario of this execution is when we click a field in a web browser, a windows dialog box pops out and we would need to input a path to a local folder and select a file(SelectFile.PNG).
But I'm unable to detect any element from this dialog box presuming this is because the test script is a web test and hence this limitation(do correct me if i'm wrong).
Is there any workaround or suggestion to this limitation?
Many many thanks!
Best Regards,
Pravin
praja#dongenergy.dk
Kind of a late response but if your recording is enabled, it should automatically record the step for a File Upload dialog box (and handle it appropriately when using play back).
Alternatively, you can manually add the "Dialogs->FileUpload" step, and fill in the properties appropriately.

Is there any way to export chrome develop tools data from api or command

can i get Chrome Developer Tools Network Panel'data by communicate with chrome remote debugging port ?
it can be saved as har formate file,but i want to save it by some script.
You can right click on the Sources panel wheren you see the network data, and save the entire view as a HAR file, or a single file as a HAR file. And then you can import that exact data into chrome which will give you everything you had back from that specific data load.
I assume you want to get your web app performance information back from your clients.
window.performance has a lot of information about how your page loaded and all timings for document ready and DOMContentLoaded and many other stuff in very high resolution.
Anyway that is not as detailed as Network panel in developer tools and if you really want to get that information back you should ask your user to grab that information manually and send it to you or ask them to install a chrome extension that does the job for you.

How to export data from Chrome developer tool?

Network analysis by Chrome when page loads
I would like to export this data to Microsoft Excel so that I will have a list of similar data when loaded at different times. Loading a page one time doesn't really tell me much especially if I want to compare pages.
if you right click on any of the rows you can export the item or the entire data set as HAR which appears to be a JSON format.
It shouldn't be terribly difficult to script up something to transform that to a csv if you really need it in excel, but if you're already scripting you might as well just use the script to ask your questions of the data.
If anyone knows how to drive the "load page, export data" part of the process from the command line I'd be quite interested in hearing how
from Chrome 76, you have Import/Export buttons.
I was trying to copy the size data measured from Chrome Network and stumbled on this post. I just found an easier way to "export" the data out to excel which is to copy the table and paste to excel.
The trick is click Control + A (select all) and once the entire table will be highlighted, paste it to Microsoft Excel. The only issue is if there are too many fields, not all rows are copied and you might have to copy and paste several times.
UPDATED: I found that copying the data only works when I turn off the filter options (the funnel-looking button above the table). – bendur
Right-click and export as HAR, then view it using Jan Odvarko's HAR Viewer
This helps in visualising the already captured HAR logs.
I came across the same problem, and found that easier way is to undock the developer tool's video to a separate window! (Using the right hand top corner toolbar button of developer tools window)
and in the new window , simply say select all and copy and paste to excel!!
In Chrome, in the Developer Tools, under Network, in the Name column, right-click and select "Save as HAR with content". Then open a new tab, go to https://toolbox.googleapps.com/apps/har_analyzer/ and open the saved HAR file.
Note that &Lt;Copy all as HAR&Gt; does not contain response body.
You can get response body via &Lt;Save as HAR with Content&Gt;, but it breaks if you have any more than a trivial amount of logs (I tried once with only 8k requests and it doesn't work.) To solve this, you can script an output yourself using _request.contentData().
When there's too many logs, even _request.contentData() and &Lt;Copy response&Gt; would fail, hopefully they would fix this problem. Until then, inspecting any more than a trivial amount of network logs cannot be properly done with Chrome Network Inspector and its best to use another tool.
You can use fiddler web debugger to import the HAR and then it is very easy from their on... Ctrl+A (select all) then Ctrl+c (copy summary) then paste in excel and have fun
I don't see an export or save as option.
I filtered out all the unwanted requests using -.css -.js -.woff then right clicked on one of the requests then Copy > Copy all as HAR
Then pasted the content into a text editor and saved it.
I had same issue for which I came here. With some trials, I figured out for copying multiple pages of chrome data as in the question I zoomed out till I got all the data in one page, that is, without scroll, with very small font size. Now copy and paste that in excel which copies all the records and in normal font.
This is good for few pages of data I think.
In more modern versions of Chrome you can just drag a .har file into the network tab of Chrome Dev Tools to load it.
To get this in excel or csv format- right click the folder and select "copy response"- paste to excel and use text to columns.
You can try use Haiphen, which is a chrome extension that allows you to analyze network traffic and what API calls a web application is making.