Introduction
現在的 front-end 真他媽不是人幹的，所需具備的 know-how 也越來越多，除了完成頁面基本呈現外，尚有其他需要要素需要注意。簡單整理一下個人覺得 web page 必須具備哪些基本要素：
- Semantic layout
- Accessibility
- Mobile friendly
- Search Engine Optimize
- Web Vitals ready
- light / dark mode support
- Responsive
雖然說透過平日的開發經驗養成，便能內化將上述的各個訴求訴諸於 web page 當中，但是如果有工具可以輔助的話，定能事半功倍，加快整體開發體驗～
坊間工具非常的多，去 Chrome Web Store 便可以輕輕鬆鬆找到一堆檢測工具，但檢測不同屬性就得在不同 extensions 間切換還是有點綁手綁腳，如果有工具可以統包這些檢測的話便是再便利不過了。而這樣的工具其實早就已經內建在你我的開發環境中了，是的！強大的 Chrome DevTools 便是你我隨手可得亦不可或缺的超強工具。
Chrome DevTools 不斷收集 web developers 需求來進行演變以及進化，嚴然是當今最強的 web page 檢視工具了。以下將針對自己常用的 panel 進行介紹，讓大家可以輕輕鬆鬆玩轉以上要素～
Layout > flexbox & grid
flexbox / grid 已嚴然成為 web developers 切版的起手式了，透過這些屬性的設置便可以輕輕鬆鬆完成各種佈局，即便是雜誌風格般的排版，也不是什麼太大的問題。然～兩者之間可以設定的屬性以及簡寫實在太多了，雖然可以即時查表，但總有些不暢快！如今，通通都可以藉由 DevTools > Elements panel 中即時查詢且更動各屬性了
如上圖所示，只要點擊相關的 trigger，便可以快速呈現當前 render 的框架出來，非常利於確認是否為 developers 所期待的樣式。
除此之外，如果透過 Styles pane 中進行細部數值調適時，也會有精美且便於理解的小助理呈現，讓 developers 可以快速的理解該數值所代表的意涵～
是不是淺顯易懂？輕輕鬆鬆玩轉 modern layout ～
Color assistant
為了呈現更豐富的色彩，W3C 也不斷審核更新相關標準，除了傳統的 hex、rgb、rgba 表示法外，也可以於 DevTools > Elements > Styles 中的色塊做 shift + click 操作，便可以快速切換其他顏色格式。
除此之外，如果直接點擊色塊，也可以開啟 color assistant，在這兒除了可以快速選取顏色外，上述的格式切換也可以在這裡完成。更可以透過滴管工具直接吸取 web page 中的元素，快速的取得 developers 所需要的顏色。
如果針對的是 text element 進行 inspect，則 color assistant 便會多出一個 Contrast ratio 資訊，方便 developers / designers 知曉當前的 文字 / 背景 顏色對比是否適宜？倘若當前組合不合宜，該 Assistant 亦會有建議用色供選擇。
對於 accessibility 來說是一項非常便利的工具。
Transition timing function
Web page 中透過一些過場動畫串場，總能讓整體的呈現更加活潑有趣，然而一些過場動畫呈現速率總不是那麼好拿捏，畢竟不同場合所需要的呈現不盡相同，且也不是每位 developers 都能熟記曲線陡緩所代表的涵意。這時候便可以透過 DevTools > Elements > Styles pane 中的 transition timing function assistant 來快速調適。
Developers 可以透過預覽理解當前設置的呈現效果。亦可透過下方切換找到適合自己的速率，決定後便會快速將之轉換成對應的 cubic-bezier()，便可以將之複製回 CSS 檔案裡頭了。
CSS Cascade Layers
這是一項非常新穎的支援，透過這項技術讓 CSS selector 權重多了 Layer 的概念，可以有效避免過於攏長不好維護的 selector 發生，讓 CSS 的管理可以更加系統化。
然而如果切得太細的話，可能不方便 developers 知曉當前是受到哪一層？哪一個 selector 影響？透過 DevTools > Elements > Styles 的加持，developers 便可以一窺當前的所有屬性，這些屬性依照 layer / selector 權重由上到下陳列，非常利於檢視當前套用的數值。除此之外，也可以透過點擊 Layer 旁邊的連結立即切換至 Layer Tree，方便知曉當前 Layer 權重分佈。
此外，也可以透過點擊 Layer 旁邊的連結立即切換至 Layer Tree，方便知曉當前 Layer 權重分佈。
Accessibility Tree
A11y 很容易成為 web developers 忽略的一環，今天我們服務的對象除了一般正常人外，更應該考慮到一些官能障礙的朋友如何來閱讀我們所呈現的 web page，讓他們可以透過 screen reader 清楚的解析當前頁面所表達的意涵～
由於是實驗性質的功能，所以需要前往 DevTools > Elements > Accessibility pane 中將之 enable，才會在 Elements 右上角出現一個人型 icon 的 trigger。
點擊上述的人型 icon 後，便可以 toggle elements / accessibility tree。
透過 Accessibility Tree，developers 便可以知曉除去 UI 後，當前的頁面結構是否利於閱讀，可以觀察且進行改進，讓 elements 可以清楚地闡述他所代表的意涵，是否可被 focus …etc。
描述得愈加詳細，不僅可利於人們閱讀，更讓 search engine 更好 parsing web page content，對 SEO 來說有著絕對加分的利多～
CSS Overview
這是一個仍處實驗性質的 Panel，可以參照這篇文章或者直接點擊 DevTools 右上方三個點點 > More tools 將其喚出。
點擊 Capture overview 按鈕後，便可以把當前頁面 CSS 的套用情況通通刮出來，方便 developers 做更進一步的調適。筆者非常喜愛這個功能，因為他可以非常快速的讓我們知道當下的使用狀態，比方說用了多少顏色於背景以及文字上，文字的字型以及大小甚至是與背景的對比搭配是否方便閱讀。更可以在點擊相關資訊後展開的 drawer 看到套用的 elements，讓 developers 知道要調整哪兒。
除了 developers 外，Project Managers 以及 Designers 更是應該透過這個 Panel 來觀察且驗證當前頁面的配色是否具備良好的 Accessibility ，而不是用「我覺得」、「這應該」這類的詞彙來當作搪塞的藉口。
更令筆者感到不可思議的是…它是真的會刮頁面的「 所有」 CSS 使用狀態，這個所有包含了 shadowDOM 世界裡頭的 style，真的是威力非常～
Rendering
這是一個功能非常強大的 panel，和 CSS Overview 一樣都可以在 More tools 中找到它並且喚出。凡舉和渲染相關的項目通通可以在這裡或是找到或是模擬不同的狀態。
如下圖所示，新世紀 Responsive 應該具備貼近使用者習慣的 prefers-* 系列也通通可以在這兒進行快速模擬﹙當然也可以去改 OS 設置﹚，此外，Emulate vision deficiencies 亦令筆者欽佩萬分，透過它，我們可以親身體會這些有視覺障礙的朋友閱讀當前 web page 是否感到舒適，唯有苦民所苦方能推出令人欽賴且信任的服務。
此外，也可意在這裡快速調適 prefers-color-scheme 來進行 light / dark mode 的切換，方便進行相關樣式的調適，讓 web page 可以在 light / dark mode 中均能正常呈現不同樣貌。
Recorder
這…也是個實驗性質的功能，簡單說的它就是內建在 Chrome DevTools 的 automation，可以針對 user flow 進行錄製、重播。更棒的是它還可以結合 performance tracing 方便針對 UI 操作、data fetching 以及頁面切換進行調試～
有興趣的朋友可以透過官方文件進行一覽，裡頭有非常詳盡的功能介紹與使用說明。定能在極短的時間內掌握這強大的工具。
Lighthouse
Lighthouse 是 DevTools 裡頭的一個 web page 檢測工具，針對 Performance、Progressive Web App、Best practices、Accessibility、SEO 等幾個 category 進行跑分衡量，並可以選擇檢測對象 mobile 或是 desktop。
由於它是集當前業界公認的衡量標準於一身，所以 follow 它的建議覺得是好上加好的極致表現，就連這兩年來吵得火熱的 Web Vitals 各項數值亦可在這裡進行衡量~
Performance
如果想要更細緻的調整 Web Vitals，那麼千萬不能錯過 Performance，透過這 panel 可以清楚地看到頁面生成的相關時間軸。如下圖所，我有 Web Vitals 勾起，便可以很清楚地看到 FCP / LCP 觸發的時間點，如果 CLS 狀態發生時，點擊 CLS 區塊後便可以看到是哪些 elements 產生了飄移，有了這些資訊後，developers 便可以快速地進行調適了～
以上便是我個人最常用到的一些 DevTools 功能，分享給大家，希望對大家有所助益。