How do I open the JavaScript console in different browsers?
Solution 1
Chrome
Opening the “Console” panel of Chrome’s DevTools:
Windows and Linux: Ctrl + Shift + J
Mac OS: Cmd + Opt + J
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Firefox
Opening the “Console” panel in Firefox’s Developer Tools:
Windows: Ctrl + Shift + K
Mac OS: Cmd + Opt + K
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Internet Explorer
Opening the “Console” panel in Internet Explorer’s F12 Developer Tools:
- F12, then click on the “Console” tab
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Ctrl + ` while any of the other panels is active.
Safari
Note: In order to view the console in Safari, you have to enable the “Show Develop menu in menu bar” setting in the “Advanced” pane of Safari’s preferences (screenshot).
Opening the “Console” panel in Safari’s Web Inspector:
- Cmd + Opt + C
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Opera
- Windows and Linux: Ctrl + Shift + I
- Mac : ⌘+⌥+I
Solution 2
To indirectly reach the Console in Opera (checked on v9.6) the shortcut is Ctrl+Shift+i while on Safari 5 (on Windows) it is Ctrl+Alt+i
I wish all the browser makers could get together to standardize the keyboard shortcuts.
Update: It appears that the REPL tab under the Scripts tab in Opera Dragonfly in Opera 11 is similar to the Console option that was available in previous Opera versions.
I did not found much documentation on REPL after a cursory search, except for this article which has an indirect reference.
I tried this command in REPL with the Google home page open & it executed fine i.e. it hid the Google logo - document.getElementById('logo').style.visibility = 'hidden';
Related videos on Youtube
Forrest
I write dailies for the "Open Web Platform Daily Digest" at webplatformdaily.org. E-mail: [email protected] Twitter: http://twitter.com/simevidas
Updated on September 17, 2022Comments
-
Forrest over 1 year
Web browsers provide a JavaScript console as part of their developer tools. This console is useful for the following reasons:
- Errors and warnings that occur on a web page are logged into the console.
- JavaScript commands for interacting with a web page can be executed in the console.
What are the keyboard shortcuts for opening the console in different browsers?
-
MalcolmOcean over 7 yearsI went and made a tinyurl that links here, so if you need to instruct an audience of varied browser folks to open their javascript console... tinyurl.com/jscons
-
AjayGohil over 3 yearsRefer this url ,this url have screenshot :so you will easily get this :balsamiq.com/support/faqs/browserconsole/….
-
Forrest about 13 yearsCTRL + SHIFT + I will open the dev tools in Opera. But where is the JavaScript console? Where can I input JavaScript code and execute it?
-
Forrest about 13 yearsCTRL + ALT + I does nothing in my Safari 5 on Windows 7. Can you confirm that it works?
-
mvark about 13 yearsThat could be because you do not have the Develop menu option enabled. To activate this option, go to Edit > Preferences & in the Advanced tab enable the "Show Develop menu in menu bar" checkbox option.
-
Forrest about 13 yearsYes, that is it. I overlooked that REPL tab at the bottom LOL
-
Aaron about 7 yearsIn Firefox, it can opened in a separate window (and be global - not just for the current tab) by menu Tools → Web Developer → Browser Console.
-
Álvaro González almost 7 yearsF12 works in many browsers.
-
Nagev almost 3 yearsThe Opera documentation link is no longer valid, the shortcut is correct though.