"What is Browser console, why do I need it, and how to open it?"
Motivation
Some tests require the Console to be opened. The web console is part of the developer tools your browser provides. It shows error handling information that was implemented by the developers of a website themselves, or information gathered by your browser if the problem is related to e.g. JavaScript. It will help the customer – specifically the developers – to identify what problem causes the bug.
How to open the console will be explained for different browsers and operating systems step by step in the following article.
Note that many of the steps to set up your system only have to be performed once and that every subsequent use will require less steps.
Getting browser console logs on Windows and macOS
Microsoft Edge, Chrome, Firefox, Opera, Brave
1. Open the website to be tested.
2. Press on your keyboard Ctrl + Shift + I (Windows) or alt + cmd + I (macOS).
3. Click on the Console tab (if the Console tab is not focused already).
Safari
Precondition:
1. Open Safari browser on your macOS computer.
2. Open Preferences... menu (press on your keyboard cmd + , or open Safari in menu bar --> Preferences...).
3. Navigate to the Advanced tab.
4. Check the Show Develop menu in menu bar checkbox. After this, you should be able to see Develop menu in the menu bar.
After you have activated Develop menu:
1. Open the website to be tested.
2. Press on your keyboard alt + cmd + C (macOS).
3. Click on the Console tab (if the Console tab is not focused already).
In all cases above, you should see the Console opened. If because for some reason Console does not get launched, there is a quick workaround, and everything you need to do is Right click on a website, and in the opened menu click on Inspect or Inspect element and focus tab on Console.
If you want to change the location of the developer tools overlay, click on the “three dots” button at the top right of the overlay. There you can select the Dock side.
Getting browser console logs on Android
Chrome
It is not possible to show the console on your mobile device itself, but it is possible to show it on a connected computer. To do so, the developer options and USB debugging on your Android device need to be enabled. If this is already done, you can skip to Part 2.
Part 1: Prepare your Android phone for USB Debugging
1. Open the Settings app.
2. Search for the Build number (Usually it is located under “Software information” in the “About phone” part).
3. Tap on the Build number repeatedly until you see a message You are now a developer!
4. Now that you have activated the Developer options, find them in Settings and open them.
5. If developer options are not activated yet, please activate them by tapping on the toggle button.
6. Find the USB debugging option and enable it by tapping on the toggle button.
Part 2: Connect Chrome on your computer with your Android device
1. On your Android phone, open the website which needs to be tested.
2. Open Google Chrome on your Windows or macOS computer.
3. In the URL field enter chrome://inspect and navigate to that page.
4. Make sure that the Discover USB devices checkbox is enabled.
5. Connect your Android phone to your computer via a USB cable.
6. If previously you did not use USB Debugging, on your Android phone you should see a prompt Allow USB debugging? tap on OK. Also, you can check Always allow from this computer, and tap on OK to make sure that you are not asked over and over again when you try to get browser logs.
7. Now you should be able to see your device under the Remote Target section. Also, you will see tabs opened in the browser on your phone. In order to start testing you will need to click on inspect button under the tab which you want to test, and a new window will be opened with your device screen and DevTools (make sure that the Console tab is focused in DevTools).
Troubleshooting: If the device is not detected, please try the following fixes:
1. Disconnect your phone from the USB cable and reconnect it again.
2. Try to change the USB ports on your computer.
3. Try another USB cable.
4. If the above fixes do not help, you can find troubleshooting advice in this Google developer forum post.
Getting browser console logs from the iOS device on macOS
Safari
For getting browser console logs from Safari on an iOS device, you will need and macOS computer. In order to get browser logs from Safari on your iOS device, you need to activate Develop menu in Safari on your macOS, and activate Web Inspector in Safari settings on your iOS device. If this is already done, you can skip to Part 2.
Part 1: Prepare your Safari browser on macOS and iOS devices for debugging
1. Open Safari browser on your macOS computer.
2. Open Preferences... menu (press on your keyboard cmd + , or open Safari in the menu bar --> Preferences...)
3. Navigate to the Advanced tab.
4. Check the Show Develop menu in menu bar checkbox. After this, you should be able to see Develop menu in the menu bar.
5. On your iOS device open Settings.
6. Find and open Safari app.
7. Scroll to the bottom and tap on the Advanced option.
8. Activate Web Inspector by tapping on the toggle button.
Part 2: Getting console logs
1. Open the Safari app on your iOS device and open the website which needs to be tested.
2. Connect your iOS device to your macOS via a USB cable.
2a. If Trust This Computer? prompt is shown on your device, tap on Trust and enter your device Passcode if needed.
3. Open Safari app on your macOS.
4. Click on Develop menu in the menu bar.
5. Hover the mouse on your iOS device name and click on the website name which needs to be tested.
6. You should be able now to see Web Inspector, and you can start testing (make sure that the Console tab is focused on Web Inspector).