How to open the browser console to view errors
Problems with page editing, broken interface elements, misbehaving blocks, and interactive functionality may be due to JavaScript errors or conflicts. Checking the browser console for errors is the first step in troubleshooting these issues.
After opening the browser console, you can start looking for errors. Errors will be displayed differently in each browser, but generally will be color coded, labelled, or marked with an identifying icon. If you find an error, make sure to copy the error name, location, and line number.
Example errors:
The error is on the left, followed by the location, and then the line number.
Uncaught SyntaxError: Unexpected token var product-list:355
Uncaught ReferenceError: $ is not defined test-block:1967
Uncaught TypeError: Cannot call method 'setValue' of undefined list.js:249
Uncaught ReferenceError: jQuery is not defined dropdown.js:1
Uncaught SyntaxError: Unexpected token ( view.js:45
Chrome
keyboard shortcut:
- Ctrl + Shift + J (Windows/Linux)
- Command + Option + J (Mac)
menu location: Menu > More Tools > Developer Tools > Console tab
https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui?hl=en
Firefox
Browser Console
keyboard shortcut:
- Ctrl + Shift + J (Windows/Linux)
- Command + Shift + J (Mac)
menu location: Menu > Developer > Browser Console
https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
Web Console
keyboard shortcut:
- Ctrl + Shift + K (Windows/Linux)
- Command + Option + K (Mac)
menu location: Menu > Developer > Web Console
https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console
The Firefox browser console and web console can both be used to view errors. The difference is the web console offers a command line for entering JavaScript.
IE8, IE9, IE10, IE11, Edge
keyboard shortcut: F12
IE8
menu location: Tools > Developer Tools > Script tab > Console tab
https://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx
IE9, IE10, IE11
menu location: Menu cog icon > F12 Developer Tools > Console tab
https://msdn.microsoft.com/en-us/library/bg182326(v=vs.85).aspx
Edge
menu location: Menu "three dots" icon > F12 Developer Tools > Console tab
https://dev.windows.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
Opera
keyboard shortcut:
- Ctrl + Shift + J (Windows/Linux)
- Command + Option + J (Mac)
menu location:
The Opera developer tools must be enabled before use.
1. Menu > More tools > enable "Show developer menu"
2. Menu > Developer > Developer Tools
https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui?hl=en
Safari
keyboard shortcut: Command + Option + C
menu location:
The Safari developer tools must be enabled before use.
1. Safari > Preferences > Advanced > enable "Show Develop menu in menu bar"
2. Develop > Show Error Console
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW1