前端工程師應該知道的 — 將組件截圖的小技巧

常常我們在開發對應組件的時候，需要在該 PR 中附上其 Demo 圖，不然 Review 你的人只是看到一堆 Code 跟 CSS ，會很不想幫你按 Approve 。

所幸，我們有一個強大的瀏覽器 — Chrome，它其實具有幾個隱藏的小功能，除了你平常可能常使用的 Console 、 Elements 、 Audit 以外，它其實可以像 VSCode 一樣，在鍵入「Command + Shift + P」之後摳出一些好用的功能。

這篇文章就來講講 — Chrome 一個方便到哭出來的截圖功能。

我們先來假設自己是 Google 的前端工程師，而我們在某個要求下在 YouTube 上加入了一個很潮的功能好了，有多潮呢：

大概是在某個覺得屌炸天的影片加上紅色的框框。

大概是這樣：

但，你這樣一截圖，整個瀏覽器都截下來了，還要把「我的最愛」藏起來…

以免 Review 的人看著你的 Demo 圖配咖啡笑一整個上午。

所以！

這時我們打開「開發者工具」，並且在 Elements 的地方選擇我們要截圖的部分。

並且按下我剛剛說的 「Command + Shift + P」。

這時會跳出一個可以輸入東西的地方：

請輸入 screenshot ，這時會看到很多選項

並且選擇 「Capture node screenshot」。

登登！他會把你剛剛選好的 Node 載下來，就是這麼簡單。

尾聲

最近覺得圖文並茂的教學文實在太讓人上癮了，圖片的資訊熵數實在是太高了，比起使用文字描述，有圖片的文章總是能加速讀者的閱讀效率。

以前介紹簡單的小功能時，總會覺得文章太短就放棄撰文，現在發覺圖文並茂的介紹，能夠為實用的小功能寫一篇完整文章，對作者來說也是一件很方便的事呢。