103_SYS_How can open the Console log panel to take a screenshot?

In this article, we explain how to take a console page screenshot in different browsers

Chrome

On the page you are experiencing issue, click on the 3 dots on top right corner. Then click on More tools -> Developer tools.

NOTE: Alternatively, you can also press Ctrl+Shift+J or F12 (Windows) or Cmd+Opt+J (Mac) from keyboard.

Open

You will see something like this in red in the Console tab.

Open

NOTE: When taking the screenshot, include entire browser window with console, including the URL address.

Chrome: Troubleshooting with Developer Tools

How to access Developer Tools:

• Option 1:

  • On the page where you are experiencing an issue, click the three dots in the top-right corner of the Chrome window

  • Select "More tools" and then click "Developer tools"

• Option 2: Use the following keyboard shortcut:

  • Windows: Ctrl+Shift+J

  • Mac: Cmd+Opt+J

You will see something like this in red in the Console tab:

Important Note: When taking a screenshot to report an issue, make sure to capture the entire browser window, including the URL address bar and the Developer Tools console.

Edge: Troubleshooting with Developer Tools

• Option 1:

  • On the page where you are experiencing an issue, click on the 3 dots in the top right corner on the browser window.

  • Select “More tools” and then click “Developer Tools”

• Option 2: Use the following keyboard shortcut:

  • Windows: Ctrl+Shift+J

You will see something like this in red in the Console tab.

Important Note: When taking a screenshot to report an issue, make sure to capture the entire browser window, including the URL address bar and the Developer Tools console.

Firefox: Troubleshooting with Developer Tools

• Option 1:

  • On the page where you are experiencing an issue, click on the 3 lines in the top right corner on the browser window.

  • Select “More tools” and then click “Web Developer Tools”

• Option 2: Use the following keyboard shortcut:

  • Windows: Ctrl+Shift+J

  • Mac: Cmd+Opt+J

You will see something like this in red in the Console tab.

Important Note: When taking a screenshot to report an issue, make sure to capture the entire browser window, including the URL address bar and the Developer Tools console.

Safari: Troubleshooting with Developer Tools

1. You need to first enable the developer menu to access web inspector on Safari:

• Click on the Settings icon in top right corner on the browser window. Then click on Preferences.

• Click on the Advanced tab.

• At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox.

After enabling develop menu, click on the Settings icon in top right corner on the browser window. Click on “Show Tab Bar.”

You will see “Develop” in the Menu bar at the top.

2. On the page where you are experiencing an issue:

• Click on “Develop”

• Select “Show Error Console”

You will see something like this in red in the Console tab.

Important Note: When taking a screenshot to report an issue, make sure to capture the entire browser window, including the URL address bar and the Developer Tools console.