431

使用 Google Chrome 时,我想调试一些 JavaScript 代码。我怎样才能做到这一点?

4

15 回答 15

409

尝试将此添加到您的源:

debugger;

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

于 2008-09-15T20:08:09.547 回答
320

窗户:CTRL- SHIFT-J或 F12

苹果电脑:⌥</kbd>-⌘</kbd>-J

也可通过扳手菜单(工具 > JavaScript 控制台)获得:

JavaScript 控制台菜单

于 2008-09-15T20:08:22.120 回答
58

Windows 和 Linux:

Ctrl++ShiftI打开开发者工具

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

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

苹果电脑:

⌥</kbd> + ⌘</kbd> + I keys to open Developer Tools

⌥</kbd> + ⌘</kbd> + J to open Developer Tools and bring focus to the Console.

⌥</kbd> + ⌘</kbd> + C to toggle Inspect Element mode.

来源

其他快捷方式

于 2011-02-24T12:12:31.180 回答
15

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

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

于 2012-04-05T07:28:36.410 回答
11

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

于 2010-02-27T10:16:44.243 回答
6

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

于 2010-12-03T00:22:41.017 回答
6

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

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

于 2011-04-24T03:47:11.497 回答
2

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

显示控制台

于 2011-11-15T12:16:56.653 回答
2

要打开专用的“控制台”面板,请执行以下任一操作:

  • 使用键盘快捷键
    • 在 Windows 和 Linux 上:Ctrl++ShiftJ
    • 在 Mac 上:Cmd+ Option+J
  • 选择 Chrome 菜单图标,menu -> More Tools -> JavaScript Console。或者,如果 Chrome 开发者工具已经打开,press“控制台”标签。

请参考这里

于 2015-10-27T11:09:45.113 回答
1

对于 Mac 用户,请转到 Google Chrome --> menu View --> Developer --> JavaScript Console

截屏

于 2015-01-28T23:01:25.163 回答
1

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

为此,请按 F12 --> 源选项卡 --(右侧) --> 文件系统 - 请选择您的代码位置。然后 chrome 浏览器会询问你的权限,之后代码会变成绿色。并且您可以修改您的代码,它也会反映您的代码位置(这意味着它将永久更改)

谢谢

于 2018-01-26T11:35:39.403 回答
0

我发现访问 javascript 调试器的最有效方法是运行以下命令:

chrome://inspect

于 2019-02-21T14:27:26.780 回答
0

F12 打开开发者面板

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

CTRL + SHIFT + I 打开带有控制台选项卡的开发者面板

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

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

于 2019-09-20T21:23:46.480 回答
0

这些是你看到的工具

请按F12

开发者工具

于 2019-11-17T00:54:24.963 回答
-5

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

于 2013-04-16T13:19:42.773 回答