Devtools

NeetoReplay offers developer tools for inspecting console and network events. These devtools can be accessed from the session playback control bar by clicking the terminal icon.

Screenshot 2024-03-15 at 10.02.56 AM.png
Opening devtools

The developer tools consist of two tabs:

  • Console: This tab typically displays any errors, warnings, logs, or informational messages that are logged by the web page during the session replay.

  • Network: This tab shows all the network requests made by the web page during the session replay.

Console tab

Screenshot 2024-03-15 at 10.46.16 AM.png
Console tab

The console tab within the session replay developer tools provides access to the messages logged during the replay. These messages can be of four severity levels:

  • Log: These are general messages from the application.

  • Warn: These are warnings that may indicate potential issues in the application.

  • Info: These are informational messages that may be helpful for debugging.

  • Error: These are error messages that indicate something has gone wrong in the application.

Clicking on error and warning messages will unveil a stack trace, which is a sequence of function calls leading to the error. This can be instrumental for debugging purposes. Similarly, clicking on log and info messages expands them to display additional details.

The console tab also provides options to filter and sort the displayed messages.

Screenshot 2024-03-15 at 10.46.52 AM.png
Filters in the console tab

  • Sort by Time: This sorts the messages by the time they occurred, with the most recent message appearing at the top by default.

  • All: This shows all messages of any severity level (Log, Warning, Info, Error).

  • Log: This shows only log messages. It works in tandem with other filters except for the All filter.

  • Warn: This shows only warning messages. It works in tandem with other filters except for the All filter.

  • Info: This shows only informational messages. It works in tandem with other filters except for the All filter.

  • Error: This shows only error messages. It works in tandem with other filters except for the All filter.

  • Filter: You can enter a keyword here to filter the messages. Only messages that include the keyword in their text will be displayed. It works in tandem with other filters.

Network Tab

Screenshot 2024-03-15 at 11.02.07 AM.png

The Network tab displays a list of all network requests made during the session playback. Each request includes the following information:

  • Method: The HTTP method used for the request (e.g., GET, POST).

  • URL: The URL of the requested resource.

  • Time: The time at which the request was made.

Clicking a request reveals further information about that request.

Screenshot 2024-03-15 at 11.03.13 AM.png
Expanding a network request

  • Status: The HTTP status code returned by the server.

  • Duration: The time it took to complete the request.

  • Method: The HTTP method used for the request.

  • URL: The URL of the requested resource.

  • Request headers: The HTTP headers sent with the request. These headers can contain information such as the type of data being requested, any cookies or authentication information, and other data relevant to the request.

  • Request body (might be null): The data sent by the client to the server in a POST or PUT request.

  • Response headers: The HTTP headers sent by the server in response to the request. These headers can contain information about the response data, such as its size and content type, as well as other information such as cookies or server information.

  • Response body: The content of the response data (if available). This will typically only be available for text-based responses.

The Network tab also provides options to filter and sort the displayed network requests.

Screenshot 2024-03-15 at 3.49.19 PM.png
Filters in the network tab

  • Sort by: Requests can be sorted based on their duration and invocation time.

  • All: This shows all network requests.

  • Internal: This shows only requests made to resources on the same domain as the main document.

  • External: This shows only requests made to resources on a different domain from the main document.

  • Failed: This shows only requests that failed, i.e., those that resulted in a non-200 status code.

  • Filter: You can enter a keyword here to filter the requests. Only requests that include the keyword in their URL, method, or other properties will be displayed.

Can't find what you're looking for?