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? at Webmasters.SE– BergiApr 15, 2013 at 1:00
-
developers.google.com/chrome-developer-tools/docs/…– Davut GürbüzSep 26, 2013 at 10:28
-
You might also find this useful: How-to-terminate-script-execution-when-debugging-in-Google-Chrome– cssyphusApr 1, 2015 at 13:58
15 Answers
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.
-
2It's hard to find what this command is called if you've forgotten it! Dec 28, 2013 at 1:04
-
4It's also tough to google for reasons why this doesn't always work. Are there limitations on this? Mar 7, 2014 at 22:53
-
3You 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.– toon81Jul 8, 2014 at 9:21
-
3@CallumRogers Only if your users use your site with the Developer Tools open, though.– Josh M.Feb 1, 2015 at 1: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. Feb 11, 2015 at 8:44
Windows: CTRL-SHIFT-J OR F12
Mac: ⌥-⌘-J
Also available through the wrench menu (Tools > JavaScript Console):
-
24
-
5or Cmd-Shift-J for Macs. God I love this
<kbd>
tag. Too bad I can't use it in comments.– AnuragMay 19, 2010 at 1:08 -
11The Mac shortcut seems to actually be
Alt-Cmd-J
on the latest Chrome build. Feb 16, 2011 at 1:37 -
looking at this question makes me understand how much my javascript skills improved from novice levels to quite decent standards Jun 5, 2013 at 8:43
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.
-
3On mac, the shorcut to toggle inspect element mode is shift ⌘ C (Shift - Command - C) Aug 5, 2011 at 13:08
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.
-
3F12 does not seem to open the debugger on my Windows 7 system with Chrome 23.0.1246.0 dev-m. Aug 29, 2012 at 15:48
-
+1 for F12, it also works for IE, FF, Edge. No need to learn Emacs like key combinations. Except for Mac. Mar 30, 2016 at 22:48
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.
Here, you can find the shortcuts to access the developer tools.
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:
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
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
For Mac users, go to Google Chrome --> menu View --> Developer --> JavaScript Console.
The most efficient way I have found to get to the javascript debugger is by running this:
chrome://inspect
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.
From the console in Chrome, you can do console.log(data_to_be_displayed)
.
-
3