logo标签列表

Chrome开发工具中的控制台日志，在源代码选项卡中。

javascriptgoogle-chromegoogle-chrome-devtools
3

我刚刚在玩jBox.js，正在检查以下代码：

if (this.options.position[p] == 'center') {
        this.pos[a] += Math.ceil((this.targetDimensions[p] - this.dimensions[p]) / 2);
        return;
}

在执行上面这段代码之前，this.pos[a]的值为18，在执行代码之后，this.pos[a]的值变为25。在我的文本编辑器中，我可以在if条件语句前后添加console.log来查找，但是是否可以使用Google开发工具实现相同的功能呢？我能否在Chrome开发工具的source选项卡中添加console.log？

我想知道是否可以在源代码选项卡中添加console.log语句，然后运行我的代码，以查看日志。

谢谢。

Alex-z。

1
你知道关于观察表达式的功能吗？你可以将this.pos[a]添加到你的观察列表中，并在你想要读取的第一行设置断点。console.log很方便，但在我看来不适合大量使用。https://developer.chrome.com/devtools/docs/javascript-debugging - Victory
3个回答
4
3

是的，你可以在“源”选项卡中“拦截”JavaScript代码的执行。

你可以点击行号，在刷新页面并且开发者工具打开的情况下，它会停在那个点上。请参见附带的示例图片，它将在第24行暂停，然后如果你切换到控制台选项卡，你可以随意更改任何变量。

enter image description here

总之，有时候你甚至不需要使用console.log()

  1. 您可以使用断点
  2. 您也可以只需放置代码debugger;，它就会停在那里。试试这个。

DevTools对我们来说是一个非常有用的工具，尝试学习其功能以最大化其使用。

我该如何在源代码中，在某一行之前和之后使用 console.log 来进行物理调试？ - Alexander Solonik
1
当你在Google Chrome中运行console.log()时，它会在开发者工具的控制台选项卡中显示。
1
一旦我刷新，控制台日志(console.log)就会从源代码中消失！ - Alexander Solonik
@AlexanderSolonik 你找到了解决方法吗？ - vikrant
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接