瀏覽器 網頁開發 網頁設計

Google Chrome v.73版,透過「開發人工具」立即就可顯示,各元素的標籤與CSS樣式設定

2019/04/01

梅問題-Chrome v73.0版,透過「開發人工具」立即就可顯示區塊標籤與CSS樣式
  許多從事網頁設計的朋友,應該對於Google Chrome瀏覽器的「開發人工具」不感陌生,透過「開發人工具」並切換為選取工具,將滑鼠移到網頁中的區塊時,右邊立即就會顯示該區塊的CSS樣式與名稱,如此一來就可清楚的知道,該區塊的樣式設定如何,包含區塊大小、間距、內距與顏色時,甚至還可手動修改屬性,立即預覽結果畫面,真是一個相當實用的小工具。

  凡事先求有再求好,在Google Chrome最近更新的版本v73.0版後,讓「開發人工具」再進化,以前需要從右邊的區塊中,才能瀏覽該區塊的設定值,但現在新版的「開發人工具」,只需將滑鼠移到元素上方,立即就會該元素,是用什麼標籤,甚至還會顯示,該元素的顏色、大小、區間….等,讓我們在看到別人美美的網頁時,立即就可知道,該網頁的CSS設定為何啦!


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