Add section describing how to generate a valid HAR file

[rondale-sc]

Using Firefox because with persistent logging history on in Chrome only request history is persisted not response history. This means the HAR file doesn't have the ifnormation necessary for EMB to work correctly:

See more here:

https://bugs.chromium.org/p/chromium/issues/detail?id=118971 https://bugs.chromium.org/p/chromium/issues/detail?id=116990

[krisselden]

I've not had an issue with generating a HAR with Chrome, you have to right click on the table in the Network tab and select "Save HAR with Content"

[krisselden]

I see, you are doing the recording with the about:blank redirect enabled, I usually don't do that.

[rondale-sc]

Oh, I see. I had assumed that was what chrome-tracing used to determine the end of the run. Is that not the case?

[krisselden]

@rondale-sc it is, but you don't need to use the redirect for making the recording, just for doing the trace.

[rondale-sc]

@krisselden Oh, that makes sense. Would it make sense for me to add a blurb about that and also instructions for Chrome?

[rondale-sc]

Updated this PR to better reflect this discussion. Though, as a side-note on my client's project I noticed that Chrome HAR file saved to invalid json. Whereas firefox did not. Very strange.

[chrisgame]

@rondale-sc @krisselden i thought the ?perf.tracing query param was required in the recording and so was the about:blank redirect as these are in the js asset that is captured in the recording. If i don't include the ?perf.tracing query param it it causes a 404 when running the benchmark as the .har file doesn't contain a request for the base url that includes the query param. It's only the ember version that gets swapped out right? The app code that is used comes from the .har file?

I have also modified the config.json slightly to include a url as the app i want to benchmark doesn't serve anything interesting on the root. The page i want to benchmark is actually a few levels deeper. Do you think this is a change worth adopting? I can imagine there are few apps out there with similar setups

[chrisgame]

Also i'm interested to know how you go about capturing your .har files. I have found chrome doesn't reliably capture the payload of responses, so much so that even after a few runs i couldn't get all the requests to come back with responses. I stopped short of editing a .har file together. Firefox seems to capture everything correctly but when run yarn run serve i get a error parsing the vendor.js (which is admittedly a masssive file on my project)

[rondale-sc]

@chrisgame I had the same trouble re: chrome response problems. You can generate the har files in Firefox and that has been considerably more reliable for me.

Once you have Firefox install:

• open up the devtools and go to the settings and enable the "Enable persistent logs" setting. This will ensure that when your application navigates away to about:blank the network trafic can still be written as HAR.
• Read the Basic Usage from krisselden/chrome-tracing to ensure that your application will know to document.location.href='about:blank'; after paint. And ensure that your application is setup correctly.
• Start your server.
• Clear the network pane from the Firefox devtools by clicking the trash icon to the left.
• Navigate to the page you'd like to bench
• Wait until your application navigates to about:blank
• In Firefox's network panel right-click anywhere inside the "File" column Select "Save All As HAR"

[rondale-sc]

@chrisgame As for your other question. I believe that you do need the redirect and qp in your recording.

The ember version is swapped out under certain circumstaces (configurable) and otherwise you can sub out your entire dist, iirc. Those config options should be documented in the README. Following what is being substituted can be done by putting some consoles into the server.ts file before you run. Troubleshooting, at least in my experience, is a lot of source reading and some trial-and-error.