Network latency detection

Abstract

Methods, systems, and apparatus, including computer programs encoded on a computer storage medium, for providing user interface development tools. In one aspect, a method includes receiving, from a client device, network request data that specifies, for each of multiple network requests that were transmitted from the client device to a server during a user session, a requested user interface element and a load time that indicates a duration of time between a time at which the network request was initiated and a time at which the user interface element was loaded in a user interface at the client device. An interactive interface is generated. The interactive interface includes a session replay area that presents playback of visual changes of the one or more user interfaces that occurred during the user session and a network request area that presents a list of network requests that were transmitted during the user session.

1 . (canceled) 
     
     
         2 . A method, comprising:
 receiving, from a client device, network request data that indicates, for each of a plurality of network requests that were generated by an application running on the client device and transmitted from the client device to a remote computer during a user session with one or more user interfaces of the application, (i) a requested data file for displaying one or more user interface elements requested by the network request and (ii) a load time that represents a duration of time between a time at which the network request was initiated by the client device and a time at which the one or more user interface elements were loaded in the one or more user interfaces at the client device using the requested data file; and   generating and displaying an interactive interface that includes,
 a session replay area that displays playback of the user session including visual changes to the one or more user interfaces that occurred during the user session, and 
 a network request area that progresses with the playback of the user session and that displays, for each of multiple frames of the playback, a list of network requests that were transmitted, from the client device to the remote computer, during the user session for multiple user interface elements displayed concurrently in the frame and, for each network request in the list, the load time for the network request. 
   
     
     
         3 . The method of  claim 2 , wherein generating and displaying the interactive interface comprises displaying an animation that visually indicates, during playback of the visual changes to the one or more user interfaces in the session replay area, which network request in the list of network requests was initiated by the client device as the visual changes occurred during the user session. 
     
     
         4 . The method of  claim 3 , further comprising updating the animation during the playback of the user session to indicate different network requests as the playback progresses. 
     
     
         5 . The method of  claim 3 , wherein the animation comprises displaying a network request identifier element next to the network request in the list that was generated by the client device as the visual changes occurred during the user session. 
     
     
         6 . The method of  claim 2 , wherein the network request area includes a waterfall chart that includes a bar for each network request in the list, the bar for each network request including a first end that indicates a time at which the network request was initiated and a second end that indicates a time at which the one or more user interface elements of the data file requested by the network request was loaded in the user interface, wherein a length of the bar between the first end and the second end indicates the load time for the network request. 
     
     
         7 . The method of  claim 2 , further comprising:
 detecting selection of a given network request in the list of network requests; and   visually updating the interactive interface to present a network request details panel that includes a timing summary for the given network request, the timing summary including measured time durations for events related to requesting and loading a given user interface element that was requested by the given network request.   
     
     
         8 . The method of  claim 2 , further comprising:
 detecting user interaction with a given network request in the list of network requests; and   causing the playback of the user session to display frames of the user session that were displayed during the user session when the given network request was initiated.   
     
     
         9 . The method of  claim 2 , wherein the interactive interface comprises an event stream area that includes information about pages presented by the client device during the user session, the information including, for a page that is being presented in the session replay area, page speed metrics that each indicate a duration of time taken to reach particular milestones in loading the page. 
     
     
         10 . A system, comprising:
 one or more processors; and   one or more storage devices storing instructions that, when executed by the one or more processors, cause the one or more processors to perform operations comprising:
 receiving, from a client device, network request data that indicates, for each of a plurality of network requests that were generated by an application running on the client device and transmitted from the client device to a remote computer during a user session with one or more user interfaces of the application, (i) a requested data file for displaying one or more user interface elements requested by the network request and (ii) a load time that represents a duration of time between a time at which the network request was initiated by the client device and a time at which the one or more user interface elements were loaded in the one or more user interfaces at the client device using the requested data file; and 
 generating and displaying an interactive interface that includes,
 a session replay area that displays playback of the user session including visual changes to the one or more user interfaces that occurred during the user session, and 
 a network request area that progresses with the playback of the user session and that displays, for each of multiple frames of the playback, a list of network requests that were transmitted, from the client device to the remote computer, during the user session for multiple user interface elements displayed concurrently in the frame and, for each network request in the list, the load time for the network request. 
 
   
     
     
         11 . The system of  claim 10 , wherein generating and displaying the interactive interface comprises displaying an animation that visually indicates, during playback of the visual changes to the one or more user interfaces in the session replay area, which network request in the list of network requests was initiated by the client device as the visual changes occurred during the user session. 
     
     
         12 . The system of  claim 11 , wherein the operations comprise updating the animation during the playback of the user session to indicate different network requests as the playback progresses. 
     
     
         13 . The system of  claim 11 , wherein the animation comprises displaying a network request identifier element next to the network request in the list that was generated by the client device as the visual changes occurred during the user session. 
     
     
         14 . The system of  claim 10 , wherein the network request area includes a waterfall chart that includes a bar for each network request in the list, the bar for each network request including a first end that indicates a time at which the network request was initiated and a second end that indicates a time at which the one or more user interface elements of the data file requested by the network request was loaded in the user interface, wherein a length of the bar between the first end and the second end indicates the load time for the network request. 
     
     
         15 . The system of  claim 10 , wherein the operations comprise:
 detecting selection of a given network request in the list of network requests; and   visually updating the interactive interface to present a network request details panel that includes a timing summary for the given network request, the timing summary including measured time durations for events related to requesting and loading a given user interface element that was requested by the given network request.   
     
     
         16 . The system of  claim 10 , wherein the operations comprise:
 detecting user interaction with a given network request in the list of network requests; and   causing the playback of the user session to display frames of the user session that were displayed during the user session when the given network request was initiated.   
     
     
         17 . The system of  claim 10 , wherein the interactive interface comprises an event stream area that includes information about pages presented by the client device during the user session, the information including, for a page that is being presented in the session replay area, page speed metrics that each indicate a duration of time taken to reach particular milestones in loading the page. 
     
     
         18 . A non-transitory computer readable medium storing instructions that upon execution by one or more computers cause the one or more computers to perform operations comprising:
 receiving, from a client device, network request data that indicates, for each of a plurality of network requests that were generated by an application running on the client device and transmitted from the client device to a remote computer during a user session with one or more user interfaces of the application, (i) a requested data file for displaying one or more user interface elements requested by the network request and (ii) a load time that represents a duration of time between a time at which the network request was initiated by the client device and a time at which the one or more user interface elements were loaded in the one or more user interfaces at the client device using the requested data file; and   generating and displaying an interactive interface that includes,
 a session replay area that displays playback of the user session including visual changes to the one or more user interfaces that occurred during the user session, and 
 a network request area that progresses with the playback of the user session and that displays, for each of multiple frames of the playback, a list of network requests that were transmitted, from the client device to the remote computer, during the user session for multiple user interface elements displayed concurrently in the frame and, for each network request in the list, the load time for the network request. 
   
     
     
         19 . The non-transitory computer readable medium of  claim 18 , wherein generating and displaying the interactive interface comprises displaying an animation that visually indicates, during playback of the visual changes to the one or more user interfaces in the session replay area, which network request in the list of network requests was initiated by the client device as the visual changes occurred during the user session. 
     
     
         20 . The non-transitory computer readable medium of  claim 19 , wherein the operations comprise updating the animation during the playback of the user session to indicate different network requests as the playback progresses. 
     
     
         21 . The non-transitory computer readable medium of  claim 19 , wherein the animation comprises displaying a network request identifier element next to the network request in the list that was generated by the client device as the visual changes occurred during the user session.