昨天我們簡單的介紹了控制台面版的讀取-求值-輸出循環功能，今天我們要一起要來看它提供的一些方便的 API，以及如何透過這些 API 與元素面版一起使用。
因為我們今天的介紹的功能大部份跟元素面版有關，所以請直接打開面版，如果你的控制台抽屜沒有打開的話，可以用 ESC 鍵打開。
而我們使用的範例網站是 iT幫邦忙的首頁
這個指令讓你可以再一次執行上一次執行過的指令。假設剛剛執行過一個指令
8 + 4 // 12
使用 $_ 後，我們就會再一次得到 12 這個結果，如下圖：
圖 1: $_ 可以再執行一次上一次的指令**
這個指令讓你可以得到你曾經在元素面版中拜訪過的元素的 DOM，什麼意思呢？就是當你使用滑鼠或是鍵盤在元素面版的 DOM 樹中移動時，開發者工具會記住最接近你的五次操作的元素，而這些 DOM 元素可以透過 $0 - $4 來在控制台中存取，我們來看個例子
在 iT幫邦忙首頁的元素面版 DOM 樹中，我們可以先移動到 body 然後移到有一個 class 名稱叫做 header 的 div，最後再移動到一個 footer 元素。
這時候如果我們用 $0, $1, $3 控制台中，就會得到這幾個 DOM 元素及它下們的子孫元素。如果你用滑鼠移動到這元素上，開發者工具會顯示它在頁面的位置，如果你用滑鼠右鍵打開更多動作選單，並選擇 Reveal in Elements panel 它就會帶你回到元素面版裡 DOM 樹中這個被選擇元素的位置。
$0 // <div class="container index-top">...</div>
$1 // <div class="header">...</div>
$2 // <body data-gr-c-s-loaded="true">...</body>
圖 2: $0, $1 $2 顯示拜訪過的元素**
如果有用過 jQuery 的朋友，應該對種選擇方式不漠生，但這個 API 跟 jQuery 的 $() 是有點差異的。在這裡它背後其實是呼叫 document.querySelector() 這個 DOM API ，所以如果我們用 $('div') 來選擇頁面上的 div 元素，如果這個頁面上有多個 div 元素，它就只會回傳第一個。但因為iT幫邦忙的頁面有用到 jQuery ，所以 $ 這個符號已經被註冊過了，所以我們在開始使用前要重新把它指回去
$ = document.querySelector.bind(document)
在指定完後，我們就可以用 $ 來做元素的查找：
// 一般的元素
$('body')
// class
$('.main-header')
// ID
$('#main')
上面查詢的結果如下圖
圖 3: 使用 $(選取器)**
這個與我們剛剛介紹的 $() API 很像，只是它背後是呼叫 document.querySelectorAll() ，所以它是可以一次選取多個元素的。以剛剛的 $(div) 例子，改成 $$(div) 我們就會得到所有的 div 元素。我再一起來看一個例子：
var anchors = $$('a'); // 選取頁面上所有的 a 元素
anchors.forEach(a => console.log(a.href)); // 印出所有連結元素的連結
圖 4: 印出所有頁面上連結元素的 href**
有時候當你選取了某個元素後，你想要拷貝它就可以用這個指令，並且可以用快捷鍵 (Mac Cmd+V 或 Windows Ctrl+V) 來貼到像是文字編輯器等工具裡面。
// 假設 $0 是 body 元素，你就可以拷貝包含它所有子孫元素的 DOM 樹
copy($0)
清除所有在控制台中的資訊
clear()
在結束之前還要再提到一個功能，我偶爾會用到。這個功能叫做保存頁面 log 資訊 Preserve log 。它藏在控制台面版的設定裡，你可以透過面版右上角的
來打開它。打開下拉選單後，請選擇勾選 Preserve log 選項，之後當你在不同頁面做瀏覽時，它會幫你保存所有的 log 檔案。
圖 5: 使用 Preserve log 功能
我們今天介紹了幾個常見及常用的 API，而且這些 API 大部份是可以與元素面版做結合使用的。透過這些 API 你可以更快速的找到你想要操作的 DOM 元素，然後直接在控制台面版中編輯及改變它，要記得你得到的這些元素的操作會直接反應在頁面上。配合我們前幾天介紹的元素面版，你現在已經有完整的元素及樣式操作的工具，在不離開瀏覽器的情況下，你也可以操作及改變頁面上許多介面的畫面及結構。有覺得很強大嗎XD，好，不說廢話了。今天所介紹的這些控制台面版 API 是我自己本身比較常用的，如果你想要了解更多，你可以到官網的文件上去看。接下來我們要一起討論的是行動裝置工具欄，那就明天見啦 :)
iThome鐵人賽
看影片追技術