Using Dev Tools in your browser of choice it’s possible to get more precise timing of your websocket connections. This can be helpful in troubleshooting apps that are slow or timing out.
Here are a few steps to follow:
In this example, we will use the Chrome Dev Tools. Press CTRL + Shift + I to get it to open. It should look like this:
With the Network tab selected, proceed to open your application:
We’re interested in that top line with the Type of websocket, select that:
On this timing tab, we can see how long it took to establish a connection to the app. This includes authentication, authorization, and loading the app into memory (if not accomplished previously).
If we want to break that down further, we can go to the Frames tab:
Here we can see the length of the individual frames as well as the time in which they were loaded. This should give you a good idea of how long each frame took based on the load time of the previous frame. Furthermore, the green frames are those sent to the server while the white handles are the responses. You can compare them by matching the Handle number with the ID in the response as highlighted.