iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0

Imgur

當我正疑惑要不要寫篇時,想說這大家都應該都知道吧?但回想小白白如我,還真的不知道這玩意。以下分享是跟切版比較有關係,做個簡單介紹,細節的話可能夠出一個鐵人系列了,等我在積累個三年使用心得吧QAQ~
DevTools的功能強大,值得我們細細品嚐。

起手式

首先到任一瀏覽器頁面滑鼠按右鍵,你就有看到『檢查』或者『開發者工具』之類的,給他點下去,或使用快捷鍵。接下來就會發現來到網頁工程世界了!我目前常用是的Chrom,這裡就以此為例來做個簡單的分享。

Windows 和 Linux

開啟「開發人員工具」 | Ctrl + Shift + J 鍵或 F12

Mac

開啟「開發人員工具」 | ⌘ + Option + I 鍵 或者Command + SHIFT + C

  • 就會出現這個畫面:
    Imgur

檢查HTML 結構 DOM

  • 當選取到<html dir="ltr" lang="zh" class="focus-outline-visible" lazy-loaded="true">意有所指就是整個頁面啊。
    Imgur
  • 點選右鍵,就會有超多功能,可以直接做編輯!超酷!
    Imgur
  • 這裡的HTML跟你寫在VScode裡的會不太一樣喔~
  • 可以找到Shadow DOM 這通常會出現在輸入框,而在此面的找到class是更改框內部元素的重點。
    Imgur

選取元素的style

  • 左側條,可見style與權重與繼承狀態,被誰影響了?
  • 右側,區塊的盒模型狀態
    Imgur

偽類狀態

  • 點選第二排的『:hov』會出現,強制使用元素狀態,這裡勾選,你就可以見查到狀態了~
    Imgur

RWD檢視

  • 關於RWD另外文章會提及,可參考未來幾天的上架:)
    Imgur

顏色吸取

  • 剛開始都是截圖丟線上服務解析顏色,也有人有用繪圖工具來做吸取顏色,顏色之於前端實在重要,有時一條線就三種類似的顏色,透過吸取才知道(當然你有專業設計稿,設計師會提供給你),原來不同色!這還有更多功能,就等你探索啦!
    Imgur

閱讀更多

你所不知道的各種前端 Debug 技巧 系列
Google Developers


上一篇
Day15 CSS Display 屬性探勘摘要
下一篇
Day17 CSS命名,名字取好沒煩惱?
系列文
切版與CSS:打造工具箱與切版施工流程!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言