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

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

realdennis
Nov 1 · 3 min read

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

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

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

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

大概是這樣:

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

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

所以!

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

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

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

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

並且選擇 「Capture node screenshot」。

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


尾聲

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

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

realdennis

Written by

If any interest, feel free to contact me here http://linkedin.com/in/realdennis or Twitter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade