How to Troubleshoot UI Issues Using DevTools (HAR File & Console Logs)
Step 1: Open Developer Tools (DevTools)
- Open Google Chrome, Microsoft Edge, or Mozilla Firefox.
- Press F12 or Ctrl + Shift + I (Cmd + Option + I on Mac) to open DevTools. 3. A panel will appear on the side or bottom of your browser.
Step 2: Check Network Requests
The Network tab shows all requests your browser makes when loading a page. If a request fails, the webpage may not display correctly.
How to check failed requests?
- Click the Network tab.
- Reload the page (F5 or Ctrl + R).
- Look for requests marked red – these are failed requests.
[ALT text: A computer screen displaying a dashboard with a message indicating an error or failed request. On the left side, there is a section labeled "Dashboard" with various options, while the right side shows a network activity log with a list of requests, highlighting a failed request in red. Below the image, there are instructions to click on a failed request for more details.]
4. Click on a failed request to see more details.
What to look for?
- Red requests – These are errors that may cause the page to break. - Slow requests – If a request takes too long, it could slow down the page. - Blocked requests – Some files may be blocked due to browser settings, firewalls, or extensions.
Step 3: Check Details in Preview and Response Tabs
If a request has failed, click on it and check:
- Preview Tab – Shows what the request should have loaded. If it’s empty or has an error message, there may be a problem with the server.
- Response Tab – Shows the actual response from the server. If you see an error like 403 (Forbidden) or 500 (Internal Server Error), this might indicate a server-side issue.
[ALT Text: A computer screen displaying an error message that says "Could not load data!" on the left, next to a web browser's developer tools showing a network request with an error highlighted in red on the right.]
Step 4: Check the Console Tab for Other Errors
The Console tab shows extra error messages that might explain why something isn’t working.
How to check for errors?
- Click the Console tab.
- Look for messages in red – these are errors.
- If you see an error, take a screenshot or copy the message.
[ALT text: A screenshot of a web development environment showing a "Sample" document with a "Could not load" error message. The interface displays various errors in a red-highlighted section of the console, indicating multiple problems related to content loading and resource access. The left side features a visual element of a computer graphic with a face, and the bottom includes a message stating "Could not load".]
Common Console Errors:
- 404 Not Found – The file or resource is missing.
- 403 Forbidden – You might not have permission to access something. - 500 Internal Server Error – A problem on the server side.
Step 5: Save a HAR File to Share with Support
If you need help, save a HAR file with all network details:
- Click the Network tab.
- Click the Record button if it is not already active.
- Reload the page (F5 or Ctrl + R).
- Click the Download (Export) button or right-click inside the Network panel and select Save as HAR with content.
- Save the file and attach it when contacting support.
[ALT Text: Screenshot of a browser's developer tools, specifically the Network tab. Two buttons labeled "Record" and "Experiment" are highlighted in red. Below, a table includes various columns for details such as "Time," "Initiator," "Type," and "Size," with different entries listed for each column. The interface displays data related to web requests.]
Step 6: What to Send to Support?
If you need help, send the following details:
- A short description of the issue.
- Screenshots of errors from the Console tab.
- The HAR file (from the Network tab).
- The exact time and date when the issue happened.
5. Conclusion: A summary of key takeaways or final points.
By using DevTools, you can quickly find and report UI issues, helping the support team fix them faster. If you have any questions, feel free to contact support with your findings.
Need more guidance? Let us know! We’re happy to assist.
References/Related Content: Links and resources for further reading. https://community.sisense.com/t5/knowledge-base/generating-a-har-file-for-troubleshooting-sisense/ta...
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this please let us know.
