[譯] 使用開發者工具在瀏覽器中調整設計

• 原文地址：Using DevTools to Tweak Designs in the Browser
• 原文做者：AHMAD SHADEED
• 譯文出自：掘金翻譯計劃
• 譯者：bambooom
• 校對者：gy134340 / avocadowang

使用開發者工具在瀏覽器中調整設計

讓咱們來看看使用瀏覽器的開發者工具作設計工做的幾種方式。你會發現一些很方便的隱藏技巧。

使用複選框切換類名

當你在從不一樣的選擇中挑選一個設計時，或者在不手動添加類名的時候切換元素的狀態時，這個技巧頗有用。

爲了達到這一點，咱們可使用不一樣的類名和範圍樣式。那麼若是想看看不一樣的橫幅設計的樣式的時候，咱們能夠這麼作：

.banner-1 {
  /* Style variation */
}

.banner-2 {
  /* Style variation */
}複製代碼

Google Chrome 可讓咱們添加全部類，並在其中使用複選框切換來快速比較不一樣的樣式。

能夠看看 codepen demo.

開啓 designMode 來編輯內容

web 內容是動態的，因此設計應該是靈活的，咱們應該測試不一樣類型不一樣長度的內容。比方說，輸入一個很是長的單詞可能會破壞現有的設計。爲了檢查這個，咱們能夠在瀏覽器控制檯裏輸入 document.designMode = 'on' 後編輯咱們的設計。

這個能夠很方便的測試設計而不須要手動在源代碼中進行修改。

隱藏元素

有時咱們須要隱藏某些元素試試看若是沒有它的時候是什麼樣子。Chrome DevTools 可讓咱們檢查一個元素而後鍵盤輸入 h 來隱藏它，也就是切換元素 CSS 的 visibility 屬性。

當你須要隱藏某些元素並截圖，再和你的同事、設計師或者經理討論的時候，這個功能很是有用。有時我會利用這個技巧去隱藏元素並截圖後，在 PhotoShop 中快速模擬簡單的想法。

截圖設計元素

FireFox 的開發者工具中有一個頗有用的功能，它能夠給 DOM 中特定元素截圖。這樣的話，咱們能夠將幾種不一樣的方案放在一塊兒對比挑選最好的方案。

按照以下步驟：

1. 打開 FireFox 開發者工具
2. 對一個元素右鍵，選擇節點截圖（Screenshot Node）
3. 截圖會存在默認的下載路徑文件夾中

你也能夠在 Chrome 中使用這個功能，有一個插件叫 Element Screenshot 能夠達到相同的效果。

更改設計顏色

在設計項目的初期階段，你可能須要探索多種不一樣的調色板。CSS 的 hue-rotate 函數是一共功能強大的過濾器，它可讓咱們在瀏覽器中更改設計顏色。它能夠旋轉圖像或元素中每一個像素的色相。其中的值能夠經過 deg 或者 rad 設定。

在下面的視頻中，我給組件添加了 filter: hue-rotate(value) 屬性，注意看全部的顏色是如何變化的。

注意每一個設計元素都會被使用 hue-rotate 所影響。好比，用戶頭像的顏色好像不太對，咱們能夠經過應用 hue-rotate 的負值使之恢復正常。

.bio__avatar {
  filter: hue-rotate(-100deg);
}複製代碼

See the demo Pen.

使用 CSS 變量（自定義 CSS 屬性）

雖然自定義屬性的瀏覽器支持並非很友好（如今 Microsoft Edge 如今正在開發）。咱們如今也仍然能夠從 CSS 變量中獲益。使用自定義變量定義間距和顏色單位能夠經過更改很小的值輕鬆實現巨大的變化。

我在咱們網頁上定義了下面一些變量：

:root {
  --spacing-unit: 1em;
  --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */
  --brand-color-primary: #7ebdc2;
  --brand-color-secondary: #468e94;
}複製代碼

這些變量能夠在網站全部的元素上使用，就像連接、導航、邊距和背景顏色。當在開發工具中更改一個變量的值，全部相關聯的元素都會受到影響。

使用 CSS 屬性 filter: invert() 翻轉元素

當你在黑底白字或者白底黑字的狀況下，這個屬性是頗有用的。例如，在標題中，咱們在黑色背景上將頁面標題設爲白色，而後在元素上添加了 filter: invert()屬性，全部的顏色就會被反轉。

CSS 視覺編輯器

這個功能天天都在變得愈來愈好。Safari 具備很是好的用於編輯值的 UI 工具，Chrome 也正在向 DevTools 中緩慢添加相似的東西。

Chrome 有些很實用的工具用來編輯 box-shadow、background-color、text-shadow 和 color.

我想上面這些技巧對於並非特別熟悉 CSS 的設計師會頗有幫助。直接視覺上的進行編輯會給設計師更多對設計細節的把控，他們能夠在瀏覽器中調整並將結果顯示給開發人員來實現。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。