We often request console logs to understand the nature of a problem you are encountering on web, as just a screenshot or video rarely tells us the cause, and more so, hardly tells us anything but 'X is not working as expected".
And sometimes getting finding out on how to open the developer console might be difficult, this short guide will help your figure out how to do that.
Desktop:
Chrome
- Click the hamburger menu and follow this path: More Tools → Developer Tools, then switch to the “Console” tab.
- Press F12 (Windows/Linux)
- Press Option + ⌘ + J (MacOS)
Opera
- Press on the O Menu → Developer → Developer Tools (Windows/Linux)
- Select View → Show Developer Menu; Then on the menu bar follow the new path: Developer → Developer Tools (MacOS)
Firefox
- Open Menu → Browser Tools → Browser Console
- Press Ctrl + Shift + J (Windows/Linux)
- Press ⌘ + Shift + J (Mac)
Safari
- Safari Menu → Preferences → Advanced, then select “show Develop menu in menu bar”.
Microsoft Edge / Internet Explorer
- Press F12
Android:
Chrome
- Download latest version of chrome browser both on Android and you PC
- Enable USB debugging
a) On your Android device go to Settings, scroll down to the About Phone, tap on “Build number” ~7 times.
b) Go to Settings → System → Advanced
c) Go to Developer Options, toggle USB Debugging to ON - Connect the Android Device to you PC via USB
- Accept the authorization pop-up on your device.
- Open browser on your mobile
- Launch Chrome on PC, and head to chrome://inspect/#devices via your address bar.
- This page will log all tabs open on your device. Press “inspect” on the one you want to preview the console of.
iOS:
Chrome
- Open a new tab in your Chrome on your mobile enter about:inspect into the address bar.
- Press “Start Logging”
- Open new tab and go to address which you want to gather the console logs for, do all actions you want to be logged.
- Return to the Inspect tab from point 1.
Safari
- On your iOS device go to Settings → Safari → Advanced, toggle “Web Inspector” to ON
- Ensure the same is done for Safari on your Mac, to do so on your Mac go to Safari Menu → Preferences → Advanced, then select “show Develop menu in menu bar”.
- Connect the iOS device to your Mac
- On Mac, in the Develop menu for Safari, select the name of the iOS device.