Chrome选项卡中的Console.log，位于源选项卡中

Question

我刚刚玩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，In我的文本编辑器我可以在if条件之前和之后添加console.log并查找，但使用google开发工具是否可以？我可以在Chrome开发工具的console.log标签中source吗？

我有兴趣知道我是否可以在源选项卡中添加console.log语句而不是运行我的代码，以查看日志。

谢谢。

亚历-Z。

Answer 1

是的，你可以在源标签中“拦截”javascript代码的执行。 您可以单击行号，当您刷新页面并且IF Developer工具打开时，它将在此时停止。参见示例附图。它将暂停在第24行，然后如果切换到控制台选项卡，则可以更改所需的任何变量。

总而言之，有时您甚至不需要使用console.log（）

1. 您可以使用断点
2. 你也可以把代码调试器; 放在那里，它就会停在那里。试一试。

DevTools对我们来说是一个非常有用的工具，尝试了解它的功能以最大限度地利用它。

Answer 2

您绝对应该检查一下-https://developers.google.com/web/updates/2019/01/devtools#logpoints

这有助于记录您所需要的内容，即使重新加载页面也可以保留。