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

[{'answer_id': 66431, 'author': 'Omer van Kloeten', 'author_id': 4979, 'author_profile': 'https://Stackoverflow.com/users/4979', 'pm_score': 9, 'selected': False, 'text': '<p>Try adding this to your source:</p>\n\n<pre><code>debugger;\n</code></pre>\n\n<p>It works in most, if not all browsers. Just place it somewhere in your code, and it will act like a breakpoint.</p>\n'}, {'answer_id': 66434, 'author': 'John Sheehan', 'author_id': 1786, 'author_profile': 'https://Stackoverflow.com/users/1786', 'pm_score': 9, 'selected': True, 'text': '<p>Windows: <kbd>CTRL</kbd>-<kbd>SHIFT</kbd>-<kbd>J</kbd> OR F12</p>\n\n<p>Mac: <kbd>⌥</kbd>-<kbd>⌘</kbd>-<kbd>J</kbd></p>\n\n<p>Also available through the wrench menu (Tools > JavaScript Console):</p>\n\n<p><img src="https://i.stack.imgur.com/Ktv4E.png" alt="JavaScript Console Menu"></p>\n'}, {'answer_id': 2346961, 'author': 'Senyai', 'author_id': 191224, 'author_profile': 'https://Stackoverflow.com/users/191224', 'pm_score': 4, 'selected': False, 'text': '<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd> opens Developer Tools.</p>\n'}, {'answer_id': 4341388, 'author': 'Primc', 'author_id': 379519, 'author_profile': 'https://Stackoverflow.com/users/379519', 'pm_score': 3, 'selected': False, 'text': '<p>In Chrome 8.0.552 on a Mac, you can find this under menu <em>View</em>/<em>Developer</em>/<em>JavaScript Console</em> ... or you can use <kbd>Alt</kbd>+<kbd>CMD</kbd>+<kbd>J</kbd>.</p>\n'}, {'answer_id': 5104475, 'author': 'user629309', 'author_id': 629309, 'author_profile': 'https://Stackoverflow.com/users/629309', 'pm_score': 6, 'selected': False, 'text': '<p>Windows and Linux:</p>\n\n<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> keys to open Developer Tools</p>\n\n<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd> to open Developer Tools and bring focus to the Console.</p>\n\n<p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd> to toggle Inspect Element mode.</p>\n\n<p>Mac:</p>\n\n<p><kbd>⌥</kbd> + <kbd>⌘</kbd> + <kbd>I</kbd> keys to open Developer Tools</p>\n\n<p><kbd>⌥</kbd> + <kbd>⌘</kbd> + <kbd>J</kbd> to open Developer Tools and bring focus to the Console.</p>\n\n<p><kbd>⌥</kbd> + <kbd>⌘</kbd> + <kbd>C</kbd> to toggle Inspect Element mode.</p>\n\n<p><a href="https://developer.chrome.com/devtools" rel="noreferrer">Source</a></p>\n\n<p><a href="https://developer.chrome.com/devtools/docs/shortcuts" rel="noreferrer">Other shortcuts</a></p>\n'}, {'answer_id': 5768512, 'author': 'hernanvicente', 'author_id': 642496, 'author_profile': 'https://Stackoverflow.com/users/642496', 'pm_score': 3, 'selected': False, 'text': '<p>Here, you can find the shortcuts to access the developer tools.</p>\n\n<p><a href="https://developer.chrome.com/devtools/docs/shortcuts" rel="nofollow">https://developer.chrome.com/devtools/docs/shortcuts</a></p>\n'}, {'answer_id': 8136194, 'author': 'Premanshu', 'author_id': 987695, 'author_profile': 'https://Stackoverflow.com/users/987695', 'pm_score': 2, 'selected': False, 'text': '<p><kbd>Shift</kbd> + <kbd>Control</kbd> + <kbd>I</kbd> opens the Developer tool window. From bottom-left second image (that looks like the following) will open/hide the console for you:</p>\n\n<p><a href="https://i.stack.imgur.com/ZQ4AG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQ4AG.png" alt="Show Console"></a></p>\n'}, {'answer_id': 10024311, 'author': 'Balachandar P', 'author_id': 1312652, 'author_profile': 'https://Stackoverflow.com/users/1312652', 'pm_score': 4, 'selected': False, 'text': '<p>Press the <kbd>F12</kbd> function key in the Chrome browser to launch the JavaScript debugger and then click "Scripts".</p>\n\n<p>Choose the JavaScript file on top and place the breakpoint to the debugger for the JavaScript code.</p>\n'}, {'answer_id': 16038207, 'author': 'anand', 'author_id': 635231, 'author_profile': 'https://Stackoverflow.com/users/635231', 'pm_score': -1, 'selected': False, 'text': '<p>From the console in Chrome, you can do <code>console.log(data_to_be_displayed)</code>.</p>\n'}, {'answer_id': 28204072, 'author': 'Neo123', 'author_id': 1852666, 'author_profile': 'https://Stackoverflow.com/users/1852666', 'pm_score': 1, 'selected': False, 'text': '<p>For Mac users, go to Google Chrome --> menu <em>View</em> --> <em>Developer</em> --> <em>JavaScript Console</em>.</p>\n\n<p><img src="https://i.stack.imgur.com/6pidj.png" alt="Screenshot"></p>\n'}, {'answer_id': 33366397, 'author': 'Venkat', 'author_id': 5395773, 'author_profile': 'https://Stackoverflow.com/users/5395773', 'pm_score': 2, 'selected': False, 'text': '<p>To open the dedicated ‘Console’ panel, either:</p>\n\n<ul>\n<li>Use the keyboard shortcuts\n\n<ul>\n<li>On Windows and Linux: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></li>\n<li>On Mac: <kbd>Cmd</kbd> + <kbd>Option</kbd> + <kbd>J</kbd></li>\n</ul></li>\n<li>Select the Chrome Menu icon, menu -> <em>More Tools</em> -> <em>JavaScript Console</em>. Or if the Chrome Developer Tools are already open, <code>press</code> the ‘Console’ tab.</li>\n</ul>\n\n<p>Please refer <a href="https://developer.chrome.com/devtools" rel="nofollow">here</a></p>\n'}, {'answer_id': 48460599, 'author': 'stackinfostack', 'author_id': 6088524, 'author_profile': 'https://Stackoverflow.com/users/6088524', 'pm_score': 2, 'selected': False, 'text': '<p>Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)</p>\n\n<p>For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser\nwill 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)  </p>\n\n<p>Thanks</p>\n'}, {'answer_id': 54809391, 'author': 'Nestor Urquiza', 'author_id': 399959, 'author_profile': 'https://Stackoverflow.com/users/399959', 'pm_score': 0, 'selected': False, 'text': '<p>The most efficient way I have found to get to the javascript debugger is by running this:</p>\n\n<p><code>chrome://inspect</code></p>\n'}, {'answer_id': 58035345, 'author': 'OG Sean', 'author_id': 220325, 'author_profile': 'https://Stackoverflow.com/users/220325', 'pm_score': 0, 'selected': False, 'text': '<p><strong>F12</strong> \nopens the developer panel</p>\n\n<p><strong>CTRL + SHIFT + C</strong> \nWill open the hover-to-inspect tool where it highlights elements as you hover and you can click to show it in the elements tab.</p>\n\n<p><strong>CTRL + SHIFT + I</strong>\nOpens the developer panel with console tab</p>\n\n<p><strong>RIGHT-CLICK > Inspect</strong>\nRight click any element, and click "inspect" to select it in the Elements tab of the Developer panel.</p>\n\n<p><strong>ESC</strong>\nIf you right-click and inspect element or similar and end up in the "Elements" tab looking at the DOM, you can press <strong>ESC</strong> to toggle the console up and down, which can be a nice way to use both.</p>\n'}, {'answer_id': 58896583, 'author': 'Johan Stiven Hernandez Osorio', 'author_id': 9401601, 'author_profile': 'https://Stackoverflow.com/users/9401601', 'pm_score': 0, 'selected': False, 'text': '<p>These are the tools you see</p>\n\n<p>Press the <code>F12</code> </p>\n\n<p><a href="https://i.stack.imgur.com/g4ZKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g4ZKf.png" alt="developer tools"></a></p>\n'}]
['https://Stackoverflow.com/questions/66420', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9587/']