Introduction
Chrome 的 DevTools 可以說強大非常，並且以約莫四週為週期，不斷地推陳出新來滿足 developers 森羅萬象、光怪陸離的需求。
「既然看不到車尾燈，那就不要看了吧！！」
自暴自棄的念頭便接踵而來，畢竟少了 DevTools 的輔助，我們還不是一樣有信心可以在時限內完成各種需求。
相信很多 developers 都跟筆者有過相同的念頭吧！如果有機會可以好好瞭解的話，任誰都很樂意學習以及暸解吧！而這珍貴的機會竟然降臨到我身上，是的，很開心拿到了 Chrome Dev Summit 2021 > workshop > DevTools design tooling 的門票。就讓專家引領我們一賭 Chrome DevTools 的風采～
這是唯一一場專門介紹 DevTools 的 workshop，加上講者沒有錄影﹙也就是說 YouTube > Google Chrome Developers 也看不到﹚。可以說有來聽的朋友就是賺到。
講師 Jecelyn 準備了 82 頁的 slide 要來好好的介紹 DevTools，超級豐富的訊息量，筆者在 workshop 結束後，多看兩輪 slides 後，才勉勉強強消化大部分的內容。大家如果有興趣的話，可以照著 slides 中的介紹走一遭，絕對可以習得很多有趣且實用的技巧。
以下將分享幾個從 workshop 中令我驚豔的功能給大家，揭露 DevTools 深藏不露的絕技。
Shortcuts
- cmd + shift + c: 快速開啟 DevTools 並且切換至 inspect element ，這時候只要滑鼠 hover 到 element 上，便會快速揭露 element 的細部訊息。
2. ←、 →: Element Panel 下，focus 至收摺的 nodeList 時，可以透過 ←、 → 來進行展開或是收合，如果搭配 option 更可以一次展開全部。
Avoid Panel auto resize
相信 developers 常常在 DevTools 開啟的狀態下調適 viewport size，這時候 panel 便有機會自己改變長相以符合當前視窗大小。雖是貼心，但老實說這對我來說真的蠻困擾，因為眼珠放的位置一下子就跳掉了，還要重新尋找剛剛看的地方在哪兒。
如果有跟我同樣困擾的朋友們，只要打開 Preferences 後，便可以在 Appearance 項目中找到 Panel layout，這時候便可以選擇它的調適態度了。
flexbox / grid editor
flexbox 以及 grid 已經是 modern layout 的必要成員了，兩者的應用時機不盡相同，端看 developers 的經驗與智慧。
兩者皆有非常多的屬性可以設置來渲染出各種不同的搭配與變化，DevTools 也順應時勢，開發了 preview 以及 editor 來方便 developers 做快速的調適。使用方法非常簡單，只要在 Elements panel 下點擊具備 flex / grid 屬性的 element 旁的 badge，便可以快速進行區塊預覽模式，方便觀察寬高以及區域的設置是否符合期待。
另外，也可以在 Elements > Styles 下點擊 display:flex 右邊的 trigger，便可以立即展開 editor 進行調試，可以說方便非常。
CSS Overview
這是一個仍處實驗性質的 Panel，可以參照這篇文章或者直接點擊 DevTools 右上方三個點點 > More tools 將其喚出。
點擊 Capture overview 按鈕後，便可以把當前頁面 CSS 的套用情況通通刮出來，方便 developers 做更進一步的調適。筆者非常喜愛這個功能，因為他可以非常快速的讓我們知道當下的使用狀態，比方說用了多少顏色於背景以及文字上，文字的字型以及大小甚至是與背景的對比搭配是否方便閱讀。更可以在點擊相關資訊後展開的 drawer 看到套用的 elements，讓 developers 知道要調整哪兒。
除了 developers 外，Project Managers 以及 Designers 更是應該透過這個 Panel 來觀察且驗證當前頁面的配色是否具備良好的 Accessibility ，而不是用「我覺得」、「這應該」這類的詞彙來當作搪塞的藉口。
更令筆者感到不可思議的是…它是真的會刮頁面的「 所有」 CSS 使用狀態，這個所有包含了 shadowDOM 世界裡頭的 style，真的是威力非常～
Rendering panel
這是一個功能非常強大的 panel，和 CSS Overview 一樣都可以在 More tools 中找到它並且喚出。凡舉和渲染相關的項目通通可以在這裡或是找到或是模擬不同的狀態。
如下圖所示，新世紀 Responsive 應該具備貼近使用者習慣的 prefers-* 系列也通通可以在這兒進行快速模擬﹙當然也可以去改 OS 設置﹚，此外，Emulate vision deficiencies 亦令筆者欽佩萬分，透過它，我們可以親身體會這些有視覺障礙的朋友閱讀當前 web page 是否感到舒適，唯有苦民所苦方能推出令人欽賴且信任的服務。
Command line panel
由於 Chrome DevTools 功能實在太多太多了，我相信絕對有完整百分百記得各功能位置的朋友，我就完全不行。這時候我們可以透過 Shortcut > cmd + shift + p 便可以喚出 Command line panel 出來，搭配依稀記得的關鍵字，即可快速開啟心中所想的訴求。
以上，便是上完 DevTools design tooling 這個 workshop 後最令我印象深刻的功能們，分享給大家，如果意猶未盡的話，當然筆者建議好好的把講者 jecelyn 的 slides 走一遭，定能收穫滿滿～ :)