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 ，在我的文本編輯器中我可以添加一個console.log在 if 條件之前和之后console.log並找出，但是使用谷歌開發工具是否可能相同？ 我可以在 Chrome 開發工具的source選項卡內使用console.log嗎？

我有興趣知道是否可以在源選項卡中添加 console.log 語句，然后運行我的代碼，以查看日志。

謝謝你。

亞歷克斯-z。

Answer 1

是的，您可以在源選項卡中“攔截”javascript 代碼的執行。 您可以單擊行號，當您刷新頁面且 IF Developer tool 已打開時，它將在該點停止。 請參閱示例附加圖像。 它將在第 24 行暫停，然后如果您切換到控制台選項卡，則可以更改您想要的任何變量。

所以總而言之，有時你甚至不需要使用 console.log()

1. 你可以利用斷點
2. 你也可以只放代碼調試器； 它會停在那里。 試試這個。

DevTools 對我們來說是一個非常有用的工具，嘗試了解它的功能以最大限度地利用它。

Answer 2

您絕對應該檢查一下 - https://developers.google.com/web/updates/2019/01/devtools#logpoints

這有助於記錄您需要的內容，即使頁面重新加載，它也會保留。

Answer 3

當您在 Google Chrome 中運行console.log()時，它會顯示在控制台選項卡中的開發人員工具中。