How to Collect Console and Network Logs

Overview

When troubleshooting issues in your store, our support team may ask you to provide console and network logs from your browser. These logs help us identify errors by showing what happens in the background when the issue occurs.

By following the steps below, you’ll be able to capture and share the necessary information with our team.

Pre-requisites

• Use a supported browser (Google Chrome, Firefox, or Microsoft Edge).
• Make sure you can reproduce the error on your store page.

Step-by-Step Instructions

• Step 1 - Open Developer Tools: On your keyboard, press F12 or, alternatively, you can right-click anywhere on the page and select Inspect.
  
• Step 2 - Go to the Network Tab: At the top of the developer tools panel, click on the Network tab.
  
• Step 3 - Preserve the Log: Check the box for Preserve log (or Persist logs) to ensure all activity is captured, even after refreshing the page.
  
• Step 4- Refresh the Page: Reload the page so the logs capture the entire process from the start.
• Step 5 - Reproduce the Error: Perform the same action that led to the error.
• Step 6 - Take Screenshots: Take a screenshot of both the Network tab and the Console tab, and share these screenshots with our support team.

Best Practices

• Try to reproduce the issue right after refreshing, so the logs are clean and easy to read.
• If possible, provide the exact steps you followed before the error occurred.

Troubleshooting / FAQ

Q: What if I don’t see the “Preserve log” option?
A: Make sure you’re in the Network tab—this is where the option is located.

Q: Can I use Safari?
A: Safari has a developer console, but it’s not as detailed as Chrome or Firefox. We recommend using Chrome for best results.