By Kevin Driedger


2008-09-15 20:07:21 8 Comments

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

13 comments

@Nestor Urquiza 2019-02-21 14:27:26

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

chrome://inspect

@stackinfostack 2018-01-26 11:35:39

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

@John Sheehan 2008-09-15 20:08:22

Windows: CTRL-SHIFT-J OR F12

Mac: --J

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

JavaScript Console Menu

@Martijn Laarman 2009-10-12 10:05:36

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

@Anurag 2010-05-19 01:08:10

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

@Mathew Byrne 2011-02-16 01:37:58

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

@Juan Mendes 2011-11-17 18:46:25

F12 is the simplest way

@Kamal Reddy 2013-06-05 08:43:43

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

@hernanvicente 2011-04-24 03:47:11

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

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

@user629309 2011-02-24 12:12:31

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

@Roberto Barros 2011-08-05 13:08:10

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

@Neo123 2015-01-28 23:01:25

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

Screenshot

@Venkat 2015-10-27 11:09:45

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

@anand 2013-04-16 13:19:42

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

@Shaz 2014-11-13 20:36:55

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

@Balachandar P 2012-04-05 07:28:36

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.

@astletron 2012-08-29 15:48:26

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

@Csaba Toth 2016-03-30 22:48:53

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

@Premanshu 2011-11-15 12:16:56

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:

Show Console

@Primc 2010-12-03 00:22:41

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.

@Senyai 2010-02-27 10:16:44

Ctrl + Shift + J opens Developer Tools.

@Omer van Kloeten 2008-09-15 20:08:09

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.

@Ahmed Fasih 2013-12-28 01:04:06

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

@Seanonymous 2014-03-07 22:53:34

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

@toon81 2014-07-08 09:21:20

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.

@Callum Rogers 2014-10-15 21:16:53

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).

@Josh M. 2015-02-01 01:05:53

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

@Omer van Kloeten 2015-02-11 08:44:47

@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.

@sc28 2017-06-07 19:38:04

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

Related Questions

Sponsored Content

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

38 Answered Questions

[SOLVED] How do you get a timestamp in JavaScript?

35 Answered Questions

[SOLVED] How do I loop through or enumerate a JavaScript object?

26 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

81 Answered Questions

[SOLVED] How to validate an email address in JavaScript?

35 Answered Questions

[SOLVED] How do I debug Node.js applications?

79 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5719380 View
  • 7116 Score
  • 79 Answer
  • Tags:   javascript arrays

37 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

Sponsored Content