如何將開發工具控制台 scope 更改為本地 function？

Question

如何使用 Chrome 開發工具評估 function 的本地 scope 中的代碼？ 即為以下代碼

const name1 ="alireza"

function person(){
    const name2 ="joe" 
}

在控制台中手動執行代碼的結果應該是

console.log(name2) //"joe"

Answer 1

這有點棘手，因為您要檢查的語句是 function 中唯一的語句。

如果您要在以下行中添加另一條語句：

const name1 ="alireza"

function person(){
    const name2 ="joe" 
    const name3 ="bob";
}

然后你可以：

1. 打開調試器選項卡
2. 在const name2 ="joe"之后的行上創建一個斷點
3. 打開控制台選項卡
4. 輸入person()來運行這個person function
5. 等待命中斷點
6. 返回控制台選項卡
7. console.log(name2); （或者您可以只查看報告所有范圍內變量的“調試”選項卡中的調試信息）。

Answer 2

您正在尋找的是斷點：

您可以在要檢查的 function 內的一行上動態設置斷點：devTools 將在該行執行之前中斷，您可以在控制台中評估 function 的 scope 內的代碼。

或者 - 如果您可以更改代碼（您也可以從 devTools更改代碼） - 您可以在要中斷執行的地方放置debugger語句。