How to open the browser console to view errors

Feb 28, 2016

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

Recent Tutorials
Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

How to update Add-Ons if not on the Update Add-Ons Menu item
Jul 4, 2022

How to manually download an add-on and update it when your site's core versions isn't considered compatible with the add-on version.

Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Was this information useful?
Thank you for your feedback.