How do you launch the JavaScript debugger in Google Chrome?

JavascriptGoogle ChromeDebuggingGoogle Chrome-Devtools

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

Windows: CTRL-SHIFT-J OR F12

Mac: ⌥-⌘-J

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

JavaScript Console Menu

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

Ctrl + Shift + J opens Developer Tools.

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

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

Solution 8 - Javascript

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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

Solution 11 - Javascript

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

Screenshot

Solution 12 - Javascript

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

chrome://inspect

Solution 13 - Javascript

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.

Solution 14 - Javascript

These are the tools you see

Press the F12

developer tools

Solution 15 - Javascript

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

Categories
Recommended Javascript Solutions
Recommended Google Chrome Solutions
Recommended Debugging Solutions
Recommended Google Chrome-Devtools Solutions

Previous Solution:

Is there a constraint that restricts my generic method to numeric types?

C#GenericsConstraints

Next Solution:

How to show loading spinner in jQuery?

JquerySpinnerPrototypejsEquivalenceLanguage Interoperability

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKevin DriedgerView Question on Stackoverflow
Solution 1 - JavascriptOmer van KloetenView Answer on Stackoverflow
Solution 2 - JavascriptJohn SheehanView Answer on Stackoverflow
Solution 3 - Javascriptuser629309View Answer on Stackoverflow
Solution 4 - JavascriptBalachandar PView Answer on Stackoverflow
Solution 5 - JavascriptSenyaiView Answer on Stackoverflow
Solution 6 - JavascriptPrimcView Answer on Stackoverflow
Solution 7 - JavascripthernanvicenteView Answer on Stackoverflow
Solution 8 - JavascriptPremanshuView Answer on Stackoverflow
Solution 9 - JavascriptVenkatView Answer on Stackoverflow
Solution 10 - JavascriptstackinfostackView Answer on Stackoverflow
Solution 11 - JavascriptNeo123View Answer on Stackoverflow
Solution 12 - JavascriptNestor UrquizaView Answer on Stackoverflow
Solution 13 - JavascriptOG SeanView Answer on Stackoverflow
Solution 14 - JavascriptJohan Stiven Hernandez OsorioView Answer on Stackoverflow
Solution 15 - JavascriptanandView Answer on Stackoverflow