How to Capture the Network Tab (Developer Tools) Screenshot to Report an Issue

When a user reports an issue that they are getting an error on a page or data not loading, it is essential to provide accurate information to the Resilinc team. A screenshot of the Network tab in the Developer Tools helps in diagnosing such issues effectively.

Steps to Capture the Correct Screenshot from the Network Tab

1. Open Developer Tools
   • While on the portal page, press F12 on your keyboard, or
   • Right-click anywhere on the page and select Inspect from the context menu.
2. Select the Network Tab
   • Click on the Network tab from the Developer Tools menu.
3. Apply the Filter
   • From the filter options, select Fetch/XHR. This will help narrow down to relevant API calls.
4. Replicate the Issue
   • Now refresh the page where you are facing the issue.
5. Review the Network Activity
   • Return to the Network tab. You will see a list of API calls along with their status codes.
6. Identify the Relevant API Endpoint
   • Look for the API related to the issue which has received error. These are typically highlighted in red.
   • You can also use the search bar to filter requests using relevant keywords such as Supplier, Site, WarRoom, etc., depending on the context of the issue. For example: If the Supplier Listing page fails to load, search for API endpoints containing the keyword "supplier" to locate the relevant request.
7. Capture the First Screenshot
   • Take a screenshot of the Network tab, ensuring the following details are clearly visible:
     • API URL
     • Status Code
     • Time Taken

8. Capture the Timing Tab
   • Click on the relevant API request to view its details.
   • Navigate to the Timing tab under the selected request.
   • Take a screenshot showing the server timing and related metrics.

9. Capture Additional Tabs for better analysis.

• For deeper analysis, also take screenshots of the following tabs:
  • Headers
  • Payload
  • Preview
  • Response

Important:
Ensure that screenshots are clear and complete, covering all required elements. This helps the Resilinc team to investigate and resolve issues more efficiently.