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?

See [How to open the JavaScript console in different browsers?](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) at Webmasters.SE — Bergi, Apr 15 '13 at 01:00
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging — Davut Gürbüz, Sep 26 '13 at 10:28
You might also find this useful: [How-to-terminate-script-execution-when-debugging-in-Google-Chrome](http://stackoverflow.com/questions/13134723/how-to-terminate-script-execution-when-debugging-in-google-chrome/29392465#29392465) — cssyphus, Apr 01 '15 at 13:58

score 423 · Answer 1 · edited Dec 20 '15 at 10:55

423

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.

edited Dec 20 '15 at 10:55

Peter Mortensen

30,738
21
105
131

answered Sep 15 '08 at 20:08

Omer van Kloeten

11,800
9
42
53

2

It's hard to find what this command is called if you've forgotten it! – Ahmed Fasih Dec 28 '13 at 01:04
4

It's also tough to google for reasons why this doesn't always work. Are there limitations on this? – Seanonymous Mar 07 '14 at 22:53
3

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. – toon81 Jul 08 '14 at 09:21
1

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). – Callum Rogers Oct 15 '14 at 21:16
3

@CallumRogers Only if your users use your site with the Developer Tools open, though. – Josh M. Feb 01 '15 at 01:05
4

@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. – Omer van Kloeten Feb 11 '15 at 08:44
1

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](https://stackoverflow.com/questions/16537738/chrome-developer-tools-view-console-and-sources-views-in-separate-views-vertica) – sc28 Jun 07 '17 at 19:38

score 320 · Accepted Answer · edited Sep 13 '17 at 16:55

320

Windows: CTRL-SHIFT-J OR F12

Mac: ⌥-⌘-J

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

JavaScript Console Menu

edited Sep 13 '17 at 16:55

mplungjan

169,008
28
173
236

answered Sep 15 '08 at 20:08

John Sheehan

77,456
30
160
194

24

I think the shortcut has since changed to CTRL-SHIFT-J. – Martijn Laarman Oct 12 '09 at 10:05
5

or Cmd-Shift-J for Macs. God I love this `` tag. Too bad I can't use it in comments. – Anurag May 19 '10 at 01:08
11

The Mac shortcut seems to actually be `Alt-Cmd-J` on the latest Chrome build. – Mathew Byrne Feb 16 '11 at 01:37
looking at this question makes me understand how much my javascript skills improved from novice levels to quite decent standards – Kamal Reddy Jun 05 '13 at 08:43

score 58 · Answer 3 · edited Sep 28 '16 at 07:07

58

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

edited Sep 28 '16 at 07:07

Pang

9,564
146
81
122

answered Feb 24 '11 at 12:12

user629309

681
5
2

3

On mac, the shorcut to toggle inspect element mode is shift ⌘ C (Shift - Command - C) – Roberto Barros Aug 05 '11 at 13:08

score 15 · Answer 4 · edited Dec 20 '15 at 11:10

15

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.

edited Dec 20 '15 at 11:10

Peter Mortensen

30,738
21
105
131

answered Apr 05 '12 at 07:28

Balachandar P

371
2
4

3

F12 does not seem to open the debugger on my Windows 7 system with Chrome 23.0.1246.0 dev-m. – astletron Aug 29 '12 at 15:48
+1 for F12, it also works for IE, FF, Edge. No need to learn Emacs like key combinations. Except for Mac. – Csaba Toth Mar 30 '16 at 22:48

score 11 · Answer 5 · edited Dec 20 '15 at 10:55

11

Ctrl + Shift + J opens Developer Tools.

edited Dec 20 '15 at 10:55

Peter Mortensen

30,738
21
105
131

answered Feb 27 '10 at 10:16

Senyai

1,395
1
17
26

score 6 · Answer 6 · edited Dec 20 '15 at 10:56

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.

edited Dec 20 '15 at 10:56

Peter Mortensen

30,738
21
105
131

answered Dec 03 '10 at 00:22

Primc

368
4
10

score 6 · Answer 7 · edited Sep 28 '16 at 07:08

6

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

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

edited Sep 28 '16 at 07:08

Pang

9,564
146
81
122

answered Apr 24 '11 at 03:47

hernanvicente

914
8
18

Venkat · Answer 8 · 2015-12-23T10:33:21.947

2

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

edited Dec 23 '15 at 10:33

answered Oct 27 '15 at 11:09

Venkat

2,549
2
28
61

score 2 · Answer 9 · answered Jan 26 '18 at 11:35

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

score 2 · Answer 10 · edited Dec 20 '15 at 11:08

2

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:

edited Dec 20 '15 at 11:08

Peter Mortensen

30,738
21
105
131

answered Nov 15 '11 at 12:16

Premanshu

616
3
14
24

score 1 · Answer 11 · edited Mar 25 '16 at 10:10

1

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

Screenshot

edited Mar 25 '16 at 10:10

Pang

9,564
146
81
122

answered Jan 28 '15 at 23:01

Neo123

29
4

score 0 · Answer 12 · edited Feb 21 '19 at 14:28

0

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

chrome://inspect

edited Feb 21 '19 at 14:28

Eric Aya

69,473
35
181
253

answered Feb 21 '19 at 14:27

Nestor Urquiza

2,821
28
21

score 0 · Answer 13 · answered Sep 20 '19 at 21:23

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.

score 0 · Answer 14 · answered Nov 17 '19 at 00:54

0

These are the tools you see

Press the F12

answered Nov 17 '19 at 00:54

Johan Stiven Hernandez Osorio

329
5
8

score -5 · Answer 15 · edited Dec 20 '15 at 11:10

-5

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

edited Dec 20 '15 at 11:10

Peter Mortensen

30,738
21
105
131

answered Apr 16 '13 at 13:19

anand

508
4
17

3

This will not open the console. This will only log to the console. – Shaz Nov 13 '14 at 20:36

How do you launch the JavaScript debugger in Google Chrome?

15 Answers15

Linked

Related