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

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

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

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

你可以在你想檢視的頁面上選右鍵 -> 檢查元素來打開開發者工具(DevTools),如下圖:

DevTools

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

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

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

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

Huaying Tsai

Huaying Tsai

擅長 Python, Javascript, React, GraphQL。 想寫寫一些適合新手的程式語言教學文。 想推廣現代社會學習多元技能的風氣,建立了技能交換的平台 - https://thoth.tw
台灣