Prevent Chrome from closing tab that downloads CSV - google-chrome-devtools

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.

Related

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

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

VS Live Share and Live Server

We are using VS Live Share inside Visual Studio Code and the person who joined cannot open a shared HTML file with the Live Server extension. It says: Cannot GET .../index.html. Does Live Server only work with "local files"? There is also no option to open the shared HTML file in the file system and to open it that way. Help would be nice as quick as possible.
1-press the live share extension icon in the sidebar.
2-inside session details hover over shared servers sub-category.
3-an electrical plug with a green plus sign will show, press on it and an input field will pop up.
4-inside the input field write your localhost port like this e.g: localhost:5500 and press enter.
you can find the number of your port from the bottom right of vs code if you have a live server running. it will look like this: Port:5500.
once you do this a notification will automatically show in your partner's vs code to open the shared live server.

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.

Is there a way to programmatically open a server-side file in a new tab?

I'm running Jupyter notebook on a server and executing it from a client computer. In Rstudio server, one can programmably open a server-side file in a new tab via file.show. This is sometimes very convenient. For example, I have a script that processes a rather large image. Because of its size I don't want it to show directly in the output panel, rather I want to view it in a new tab. In Rstudio server I would normally do:
... image processing code ....
ggsave('temp.png')
file.show('temp.png')
This will automatically pop up the new image in a new tab once the script is finished.
Is it possible to do something similar in Jupyter?
I noticed that I could achieve this by clicking the image file in the built-in file browser, but I wonder if this could be programmed.
Similarly, is it possible to programmably open a webpage in a new tab like browseURL in Rstudio server? Note that webbrowser.open(url) doesn't quite do it because it tries to open a local browser, which in the server-client scenario will not open the new tab on the client side.
You can make a link. Relative URLs will open in a new browser tab. Files are served relative to the directory containing the notebook you are currently working on.
In Python:
from IPython.display import display, HTML
display(HTML('see image'))
Opening new tabs programmatically often triggers pop-up blockers, but publishing a link that the user clicks should be reliable.

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.