How to View Web Console Output in Your Browser

If you are experiencing problems with our web app (https://app.photoephemeris.com), you may be asked to send console output that will help us diagnose the problem.

If you’ve ever encountered a problem on a website and needed to share detailed information with support, you might have been asked to provide console log output. This guide will help you access and copy the console log in major web browsers such as Chrome, Firefox, Safari and Edge, even if you’re not technically inclined.

What is the Browser Console?

The browser console is a tool that logs information about the webpage you’re viewing. It can display errors, warnings and other messages that can help diagnose issues. While it is primarily used by developers, anyone can access it to gather information when troubleshooting.

You will first need to open developer tools and view the console. The method varies a little by browser.

In Chrome and Firefox, the keyboard shortcuts for opening the developer console are Cmd + Alt + I on Mac and Ctrl + Shift + I on Windows.

In Safari, you can enable developer tools as described here. The simplest way to view the Console is often to right-click on the page, then choose Inspect Element from the menu, as shown:

After opening the developer tools, you should be able to find a tab called Console. If not visible, it usually appears by pressing the ESC key.

After loading the web app and reproducing the issue you’re experiencing, you can copy any output shown in the console and paste it into an email to send to us.

Viewing and Copying Console Logs in Different Browsers

Google Chrome

1. Open the Console:
   • Press Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (Mac).
   • Alternatively, click the three-dot menu in the top-right corner, go to More tools, and select Developer tools. Then, click on the Console tab.
2. Copy the Log:
   • Right-click anywhere in the console area and select Save as… to save the log as a file.
   • To copy specific lines, select the text, right-click, and choose Copy.

Mozilla Firefox

1. Open the Console:
   • Press Ctrl + Shift + K (Windows/Linux) or Cmd + Option + K (Mac).
   • Or, click the menu button (three horizontal lines), go to Web Developer, and select Web Console.
2. Copy the Log:
   • Right-click in the console area and choose Select All to highlight all entries.
   • Right-click again and select Copy to copy the selected text.

Apple Safari

1. Enable the Developer Menu:
   • Go to Safari > Settings (or Preferences on older versions).
   • Click the Advanced tab and check Show Develop menu in menu bar.
2. Open the Console:
   • Click on Develop in the menu bar and select Show JavaScript Console.
3. Copy the Log:
   • Click and drag to select the desired text, then right-click and choose Copy.

Microsoft Edge

1. Open the Console:
   • Press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac) to open Developer Tools, then click on the Console tab.
   • Alternatively, click the three-dot menu, go to More tools, and select Developer tools.
2. Copy the Log:
   • Right-click in the console area and select Save as… to download the log.
   • For specific entries, highlight the text, right-click, and choose Copy.

Practical Tips

• Clear the Console: Before capturing logs, clear existing entries by clicking the clear button (often represented by a bin icon) to ensure you only capture relevant information.
• Filter Logs: Use the filter options to show only errors or specific types of messages, making it easier to find what you need.

By following these steps, you can easily view and copy console logs in any major browser, helping you communicate more effectively with technical support teams.