如何在Google Chrome中启动JavaScript调试程序？

Question

使用谷歌浏览器时，我想调试一些JavaScript代码。我怎么能这样做？

Answer 1

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

debugger;

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

Answer 2

Windows： CTRL - SHIFT - J 或F12

Mac：⌥ - ⌘ - J

也可通过扳手菜单（工具＆gt; JavaScript控制台）获取：

Answer 3

Windows和Linux：

Ctrl + Shift + I 键以打开开发人员工具

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

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

的Mac：

⌥ + ⌘ + I 用于打开开发人员工具的键

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

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

Source

Other shortcuts

Answer 4

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

选择顶部的JavaScript文件，并将断点放在JavaScript代码的调试器中。

Answer 5

Ctrl + Shift + J 打开开发人员工具。

Answer 6

在Mac上的Chrome 8.0.552中，您可以在菜单查看 / 开发人员 / JavaScript控制台 ...或者您可以使用 Alt + CMD + J 。

Answer 7

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

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

Answer 8

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

Answer 9

要打开专用的“控制台”面板，请执行以下操作：

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

请参阅here

Answer 10

对于Mac用户，请转到Google Chrome - ＆gt; menu 查看 - ＆gt; 开发人员 - ＆gt; JavaScript控制台。

Answer 11

现在谷歌Chrome已经推出了新功能。使用此功能您可以在chrome浏览中编辑代码。 （代码位置永久更改）

对于那个按F12 - ＆gt;来源标签 - （右侧） - ＆gt;文件系统 - 请选择您的代码位置。然后是chrome浏览器 会问你许可，之后代码会沉没绿色。并且您可以修改您的代码，它也会反映您的代码位置（这意味着它将永久更改）

由于

Answer 12

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

chrome://inspect

Answer 13

F12 打开开发者面板

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

CTRL + SHIFT + I 使用控制台标签打开开发者面板

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

ESC 如果右键单击并检查元素或类似元素，然后在“元素”选项卡中查看DOM，则可以按 ESC 上下切换控制台，这是一种不错的方法两者都使用。

Answer 14

这些是您看到的工具

按F12

Answer 15

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