Web Development 網站開發 (4) - 如何使用者開發者工具檢視頁面 + CSS 範例

這篇文章會用 Open Sandbox 做出一個有 CSS 樣式的網站範例。裡面會使用到 Flexbox 佈局並且用前幾篇文章提到的 CSS 語法。除此之外會介紹瀏覽器上的使用者開發工具，善用開發工具能幫助你加速開發你的網站！

以上善用一些 css 的基本樣式以及佈局功能就能做出一個有模有樣的頁面了！可以點 上面的 Open Sandbox 按鈕去 Code Sandbox 查看以及操作原始碼。

如之前文章所說，網頁屬於前端的一部分，意味著程式是在用戶的電腦（瀏覽器裡）被執行的，我們因此可以用瀏覽器去檢查這些網頁元素、原始碼等。

你可以在你想檢視的頁面上選右鍵 -> 檢查元素來打開開發者工具（DevTools），如下圖：

如果你在 DevTools 裡選擇某個元素標籤譬如div，瀏覽器會在頁面上 highlight 你選擇的元素（橘色部分代表的是 margin），並且還會顯示它的 Styles 細節。

最厲害的是你可以修改元素以及 Styles 來看到即時的結果！

開發者工具就如他的名字，對於開發者非常重要。裡面還有非常多強大的功能，像是執行 Javascript 、Debug、檢查呼叫過的 API 細節、檢查 Cookies 以及 LocalStorage 等等。

現在就試著用開發者工具來看看範例網站的細節吧！ https://j2brc.csb.app/