How to Access Browser Console for Troubleshooting

Why Access the Browser Console?

When experiencing technical issues with Spellcaster, our support team may ask you to check the browser console. The console displays error messages that help us diagnose and fix problems quickly. Don't worry - you don't need to understand what the messages mean, just follow these simple steps to capture them.

Accessing Console in Google Chrome

Step 1: Open Developer Tools

While viewing the Spellcaster page where you're experiencing issues, press F12 on your keyboard.

Alternative methods:

• Press Ctrl + Shift + J (Windows/Linux) or Command (⌘) + Option + J (Mac)
• Right-click on the page and select "Inspect" from the menu
• Click the three dots menu (⋮) → More tools → Developer tools

Step 2: Navigate to Console Tab

A panel will appear at the bottom or side of your browser window. Look for a tab labeled "Console" at the top of this panel and click it.

Step 3: Take a Screenshot

Look for any text in red or messages that say "error" - these are the most important. Take a screenshot using your operating system's screenshot tool.

Accessing Console in Mozilla Firefox

Step 1: Open Developer Tools

While viewing the Spellcaster page where you're experiencing issues, press F12 on your keyboard.

Alternative methods:

• Press Ctrl + Shift + K (Windows/Linux) or Command (⌘) + Option + K (Mac)
• Right-click on the page and select "Inspect Element" from the menu
• Click the hamburger menu (☰) → More tools → Web Developer Tools

Step 2: Navigate to Console Tab

A panel will appear at the bottom or side of your browser window. Look for a tab labeled "Console" at the top of this panel and click it.

Step 3: Take a Screenshot

Look for any text in red or messages that say "error" - these are the most important. Take a screenshot using your operating system's screenshot tool.

Accessing Console in Microsoft Edge

Step 1: Open Developer Tools

While viewing the Spellcaster page where you're experiencing issues, press F12 on your keyboard.

Alternative methods:

• Press Ctrl + Shift + J (Windows/Linux) or Command (⌘) + Option + J (Mac)
• Right-click on the page and select "Inspect" from the menu
• Click the three dots menu (⋯) → More tools → Developer tools

Step 2: Navigate to Console Tab

A panel will appear at the bottom or side of your browser window. Look for a tab labeled "Console" at the top of this panel and click it.

Step 3: Take a Screenshot

Look for any text in red or messages that say "error" - these are the most important. Take a screenshot using your operating system's screenshot tool.

What to Capture in Your Screenshot

When taking your screenshot, make sure to capture:

• Any text in red - these are error messages
• Messages that include the word "error" or "failed"
• Any warnings shown in yellow/orange (these can also be helpful)
• The timestamp (left side) to show when the error occurred

Tip: If there are many messages, try to capture the most recent ones or those that appear when you reproduce the problem.

What the Console Looks Like

The console will look like a panel with text messages. Error messages typically appear in red and may include technical information. Here's what you're looking for:

• Lines of text with red icons or red text
• Messages that start with "Error:", "Failed to load", or similar phrases
• Stack traces (blocks of technical text that follow error messages)

Don't worry if it looks confusing! You don't need to understand the messages - just capture them and send them to us to help diagnose any issues.

How to Close the Console

Once you've captured your screenshot, you can close the developer tools panel:

• Press F12 again to toggle the developer tools off
• Click the × button in the top-right corner of the developer tools panel
• Use the same keyboard shortcut you used to open it (Ctrl+Shift+J for Chrome/Edge, Ctrl+Shift+K for Firefox)

Sending Console Information to Support

After capturing your console screenshot, please email through with:

• A brief description of the problem you're experiencing
• What you were doing when the error occurred
• The device and browser you're using

This information helps us diagnose and resolve your issue as quickly as possible.

Contact us at: rupert@spellcaster.education

Last updated on 20/10/2025