iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

你所不知道的各種前端 Debug 技巧系列 第 9

[Day 09] Console - Run JavaScript

Run JavaScript

今天的文章是 Console 系列的最後一篇,筆者會講解在 Console 中有關 JavaScript 執行的功能,還有一些在 Console 輸入 JavaScript 的小眉角,來提升輸入的效率。

換行、縮排

剛開始在 Console 內輸入多行程式碼的時候覺得非常不方便,要不是需要一直手動縮排,不然就是還沒打完不小心就執行噴錯了,不過在了解 Console 的換行和縮排原理後,輸入效率簡直提升一個檔次。

一般來說輸入 JavaScript 時按下 Enter 會直接執行,按下 Shift+Enter 才會換行,有時會覺得很蹩手,不過 Console 其實是很聰明的,請看範例:

重點

輸入 Statement 或是 { 後按下 Enter 會自動換行,不過有一個前提,就是游標必須在 Console 的最後一行,只要保持這個前提,在 Statement 還沒結束或是輸入 } 前,按下 Enter 都會持續換行。

了解這個原理後輸入 JavaScript 時就比較輕鬆了,不過如果是要編輯中間的部分,筆者通常把後半段先剪下,編輯完成後再貼上。

可以把 Statement 簡單理解成不會回傳值的程式碼,例如:

if (condition) {
  ...
}

for (let i = 0; i < 100; i++) {
  ...
}

function test() {
  ...
}

 

Rerun 和 Autocomplete

輸入程式碼的時候出現的下拉選單會包含目前 Context 中可用的變數以及曾經輸入過的文字(前方會有一個>),另外按方向鍵上下可以瀏覽之前輸入過的程式碼。

如果 Console 的 History 裡面很亂或是不想要在 Autocomplete 選單中顯示輸入過的程式碼可以到 Console 的 Settings 取消 Autocomplete from history,或是在 Console 內按下右鍵點選 Clear console history

另外在輸入 JavaScript 內建函式時按下 ( 會跳出簡單的參數提示,不用每次都要試誤或另外開 MDN 來看啦。

 

Default Async

有用過 async/await 語法的話一定知道 await 只能在 async Function 裡面使用,但...

各位觀眾,Console 內是可以直接使用 await 的!想當初筆者總會另外包一個 async IIFE 來使用 await 語法。

(async () => {
  console.log('zzz...');
  await sleep(1000);
  console.log('Wake up!!');
})();

 

Context

網頁中可能同時存在多個 Context,例如 iframe、Extension、ServiceWorker 等等,透過 Console 上方的 Context 選單可以看到所有的 Context,點擊後可以切換到該 Context 來執行 JavaScript,做到操作 iframe 內的元素、和 Extension 或 ServiceWorker 互動等等。

下圖中可以看到在 Top frame 中無法存取到 iframe 中定義的變數,也可以在這個 Demo 頁面中試試看 Console - Context

另外開啟選單時如果 Hover 到 iframe Context,頁面中對應的 iframe 也會亮起來哦。

 

Live Expression

注意到 Console 上方有一個眼睛圖示嗎?如果需要持續觀察某個變數的值如何變化,就可以按下圖示來新增一組 Live expression,那個值就會被釘選在最上面即時更新。

但要注意 Live expression 是會觸發副作用的,它的機制像有點像是 setInterval,以特定頻率執行輸入的 Expression 並更新執行結果,不像上一篇文章中提到的 Eager evaluation 遇到副作用時就不會運作。

以經典的 a == 1 && a == 2 當作例子:

const a = {
  i: 1,
  toString() {
    return this.i++;
  },
};

輸入 a == 1 的時候不會出現 Eager evaluation 的結果預覽,但 a === 1 就有了。

但如果把 a == 1 新增到 Live expression 中,就會看到 a.i 的值不斷增加。

 

結語

Console 系列就到此告一段落,接下來會繼續講 Sources 篇,也是 JavaScript Debugging 的重點功能哦。


上一篇
[Day 08] Console - Utilities Function
下一篇
[Day 10] Sources - Source Map & File Editing
系列文
你所不知道的各種前端 Debug 技巧30

尚未有邦友留言

立即登入留言