如何在谷歌Chrome中启动JavaScript调试器?

当使用谷歌Chrome时,我想调试一些JavaScript代码。我该怎么做呢?

711902 次浏览

试着把这个添加到你的源代码中:

debugger;

它可以在大多数浏览器中运行,如果不是所有浏览器的话。只要把它放在代码中的某个地方,它就像一个断点。

Windows: CTRL-转变-J OR F12

麦克: - -J

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

JavaScript控制台菜单

Ctrl + 转变 + J打开开发人员工具。

在Mac上的Chrome 8.0.552中,你可以在菜单视图/开发人员/JavaScript控制台…或者你可以使用Alt+CMD+J

Windows和Linux:

Ctrl + 转变 + 键用于打开开发人员工具

Ctrl + 转变 + J打开开发人员工具,并将焦点转移到控制台。

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

麦克:

+ + 键用于打开开发人员工具

+ + J打开开发人员工具,并将焦点转移到控制台。

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

Source .

其他快捷键 .

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

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

转变 + 控制 + ”将打开开发人员工具窗口。从左下角的第二张图片(看起来像下面这样)将打开/隐藏控制台:

Show Console

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

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

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

Mac用户进入谷歌Chrome——>菜单视图——> 开发人员——> JavaScript控制台

截图

打开专用的“控制台”面板:

  • 使用键盘快捷键
    • Windows和Linux: Ctrl + 转变 + J
    • Mac: Cmd + 选项 + J
    • 李< / ul > < / >
    • 选择Chrome菜单图标,菜单-> 更多的工具 -> JavaScript控制台。或者如果Chrome开发者工具已经打开,press“控制台”选项卡。

    请参考在这里

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

对于那个,按F12—>源标签—(右边)—>文件系统—在那里请选择代码的位置。然后是chrome浏览器 将请求您的许可,之后代码将下沉与绿色。你可以修改你的代码,它也会反映你的代码位置(这意味着它将永久改变)

谢谢

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

chrome://inspect

< >强F12 打开开发人员面板

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

CTRL + SHIFT + I 使用控制台选项卡

打开开发人员面板

右键单击>检查 右键单击任何元素,然后单击“inspect”在Developer面板的Elements选项卡中选择它

< >强ESC 如果你右键单击并检查element或类似的元素,最后在“Elements”选项卡中查看DOM,你可以按ESC来上下切换控制台,这是一种使用两者的好方法

这些就是你看到的工具

F12

developer tools