Save initiator in Chrome when saving as HAR - google-chrome-devtools

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.

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.

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.

Fiddler: Reconstructing files

I am recording sessions to malicious websites using Fiddler and want to be able to reconstruct malware dropped by the website onto a victim machine. Does Fiddler have this capability inbuilt? Suggestions for other tools that could achieve this with the Fiddler saz file are welcome.
It seems Fiddler saves any files that are part of a successful download in the session. It can be viewed by right clicking on the request -> Inspect in new Window -> Response -> Textview.
Clicking on the dotted icon at the bottom right of this window saves the file in the IE temp folder. Alternatively, it can be saved to the desired location.

Chrome developer tools not displaying full html/js file

I see an error in the console view. I click on the line number, and it opens the HTML file in the sources tab. But that line is not displayed because only the first 11 lines of the HTML file (which is mainly JS) are shown. This is a recurring problem for me. The full file is loaded and successfully parsed and executed by the browser, when I view the file in the browser the full source is there. If I load the page before opening the developer console everything works as expected. What might be happening?
Version 37.0.2062.44 beta-m