iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0

今天我們要一起來討論的 Chrome 開發者工具的控制台面版 (Console panel),這個面版我們在前面有很簡單的介紹過,其實它就像是一個讀取-求值-輸出循環 (Read-Eval-Print Loop, REPL),你可以在控制台裡面輸入 JavaScript 的指令,它就會執行並把內容印出來到控制台中。因為這一次的鐵人賽,我開始讀了一些官方的文件,發現控制台面版其實是很複雜的 (真的!相信我XD),但是我用過的功能只有一小部份,所以我會針對我比較有了解的部份做介紹,剩下的,如果有興趣的朋友,可以到官方文件去讀,我相信是可以挖到很多寶的。

使用控制台

控制台使用的方法有兩種,第一種是在打開開發者工具 (參考之前提到的快捷鍵) 後,直接切換到控制台面版。另一種方法則是在任何面版中打開成為一個抽屜 (Drawer),這種作法是我比較常使用的,並且我會搭配元素 (Elements panel) 跟原始碼(Sources panel) 面版一起使用。跟元素面版一起使用的方法我晚點會說明,與原始碼面版搭配則是要拿來除錯,這一部份我們就留到等介紹原始碼面版時再一併討論。

控制台面版擷圖
圖 1: 控制台面版

控制台抽屜擷圖  
圖 2: 在元素面版打開的控制台抽屜

讀取-求值-輸出循環

這裡簡單的介紹如何使用這個面版來做讀取-求值-輸出循環。在打開面版之後如果你的面版裡有其它的 Log,你可以用左上角的小圖示清除擷圖 (或是使用快捷鍵Ctrl+L)先把它先清除,清除後我們就可以開始來寫一點簡單的 JavaScript。

你可以用這個面版來做數值的運算,就像是在 JavaScript 裡一樣:在面版中輸入 5+5 再按下 enter 鍵你應該會得到 10 ,結果應該會出現在輸入的程式正下方。題外話一下,我常常用控制台來做我的小算盤XD

5+5在控制台輸出的結果擷圖
圖 3: 5+5 在控制台輸出的結果

你可以宣告變數,重新指定值 (assign):

// 宣告一個算數
var x = 10;

// 重新指定值
x = function() {
  console.log('Hello world from console!');
}

x(); // 會印出 Hello world from console!

當你執行上面這一段程式後,除了會得到 Hello world from console! 在控制台面版中,應該還會得到一個 undefined,這是因為當呼叫一個方法時,控制台面版也會把這個方法的傳回值 (return) 回傳回來。而因為我們定義的方法 x 並沒傳回任何值,所以回傳的預設值就是 undefined

Hello-world結果擷圖
圖 4: x() 執行後的結果

進行到這邊我想你會發現,其實我們可以用這個讀取-求值-輸出循環來做很多事。沒錯,常常我會用它來寫一些 JavaScript,來快速的知道某些程式是不是按照我所想的邏輯運作。

你也可以寫像是迴圈這種比較複雜的程式

// 印出 "Hello world from console!" 五次
for (var i = 0; i < 5; i++) {
  console.log('Hello world from console!')
}

如果印出的訊息是重覆的,控制台面版會幫你整理成一個集合。

for迴圈結果擷圖
圖 5: for 迴圈執行後的結果

當然你也可以使用原生的 JavaScript 方法,像是:

new Date().toLocaleString(); // 得到現在的時間 2017/12/6 上午6:32:23

new-Date結果擷圖
圖 6: new Date() 執行後的結果

或甚至直接存取現在頁面的 DOM 元素

document.body // 整個 DOM 樹會印出來在面版中,並且可以展開及檢視

document-body結果擷圖
圖 7: document.body 執行後的結果

我們明天會再介紹如果透過控制台面版提供的一些 API 來快速的選取 DOM 元素

小結

我們今天很簡單的介紹了控制台面版的讀取-求值-輸出循環功能,就像你所看到的,你可以在控制台面版裡執行大部份的 JavaScript 程式 (當然是前提 Chrome 要有支援,一些太新的 ES 規範就不保證有支援) 並且馬上就可以看到執行的結果。常常我會用這個面版來執行一些程式片段,比如說在 stackoverflow 上看到別人的解法,想要驗證一下程式執行的結果,如果不是太複雜的程式,我們就不用再打開文字編輯器或是像 codepenjsbin 的工具來執行。而是直接貼到控制台面版就可以啦。是不是很方便呢?明天我們會接著介紹一些這個面版所提供的 API 還有它如何跟元素面版一起結合使用。


上一篇
運算及其他的幾個控制台
下一篇
控制台面版 2 - 結合元素面版
系列文
認識 Chrome 開發者工具30

尚未有邦友留言

立即登入留言