How do you launch the JavaScript debugger in Google Chrome?

Question

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Microdont

See How to open the JavaScript console in different browsers? at Webmasters.SE – Va

developers.google.com/chrome-developer-tools/docs/… – Tahitian

You might also find this useful: How-to-terminate-script-execution-when-debugging-in-Google-Chrome – Phosphide

Answer 1

Windows: CTRL-SHIFT-J OR F12

Mac: ⌥-⌘-J

Also available through the wrench menu (Tools > JavaScript Console):

Pemberton

I think the shortcut has since changed to CTRL-SHIFT-J. – Lebron

or Cmd-Shift-J for Macs. God I love this <kbd> tag. Too bad I can't use it in comments. – Destroy

The Mac shortcut seems to actually be Alt-Cmd-J on the latest Chrome build. – Dismiss

looking at this question makes me understand how much my javascript skills improved from novice levels to quite decent standards – Hotfoot

Answer 2

Try adding this to your source:

debugger;

It works in most, if not all browsers. Just place it somewhere in your code, and it will act like a breakpoint.

Orientation

It's hard to find what this command is called if you've forgotten it! – Grating

It's also tough to google for reasons why this doesn't always work. Are there limitations on this? – Lambdoid

You need to have Chrome Developer Tools open for this to work (hit F12 on Windwos/Linux, don't know the key on a Mac, or just inspect an element). If you have Developer Tools open, an extra bit of awesomeness is that you can click and hold the Refresh button to clear the cache. – Forehead

It's also super awful if you accidentally leave this in a non widely tested codepath, only to have your users complain about the whole webpage pausing when clicking something. Not that this happened to me :p (we now have a lint to stop debugger statements being merged into develop). – Citizenry

@CallumRogers Only if your users use your site with the Developer Tools open, though. – Felafel

@JoshM. Please note that leaving this in Production code is very bad as it causes issues in certain versions of IE even for users who don't have dev tools open. – Orientation

Thanks, does anyone know how to enable the console directly under the debugger pane? Sometimes it appears, but other times not, and I must constantly switch between the "Console" tab and the "Sources" tab where the debugger is paused. EDIT: found out how, simply press Escape in Sources tab :) link – Grendel

Answer 3

Windows and Linux:

Ctrl + Shift + I keys to open Developer Tools

Ctrl + Shift + J to open Developer Tools and bring focus to the Console.

Ctrl + Shift + C to toggle Inspect Element mode.

Mac:

⌥ + ⌘ + I keys to open Developer Tools

⌥ + ⌘ + J to open Developer Tools and bring focus to the Console.

⌥ + ⌘ + C to toggle Inspect Element mode.

Source

Other shortcuts

Noisemaker

On mac, the shorcut to toggle inspect element mode is shift ⌘ C (Shift - Command - C) – Fernald

Answer 4

Press the F12 function key in the Chrome browser to launch the JavaScript debugger and then click "Scripts".

Choose the JavaScript file on top and place the breakpoint to the debugger for the JavaScript code.

Kanzu

F12 does not seem to open the debugger on my Windows 7 system with Chrome 23.0.1246.0 dev-m. – Enriquetaenriquez

+1 for F12, it also works for IE, FF, Edge. No need to learn Emacs like key combinations. Except for Mac. – Lantern

Answer 5

Ctrl + Shift + J opens Developer Tools.

Nuts

Answer 6

In Chrome 8.0.552 on a Mac, you can find this under menu View/Developer/JavaScript Console ... or you can use Alt+CMD+J.

Walling

Answer 7

Here, you can find the shortcuts to access the developer tools.

https://developer.chrome.com/devtools/docs/shortcuts

Adjective

Answer 8

Shift + Control + I opens the Developer tool window. From bottom-left second image (that looks like the following) will open/hide the console for you:

Huggins

Answer 9

To open the dedicated ‘Console’ panel, either:

• Use the keyboard shortcuts
  • On Windows and Linux: Ctrl + Shift + J
  • On Mac: Cmd + Option + J
• Select the Chrome Menu icon, menu -> More Tools -> JavaScript Console. Or if the Chrome Developer Tools are already open, press the ‘Console’ tab.

Please refer here

Genteel

Answer 10

Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)

For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)

Thanks

Vivianviviana

Answer 11

For Mac users, go to Google Chrome --> menu View --> Developer --> JavaScript Console.

Rugen

Answer 12

The most efficient way I have found to get to the javascript debugger is by running this:

chrome://inspect

Yonita

Answer 13

F12 opens the developer panel

CTRL + SHIFT + C Will open the hover-to-inspect tool where it highlights elements as you hover and you can click to show it in the elements tab.

CTRL + SHIFT + I Opens the developer panel with console tab

RIGHT-CLICK > Inspect Right click any element, and click "inspect" to select it in the Elements tab of the Developer panel.

ESC If you right-click and inspect element or similar and end up in the "Elements" tab looking at the DOM, you can press ESC to toggle the console up and down, which can be a nice way to use both.

Fabrizio

Answer 14

These are the tools you see

Press the F12

Renatarenate

Answer 15

From the console in Chrome, you can do console.log(data_to_be_displayed).

Airsick

This will not open the console. This will only log to the console. – Verbatim