Google Chrome開發者工具教學 - Elements

前言

今天要來介紹Elements啦! 打開開發者工具選到Elements的頁籤就會看到這個畫面。

一樣又是一堆又臭又長的東西，不怕不怕讓我們繼續看下去!

主要功用

Elements主要是用來了解整個網頁畫面的架構和CSS屬性。開發者工具視窗左邊就是所謂的網頁結構，也就是DOM元素，右邊是這個畫面上所使用的Style，也就是CSS屬性們。

為什麼要了解網頁架構?

如果比照人類的話，網頁架構就像是我們的骨骼，是支撐整個網頁成形的主要關鍵。有了骨骼，才會繼續做外表的美觀就是CSS style，再來才會進到JavaScript去做和網頁的互動，類似人會有肢體動作。

但我自己在使用上，只會拿Elements做CSS的調整測試，不太會運用在DOM上面。如果要針對DOM做處理，我自己碰到的狀況居多都是要處理JavaScript，所以我會選擇用Console~所以這邊在Elements就不針對DOM的部分做說明了!

Elements用法介紹

1. 可以直接對HTML骨架按兩下，就可以進行畫面上文字的修改，像是右圖的按鍵就被我改成「壞手氣」了xD；在下方也有style部分可以直接針對css去做調整，搜尋框下方兩顆按鈕的顏色也被我調整了。如果是在切版的時候，用這個方法可以很快速驗證自己調整的CSS是否符合預期，這樣就不用一直重新啟動專案了~
   

2. 看到右上角在Elements tab左邊的左邊有的正方形按鈕，這個按鈕按下去的時候，滑鼠滑過畫面的任何地方，都會出現這個物件在HTML上是用什麼標籤，再對該物件按一下，就會直接把這個物件在HTML骨架的位置展示出來。如果在骨架落落長又需要針對該物件去做style調整或是JavaScript調整，這是個可以幫助你快速找到該物件位置的方法! 非常方便阿

結論

開發者工具真的是工程師的好朋友阿，一定要好好的跟他相處、摸索。雖然我自己也還在學著看開發者工具吐出來的訊息；下面的參考文章有講到更多的使用方法，但我還沒有實際用過所以就不多介紹了，畢竟沒用過的東西還是怕會傳達錯誤~下周見掰掰

Reference

開發必備，摸索不完的 Chrome DevTools 小技巧之 Element 篇