How to view your web browsers developer tools and error console
Most modern browsers have a JavaScript error console built-in, usually within the developer tools functionality. This guide explains how to view it in the most common browsers.
It can be a useful tool in your armoury when fault-finding issues with pages not displaying how you expect or features of your website not working.
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts
PC - **Ctrl** + **Shift** + **K** - takes you directly to the Console tab of the developer tools.
Mac - **Cmd** + **Option** + **K** - takes you directly to the Console tab of the developer tools.
Pressing the **F12** key which displays the developer tools - then click the Console tab.
By selecting from the menu:
Click the three-line hamburger menu and select Web Developer
![](https://storage.crisp.chat/users/helpdesk/website/d6b4ebbf9a86b000/96f7fdb2-67cc-4779-9904-e6f7a4_6l1wyl.jpeg)
Then in the next menu click Web Console
![](https://storage.crisp.chat/users/helpdesk/website/b4e5084c30cb1800/0abebf42-6c65-4c57-8582-c6786e_ohbp9w.jpeg)
Click the Console tab to view the output. You can use the filter to search for a specific output, or the filter buttons to view just Errors, Warnings etc.
![](https://storage.crisp.chat/users/helpdesk/website/3a2bb82a899c6c00/954d362c-fb91-449a-961a-ea1aed_12favc0.jpeg)
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts
PC - **Ctrl** + **Shift** + **I** or pressing **F12** displays the developer tools - then click the Console tab.
Mac - **Cmd** + **Option** + **I** or pressing **F12** displays the developer tools - then click the Console tab.
By selecting from the menu:
![](https://storage.crisp.chat/users/helpdesk/website/82a9ef7678742800/06933994-391e-49d3-af0c-c6a3b2_6qayd5.jpeg)
Click the three-dot hamburger menu and select More Tools and then click Developer Tools on the next menu and then finally select the Console Tab.
![](https://storage.crisp.chat/users/helpdesk/website/d833d666eedda000/ab627596-bbe0-4a72-9e7b-74324b_1x5482r.jpeg)
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts - pressing **F12** displays the developer tools - then click the Console tab.
By selecting from the menu:
![](https://storage.crisp.chat/users/helpdesk/website/48e216673c05a800/5f39ace6-1ccb-42c5-8300-7c76c8_1j9r5xc.jpeg)
Click the three-dot menu and select More Tools and then click Developer Tools on the next menu and then finally select the Console Tab.
![](https://storage.crisp.chat/users/helpdesk/website/68541bf3d1d5d800/a261ad79-8b9b-47fa-8221-26219a_8cdfkt.jpeg)
Select Preferences from the Safari menu
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930802042/safari-console-1.png)
Select the Advanced tab, and then tick Show Develop menu in the menu bar.
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930859400/safari-console-2.png)
Then select Show Javascript console from the Develop menu
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930930208/safari-console-3.png)
*
*
It can be a useful tool in your armoury when fault-finding issues with pages not displaying how you expect or features of your website not working.
Firefox
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts
PC - **Ctrl** + **Shift** + **K** - takes you directly to the Console tab of the developer tools.
Mac - **Cmd** + **Option** + **K** - takes you directly to the Console tab of the developer tools.
Pressing the **F12** key which displays the developer tools - then click the Console tab.
By selecting from the menu:
Click the three-line hamburger menu and select Web Developer
![](https://storage.crisp.chat/users/helpdesk/website/d6b4ebbf9a86b000/96f7fdb2-67cc-4779-9904-e6f7a4_6l1wyl.jpeg)
Then in the next menu click Web Console
![](https://storage.crisp.chat/users/helpdesk/website/b4e5084c30cb1800/0abebf42-6c65-4c57-8582-c6786e_ohbp9w.jpeg)
Click the Console tab to view the output. You can use the filter to search for a specific output, or the filter buttons to view just Errors, Warnings etc.
![](https://storage.crisp.chat/users/helpdesk/website/3a2bb82a899c6c00/954d362c-fb91-449a-961a-ea1aed_12favc0.jpeg)
Chrome
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts
PC - **Ctrl** + **Shift** + **I** or pressing **F12** displays the developer tools - then click the Console tab.
Mac - **Cmd** + **Option** + **I** or pressing **F12** displays the developer tools - then click the Console tab.
By selecting from the menu:
![](https://storage.crisp.chat/users/helpdesk/website/82a9ef7678742800/06933994-391e-49d3-af0c-c6a3b2_6qayd5.jpeg)
Click the three-dot hamburger menu and select More Tools and then click Developer Tools on the next menu and then finally select the Console Tab.
![](https://storage.crisp.chat/users/helpdesk/website/d833d666eedda000/ab627596-bbe0-4a72-9e7b-74324b_1x5482r.jpeg)
Edge
The developer tools and console can be accessed in a number of ways:
Keyboard shortcuts - pressing **F12** displays the developer tools - then click the Console tab.
By selecting from the menu:
![](https://storage.crisp.chat/users/helpdesk/website/48e216673c05a800/5f39ace6-1ccb-42c5-8300-7c76c8_1j9r5xc.jpeg)
Click the three-dot menu and select More Tools and then click Developer Tools on the next menu and then finally select the Console Tab.
![](https://storage.crisp.chat/users/helpdesk/website/68541bf3d1d5d800/a261ad79-8b9b-47fa-8221-26219a_8cdfkt.jpeg)
Safari
Select Preferences from the Safari menu
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930802042/safari-console-1.png)
Select the Advanced tab, and then tick Show Develop menu in the menu bar.
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930859400/safari-console-2.png)
Then select Show Javascript console from the Develop menu
![](https://files.helpdocs.io/8nzbvyta9f/other/1569930930208/safari-console-3.png)
*
*
Updated on: 24/01/2024
Thank you!