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

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

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

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

按 F12 打開開發者工具，選到 Element 面版：

1.Element

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

2.Style

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

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

3.Computed

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

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