如何在 Google Chrome 中启动 JavaScript 调试器？答案

【问题标题】：How do you launch the JavaScript debugger in Google Chrome?如何在 Google Chrome 中启动 JavaScript 调试器？
【发布时间】：2010-09-09 03:32:30
【问题描述】：

在使用 Google Chrome 时，我想调试一些 JavaScript 代码。我该怎么做？

【问题讨论】：

在 Webmasters.SE 上查看 How to open the JavaScript console in different browsers?
developers.google.com/chrome-developer-tools/docs/…
您可能还会发现这很有用：How-to-terminate-script-execution-when-debugging-in-Google-Chrome

标签： javascript google-chrome debugging google-chrome-devtools

【解决方案1】：

尝试将此添加到您的来源：

debugger;

它适用于大多数（如果不是所有）浏览器。只需将它放在代码中的某个位置，它就会像断点一样发挥作用。

【讨论】：

如果你忘记了，很难找到这个命令叫什么！
谷歌也很难，因为这并不总是有效。这有限制吗？
您需要打开 Chrome 开发人员工具才能使其工作（在 Windwos/Linux 上按 F12，在 Mac 上不知道密钥，或者只是检查一个元素）。如果你打开了开发者工具，一个额外的惊喜是你可以点击并按住刷新按钮来清除缓存。
@CallumRogers 不过，仅当您的用户使用您的网站并打开开发者工具时。
@JoshM。请注意，将其留在生产代码中是非常糟糕的，因为它会导致某些版本的 IE 出现问题，即使对于没有打开开发工具的用户也是如此。

【解决方案2】：

Windows：CTRL-SHIFT-J 或 F12

Mac：⌥-⌘-J

也可以通过扳手菜单（工具 > JavaScript 控制台）访问：

【讨论】：

我认为快捷方式已更改为 CTRL-SHIFT-J。
或 Mac 的 Cmd-Shift-J。天哪，我喜欢这个<kbd> 标签。太糟糕了，我不能在 cmets 中使用它。
Mac 快捷方式在最新的 Chrome 版本中似乎实际上是 Alt-Cmd-J。
看这个问题让我明白我的 javascript 技能从新手水平提高到相当不错的水平

【解决方案3】：

Windows 和 Linux：

Ctrl + Shift + I 键打开开发者工具

Ctrl + Shift + J 打开开发者工具并将焦点移至控制台。

Ctrl + Shift + C 切换检查元素模式。

苹果机：

⌥ + ⌘ + I 键打开开发者工具

⌥ + ⌘ + J 打开开发者工具并将焦点转移到控制台。

⌥ + ⌘ + C 切换检查元素模式。

Source

Other shortcuts

【讨论】：

在 mac 上，切换检查元素模式的快捷方式是 shift ⌘ C (Shift - Command - C)

【解决方案4】：

在 Chrome 浏览器中按 F12 功能键启动 JavaScript 调试器，然后单击“脚本”。

选择顶部的 JavaScript 文件并将断点放置到 JavaScript 代码的调试器。

【讨论】：

F12 似乎无法在装有 Chrome 23.0.1246.0 dev-m 的 Windows 7 系统上打开调试器。
+1 适用于 F12，它也适用于 IE、FF、Edge。无需像组合键那样学习 Emacs。 Mac 除外。

【解决方案5】：

Ctrl + Shift + J 打开开发者工具。

【讨论】：

【解决方案6】：

在 Mac 上的 Chrome 8.0.552 中，您可以在菜单 View/Developer/JavaScript Console 下找到它...或者您可以使用Alt+CMD+J。

【讨论】：

【解决方案7】：

在这里，您可以找到访问开发者工具的快捷方式。

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

【讨论】：

【解决方案8】：

Shift + Control + I 打开开发工具窗口。从左下角的第二张图片（如下所示）将为您打开/隐藏控制台：

【讨论】：

【解决方案9】：

要打开专用的“控制台”面板，可以：

使用键盘快捷键
- 在 Windows 和 Linux 上：Ctrl + Shift + J
- 在 Mac 上：Cmd + 选项 + J
选择 Chrome 菜单图标，菜单 -> 更多工具 -> JavaScript 控制台。或者，如果 Chrome 开发者工具已经打开，press“控制台”标签。

请参考here

【讨论】：

【解决方案10】：

对于 Mac 用户，转到 Google Chrome --> 菜单查看 --> 开发人员 --> JavaScript 控制台。

【讨论】：

【解决方案11】：

现在谷歌浏览器引入了新功能。通过使用此功能，您可以在 chrome 浏览器中编辑您的代码。（代码位置永久更改）

为此，请按 F12 --> 源选项卡 --（右侧） --> 文件系统 - 请选择您的代码位置。然后是chrome浏览器将征求您的许可，之后代码将变为绿色。并且您可以修改您的代码，它也会反映您的代码位置（这意味着它将永久更改）

谢谢

【讨论】：

【解决方案12】：

我发现进入 javascript 调试器的最有效方法是运行以下命令：

chrome://inspect

【讨论】：

【解决方案13】：

F12 打开开发者面板

CTRL + SHIFT + C 将打开悬停检查工具，它会在您悬停时突出显示元素，您可以单击以在元素选项卡中显示它。

CTRL + SHIFT + I 使用控制台选项卡打开开发者面板

右键单击>检查 右键单击任何元素，然后单击“检查”以在开发人员面板的“元素”选项卡中选择它。

ESC 如果您右键单击并检查元素或类似元素并最终在“元素”选项卡中查看 DOM，则可以按 ESC 上下切换控制台，这可能是一个很好的方法两者都用。

【讨论】：

【解决方案14】：

这些是你看到的工具

按F12

【讨论】：

【解决方案15】：

在 Chrome 的控制台中，您可以执行console.log(data_to_be_displayed)。

【讨论】：

这不会打开控制台。这只会登录到控制台。