How to take a screenshot of the Javascript Console

Sometimes as part of troubleshooting issues with the Urban Airship Dashboard, you may be asked to take a screenshot of the Javascript Console. This console is built into most web browsers and will log errors and warnings that occur when a webpage is loading. This article will walk you through how to open the console in various browsers and to use your Operating System’s built-in tools to take screenshots with the information needed for troubleshooting.
 
How to Open Javascript Console
 
 
 
Chrome
 
In Chrome the Javascript Console is part of the DevTools, a built-in suite of tools used to aid web developers. When open, it will appear as a new pane within your browser window.
 
To open the Javascript Console:
 
  • Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
  • If DevTools is already open, press the Console button.

Once open you should see something similar to this screenshot.
 
chrome_screenshot.png
 
More information on the console can be found in Google’s Official Documentation.

 
Firefox
 
In Firefox, the console is known as the Web Console, and is part of the Developer Tools
 
To open the Web Console:
 
  • Press Ctrl+Shift+K (Windows / Linux) or Cmd+Opt+K (Mac)
  • Or select "Web Console" from the Web Developer submenu in the Firefox Menu
 
Once open you should see something similar to this screenshot.
 
firefox_screenshot.png

 
Safari
 
In Safari, the console is known as the Web Inspector. Safari requires enabling of the Develop menu in order to access. Checkout Apple’s instructions on Enabling Web Inspector.
 
To open the Web Inspector once it is enabled:
 
  • Press Cmd+Opt+C (Mac)
 
Once open you should see something similar to this screenshot.
 
safari_screenshot.png
 
 
Internet Explorer/Edge
 
In both Internet Explorer and Edge browsers the Javascript console is part of the F12 Dev Tools.
 
Depending on your computer you may be able to open by hitting F12 on your keyboard. Certain laptops and other devices may have you open it through the menu:
 
1. Open the menu:

topbar.PNG
 
Once open you should see something similar to this screenshot.
 
microsoft_screenshot.png
 
 
 
 
How to take a screenshot
 
This section outlines how to take a screenshot using the built-in tools in various operating systems.
 
 
Operating Systems
 
 
Mac OS X
 
Mac’s give a few options to take screenshots. For troubleshooting purposes we would like you to take a screenshot which includes the entire browser window, including the Javascript console you have just opened. 
 
To take a picture of an entire window on a Mac follow these steps:
  1. Make sure the browser window is in full view and all the required information is showing.
  2. Press Shift-Command-4. The pointer should then change to a crosshair.
  3. Press the Spacebar. The pointer should then change to a camera.
  4. Move the camera pointer to the desired window, which should shade it in blue.

    mac_with_cursor.png
  5. Click your mouse or trackpad. To cancel, press the Esc (Escape) key before you click.
  6. Find the screenshot as a.png file on your desktop.

Skip to: Information to include

 

Windows
 
Windows computers will allow you to take screenshots using a keyboard shortcut or the Snipping Tool. This will copy the image to your clipboard. You will then have to paste the image into a graphics file to save. For troubleshooting purposes we would like you to take a screenshot which includes the entire browser window, including the Javascript console you have just opened. 
 
To take and save a screenshot using your keyboard in Windows follow these steps:
  1. Make sure the browser window is in full view and all the required information is showing.
  2. Click on the title bar of the window that you want to capture.
  3. Press “Alt + PrtScn”. A screenshot of your currently active window will be saved to the default location. You should see a pop-up in the bottom right corner of your screen, stating where the file has been saved.

 

Skip to: Information to include

 

Ubuntu (Linux)

For troubleshooting purposes we would like you to take a screenshot which includes the entire browser window, including the Javascript console you have just opened. 

If you are using the Ubuntu, follow these steps to take a screenshot:

  1. Go to the Dash and open the Screenshot tool.
  2. In the Take Screenshot window, select whether to grab the entire desktop, a single window, or an area of the screen. Set a delay if you need to select a window or otherwise set up your desktop for the screenshot. Then choose any effects you want.
  3. Click Take Screenshot. If you selected Select area to grab, the pointer changes into a crosshair. Click and drag the area you want for the screenshot.
  4. In the Save Screenshot window, enter a file name and choose a folder, then click Save.
 
Information to include
 
When we ask to take a screenshot we will want to make sure certain information is visible in order to help troubleshoot the issue:
  • The address of the webpage you are accessing, also known as the URL (Universal Resource Locator).
    This will be located in the top portion of the browser window:

    chrome_url.png

  • The website itself. We want to see what you are seeing:

    website_view.png


  • Any errors that are appear in the Javascript Console. (Errors will appear in red):

    javascript_errors.png


  • We will also like to know the time and date the issue is occurring, your current location, and your IP Address. If these are not included in the screenshot, please include them in your written response. You can use the website, WhatsMyIP, to find your IP Address:

    whatsmyip.png

 

Related Content