凡事先求有再求好，在Google Chrome最近更新的版本v73.0版後，讓「開發人工具」再進化，以前需要從右邊的區塊中，才能瀏覽該區塊的設定值，但現在新版的「開發人工具」，只需將滑鼠移到元素上方，立即就會該元素，是用什麼標籤，甚至還會顯示，該元素的顏色、大小、區間….等，讓我們在看到別人美美的網頁時，立即就可知道，該網頁的CSS設定為何啦！
Step1
首先，開啟Chrome瀏覽器，進到關於Chrome頁面中，看一下目前的Chrome版本是否為最新版v73.0.36…版。
Step2
確定為最新版後，當要知道各元素的設定時，再到右上角的選項「更多工具 / 開發人員工具」。
Step3
再開啟了「開發人員」面板後，點選最左邊的「選取」圖示。
Step4
這時將滑鼠移到網頁上方的元素，在元素上方，立即就會顯示，該元素是用什麼標籤，顏色、字級大小，甚至還可顯示字型，說到字型以前還真是找半天，但現在終於顯示在上方了，還有對比至於什麼是對比，日後梅干再與大家來分享。
Step5
或是顯示區塊的間距與內距，雖然這些參數，可在開發人員工具面板的右邊查看，但現在直接顯示在元素上方，可更快的了解各元素的設定值，甚至是字型，這對於在設計網頁時，真是超方便的喔！
