Overview
The developer console is a powerful troubleshooting tool that logs information related to a webpage, such as JavaScript errors, network requests, and security warnings. It provides insights into the underlying issues causing errors on a website or app.
When reporting an issue to the Support team, they may ask you to share screenshots of the developer console or upload a HAR (HTTP Archive) file. This helps them diagnose and resolve problems more efficiently.
Why This Is Important
Providing a developer console screenshot or HAR file allows the Support team to:
-
Identify JavaScript errors impacting the functionality of the webpage.
-
Analyze network requests and responses for any failed operations.
-
Investigate other technical issues, such as missing resources or security warnings.
With this information, the team can quickly pinpoint the root cause of the issue and provide a targeted solution.
Instructions
Opening the Developer Console
-
Ensure You Are on the Correct Page
-
Navigate to the webpage or app screen where you are encountering the issue or error.
-
-
Open the Developer Console
-
On Windows/Chrome OS: Press
Ctrl+Shift+J
-
On Mac: Press
Cmd+Option+J
-
-
Take a Screenshot
-
Capture the visible errors or logs in the console tab and save the screenshot.
-
Share the screenshot with the Support team along with a description of the issue.
-
Generating a HAR File
-
Navigate to the Problematic Page
-
Open the page where you are experiencing the error (e.g.,
app.screencastify.com
).
-
-
Open Developer Tools
-
Look for the vertical ellipsis button (three dots) in the top-right corner of Chrome.
-
Select More Tools > Developer Tools.
-
-
Set Up the Network Tab
-
In the Developer Tools panel, click the Network tab.
-
Ensure the Record button (red circle in the upper-left corner) is active. If it’s grey, click it to start recording.
-
Check the box labeled Preserve log.
-
-
Reproduce the Issue
-
Log in or perform the actions required to replicate the issue.
-
If the error occurs directly after opening the page, refresh the page.
-
-
Export the HAR File
-
Once the issue has been reproduced, click the Export HAR button (looks like a download icon) in the Network tab.
-
Save the file to your computer as "HAR with Content."
-
-
Share the HAR File
-
Attach the HAR file to your support ticket or email. Provide a detailed description of the issue you encountered.
-
Best Practices
-
Provide Context: When sharing a screenshot or HAR file, include a detailed description of the issue, steps to reproduce it, and any error messages encountered.
-
Check Privacy: Before sharing a HAR file, ensure it doesn’t contain sensitive information (e.g., passwords or personal data).
-
Use Clear Naming: Label files clearly (e.g., "error_screenshot.png" or "issue_report.har") to help the Support team identify them easily.
Frequently Asked Questions (Q&A)
Q: Why do I need to use the developer console?
A: The developer console provides technical details about the error, helping the Support team diagnose and fix the issue faster.
Q: What is a HAR file?
A: A HAR (HTTP Archive) file contains a record of network activity between your browser and the webpage, allowing for a deeper analysis of potential issues.
Q: How do I know if the error is captured?
A: Make sure to refresh the page or replicate the issue after starting the recording in the Network tab. The HAR file should contain the error details.
Q: Can I use this process on other browsers?
A: These instructions are specific to Chrome. For other browsers, the steps may vary slightly. Refer to the browser’s help documentation for more details.