iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

前端成長日記系列 第 19

瀏覽器樣式除錯

  • 分享至 

  • xImage
  •  

今天講瀏覽器樣式講除錯~~

在開發網頁的過程中,一定會遇到呈現出來的樣子、資料不是自己想要的樣子而需要進行除錯,而自己剛開始在學的時候,不外乎就是:1.修改程式 2.存檔 3.將網頁刷新

有時候就為了調幾 px 差距,不斷重複這個過程很多次,其實是很浪費時間的(也很無腦)。除了使用 hot-reload (程式檔案更新自動將網頁刷新的技術),更快的方式其實是直接在瀏覽器上修改,直到是自己要的樣子了,最後才去改動自己的code。

今天就特別來看開發者工具提供的除錯功能,我們簡單選一個 Google landing page 來示範。

https://ithelp.ithome.com.tw/upload/images/20181103/20109592ShYwsgRnJ0.jpg

按 F12 打開開發者工具,選到 Element 面版:

1.Element

這邊可以看到 HTML 檔案內容。要看什麼 code 對應到畫面所看到的區塊,點左上角箭頭圖示後(Ctrl+Shift+C),發現畫面變成這樣一塊一塊的,這就是元素區塊。不同顏色代表由內而外代表元素的本身、內距(padding)」、邊線(border)和外距(margin):

https://ithelp.ithome.com.tw/upload/images/20181103/20109592bBc0xP7Ism.jpghttps://ithelp.ithome.com.tw/upload/images/20181103/201095923OConfQWBK.jpg

2.Style

點選區塊後,面板左下角 Style 面板會秀出控制該區塊的樣式表,以及該 code 所在行數。例如點到 <div id="most-visited">...</div>區塊,例如最上方看到
margin: 10px 0;這時可以切換勾選狀態,而下方有margin: 0;被劃掉的樣式,代表被覆寫掉的內容。
https://ithelp.ithome.com.tw/upload/images/20181103/20109592CKwnfOwkXX.jpg

而我們也可以直接在最上方 element.style 區塊新增自己想要的 style 樣式,畫面也會馬上顯示出修改後的樣子。而瀏覽器也提供了 auto-complete 和屬性提示的功能,相當方便。這邊我就修改了<div id="most-visited">...</div> 的背景色。

https://ithelp.ithome.com.tw/upload/images/20181103/20109592GRwKVsLa5F.jpg

3.Computed

元素樣式有時候會被多方設定、互相覆蓋,導致我們想要查看最終的值顯得困難。這時可以到右下角的 Computed 面板,看到屬性最後的值。

簡單介紹到這邊,強烈建議上官網看詳盡的介紹。而除了樣式除錯,還有程式、網路連線除錯等等,對於開發上真的幫助很大/images/emoticon/emoticon42.gif


上一篇
前後端溝通~
下一篇
前端求職
系列文
前端成長日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
來杯拿鐵
iT邦新手 2 級 ‧ 2018-11-03 23:49:47

學到一招
終於不用刷新頁面的輪迴

aaa iT邦新手 5 級 ‧ 2018-11-04 00:29:09 檢舉

恭喜你~~

我要留言

立即登入留言