在瀏覽器打開任何一個網頁，在 Windows 系統按下鍵盤中的 F12，如果是 macOS 系統則按下 fn + F12，或是按下滑鼠右鍵選擇「檢查」，就能打開 Chrome Developer Tool，也就是我們俗稱的 Dev Tool。

其實每個瀏覽器都有這樣子的工具，在這個範例中用 Chrome 來做說明。那這個工具有哪些功能呢？以下介紹幾個較常用的功能：

1. 元素(Elements)：顯示網頁中的 DOM 元素以及 Style css 屬性

   

   這在前端開發中是個蠻容易使用到的工具，它可以方便我們判別每個元素在畫面中的位置以及該元素的各種屬性

   

   如果想看到網頁中某個元素的 DOM 在哪裡，可以點選左上角的按鈕，將滑鼠拖曳到想查看的元素，就能夠看到該元素的相關屬性

   

2. 主控台(Console)：執行 javascript 程式碼、查看網頁狀態、log messeges

   

   在畫面載入時若有錯誤訊息可以在這裡查看

   

   最底下的欄位可以執行 javascript 程式碼，在網頁開發中如果在 js 檔有寫到 console.log 也可以在這裡查看輸出結果(我一般是拿來 debug 用)

   

   另外，在左上角可以看到這樣的按鈕，可以將 console 先前的紀錄清除

3. 網路(Network)：查看網頁所接收到的所有 Request 和 Response 封包

   

   可以看到左下角有顯示幾項要求，代表發出了多少 Request

   

   接著，點選其中一個 Request，就能看到該請求的相關資訊

   其實網頁上所顯示的不管是圖片、文字，都是由一個個封包所組成的，在我們打開網頁時，就已經在向伺服器發出 Request。伺服器回傳了許多的 Response，組合出了我們所看到的畫面。