How to open the browser console to view errors

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
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
Customize locale icons
Oct 29, 2024
By myq.

How to customize locale (language region) flags

Concrete CMS Caching Guide
Oct 16, 2024

An overview of types of caching in Concrete and considerations when using them.

Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Improvements?

Let us know by posting here.