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


keyboard shortcut:
- Ctrl + Shift + J (Windows/Linux)
- Command + Option + J (Mac)
menu location: Menu > More Tools > Developer Tools > Console tab


Browser Console

keyboard shortcut:
- Ctrl + Shift + J (Windows/Linux)
- Command + Shift + J (Mac)
menu location: Menu > Developer > Browser Console

Web Console

keyboard shortcut:
- Ctrl + Shift + K (Windows/Linux)
- Command + Option + K (Mac)
menu location: Menu > Developer > 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


menu location: Tools > Developer Tools > Script tab > Console tab

IE9, IE10, IE11

menu location: Menu cog icon > F12 Developer Tools > Console tab


menu location: Menu "three dots" icon > F12 Developer Tools > Console tab


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


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

Recent Tutorials
Permissions for editors in a multilingual site
Jun 2, 2021
By myq_1.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Getting Started with Doctrine in Concrete CMS
Jan 20, 2021
By linuxoid.

Doctrine is a very flexible, simple (once you get to know it better) and powerful PHP library for database interactions primarily focused on the ORM = Object Relational Mapping and DBAL = DataBase Abstraction Layer.

How To Upgrade PHP Using the MultiPHP Manager In cPanel
Nov 23, 2020

This article will explain how to upgrade your PHP version using cPanel.

How To Add Google Analytics To Your Website - The easy way
Oct 9, 2020

Adding analytics to your website is an important part of running your website. There’s no need to edit your theme or install a plugin to add a tracking code to concrete5 you can do it right from the cms.

How to Generate Sitemap xml File
Oct 9, 2020

Learn how to create a sitemap.xml in a couple clicks

How to add virtual pages in sitemap.xml
Jul 1, 2020
By hissy.

An example to add express entry detail pages in the sitemap.xml

Was this information useful?
Thank you for your feedback.