UI走查中95%的問題源于“間距不準(zhǔn)”，而肉眼難以量化，導(dǎo)致溝通低效。DevTools（瀏覽器開發(fā)者工具）作為設(shè)計師與前端的“共同尺子”，能將頁面視覺問題轉(zhuǎn)化為可測量、可驗證的技術(shù)事實。本文從設(shè)計師視角系統(tǒng)講解如何用DevTools高效走查，希望可以幫到大家。
如果你經(jīng)常參與 UI 走查，應(yīng)該會有類似的體驗：設(shè)計稿里一切工整、呼吸感剛剛好，到了線上頁面，總有種說不出的別扭——按鈕看起來有點胖，列表擠成一團(tuán)，彈層莫名“頂頭”——你明明感覺哪里不對，卻很難說清楚問題到底在哪兒。
有一組數(shù)據(jù)挺扎心：在一次前端對UI 走查問題的統(tǒng)計中，“間距”占到了 95%、字體相關(guān)只有 3%、邊框背景色等合計只有 2%。
換句話說，大部分“看著不舒服”，其實都跟間距有關(guān)系。但是間距很難通過肉眼直接量化，導(dǎo)致設(shè)計師走查費(fèi)時、與前端溝通效率低，前端修改有時也是“跟著感覺來”、難以達(dá)到最優(yōu)效果。
這也是為什么，我把 DevTools（開發(fā)者工具）當(dāng)成 UI 走查的標(biāo)配工具。
這篇文章，就想從一個設(shè)計師的視角，講講什么是 DevTools 、如何用 DevTools 做高效的 UI 走查，把實踐中總結(jié)出的那一整套方法，匯成一條實際好操作的路徑。
本文不涉及復(fù)雜的代碼和技術(shù)概念，放心享用。
01 DevTools是什么
DevTools（Developer Tools，開發(fā)者工具）是現(xiàn)代瀏覽器自帶的一套網(wǎng)頁檢查與調(diào)試工具，用于查看網(wǎng)頁的結(jié)構(gòu)、樣式、腳本、網(wǎng)絡(luò)請求和性能等信息。它能夠?qū)崟r展示頁面背后的代碼和布局，并允許用戶在本地修改樣式、觀察變化。
DevTools 不是獨(dú)立軟件，而是瀏覽器內(nèi)置功能。目前主流瀏覽器都提供了自己的 DevTools，包括Chrome、Safari、Firefox、Edge等。
DevTools 不是只給前端用的“黑客面板”，而是設(shè)計師與工程師之間的一把“共同的尺子”，它能讓一個頁面的“表面外觀”變成“透明結(jié)構(gòu)”：你可以在上面看到每一個元素的真實尺寸、間距、顏色和字體，可以在幾秒鐘內(nèi)驗證“到底是誰沒對齊”，也可以通過臨時修改樣式，把你腦子里的改善方案可視化地呈現(xiàn)出來。
換句話說，它提供了一種把 UI 視覺現(xiàn)象與技術(shù)實現(xiàn)邏輯直接對應(yīng)起來的能力。
02 開始使用
開始之前，第一步永遠(yuǎn)是把 DevTools 打開。最常用的方式是：
- 鍵盤黨可以用 Command + Option + I或 F12
- 鼠標(biāo)黨可以直接在頁面上右鍵 →「檢查（Inspect）」
很多設(shè)計師第一次看到 Elements 面板時，會被大片的 <div> 嚇到。
其實可以把它當(dāng)作“頁面骨架實時展開圖”：每一層縮進(jìn)就是嵌套關(guān)系，每個標(biāo)簽對應(yīng)頁面上的一個區(qū)域。
我們不需要懂它，只需要關(guān)注與UI走查密切相關(guān)的三個面板：樣式Styles（樣式規(guī)則）、計算樣式Computed（最終計算值）、布局Layout（布局體系）。
如果你對英文屬性名不夠熟，可以在右上角齒輪按鈕里，把語言切換到中文，這能降低學(xué)習(xí)成本。
03 從元素出發(fā)
要做 UI 走查，第一件事就是精準(zhǔn)選中目標(biāo)元素，常見方式包括：
方法一：用“選取器”在頁面上點選
點擊 DevTools 左上角的小箭頭
在頁面上移動鼠標(biāo)，高亮所選區(qū)域，點擊可鎖定元素
適合復(fù)雜、多層嵌套的界面。
方法二：右鍵檢查
hover到具體元素，右鍵 → 檢查（Inspect）適合按鈕、標(biāo)題、圖標(biāo)等肉眼識別明顯的元素
04 把間距「量」出來
既然 UI 走查里 95% 的問題都是”間距看著不對”，學(xué)會量間距是最劃算的一件事。
有兩個方法：
方法一：看 Box Model
要理解間距，首先要認(rèn)識 Box Model（盒模型）——這是網(wǎng)頁布局的基礎(chǔ)概念，它將每個元素看作一個”盒子”，由內(nèi)到外分為四層：content（內(nèi)容區(qū)）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）。
DevTools 能將這個模型可視化展示，讓你清楚看到每一層的數(shù)值，從而與設(shè)計稿進(jìn)行比對，精準(zhǔn)定位間距問題的根源。
方法二：hover 實時高亮
在頁面或者元素Elements 面板中移動鼠標(biāo)，頁面對應(yīng)區(qū)域會出現(xiàn)不同顏色的高亮框：橙色：margin、綠色：padding。
適合快速巡檢整體布局。
05 查看元素樣式的雙視角
至于顏色、字體、行高等樣式，可以從樣式Style或者計算樣式Computed查看。
視角一：樣式Styles（全部規(guī)則）
Style面板顯示了所有作用于當(dāng)前元素的樣式規(guī)則，包括顏色、字號、字重、字體、邊框、陰影、圓角。
如果你發(fā)現(xiàn)同一個屬性，比如font-size，出現(xiàn)了很多次，有的還被劃上了刪除線。也別奇怪，這代表有多個規(guī)則作用于它。
怎么找到哪個是真實的值呢？有兩個方法：
一是Styles 面板里的規(guī)則，是按從上到下的優(yōu)先級排列：越靠上的規(guī)則優(yōu)先級越高。我們只需要從上往下找即可。被覆蓋的會被劃上刪除線，不再生效，直接忽略就行。
視角二：Computed（最終值）
二是計算樣式Computed面板。
它顯示了元素最終的樣式，更直觀，更適合回答：最終字號是多少？行高值是多少？是否有透明度？寬高是多少？
并且可以勾選“組合”，將這些屬性分組顯示，分為Layout、Text、Appearance和Other。更易查找。
06 實時修改樣式
DevTools 最強(qiáng)大的地方在于：你不僅能看到樣式，還能立即修改它，實時預(yù)覽效果——這讓走查從”發(fā)現(xiàn)問題”變成了”提出方案”。
修改方式一：直接點擊數(shù)值
在 樣式Styles面板中，找到你想修改的屬性（比如 font-size: 14px），直接點擊數(shù)值部分，就能進(jìn)入編輯狀態(tài)。
步驟：點擊數(shù)值（如 14px） → 輸入新值（如 16px） → 按 Enter 確認(rèn)，頁面立即生效
適合快速微調(diào)單個屬性。
修改方式二：上下鍵微調(diào)
選中數(shù)值后，無需手動輸入，可以用鍵盤上下鍵進(jìn)行微調(diào)：
- ↑ / ↓：每次增減
- 1Shift + ↑ / ↓：每次增減 10
- Option + ↑ / ↓（Mac）或 Alt + ↑ / ↓（Windows）：每次增減 0.1
適合精細(xì)調(diào)整間距、透明度等需要”試著來”的場景。
修改方式三：添加新屬性
如果某個屬性根本不存在（比如你想加個 border-radius），可以在 Styles 面板的任意規(guī)則塊內(nèi)：
點擊空白處 → 輸入屬性名（如 border-radius）→ 輸入值（如 8px） → 按 Enter 確認(rèn)
頁面立即應(yīng)用新樣式。
修改方式四：臨時禁用某條樣式
有時你不確定是哪條規(guī)則導(dǎo)致了問題，可以用”復(fù)選框”快速開關(guān)樣式：
在 Styles 面板中，每條樣式左側(cè)都有一個復(fù)選框，取消勾選即可臨時禁用該規(guī)則，觀察頁面變化。
適合排查”到底是哪條規(guī)則在搗亂”。
修改方式五：復(fù)制修改后的樣式值
當(dāng)你調(diào)整出滿意的效果后，可以：
右鍵點擊修改后的屬性 → 選擇”復(fù)制” → “復(fù)制聲明”或”復(fù)制規(guī)則” → 粘貼到文檔或發(fā)給前端
這樣你就能把”視覺方案”轉(zhuǎn)化為”技術(shù)語言”，大幅提升溝通效率。
注意：所有修改都是臨時的，刷新頁面后會恢復(fù)原樣。DevTools 不會改動源代碼，只是讓你在本地預(yù)覽效果。
07 狀態(tài)模擬
許多 UI 缺陷只在 hover、active、focus 狀態(tài)下暴露，例如：hover 時顏色未變化、點擊態(tài)幾乎無反饋、表單 focus 出現(xiàn)丑陋藍(lán)框。
在 Styles 面板頂部點擊 :hov，勾選對應(yīng)狀態(tài)即可模擬：hover、active、focus、visited……無需鼠標(biāo)繁瑣操作。
08 布局骨架
當(dāng)你發(fā)現(xiàn)”每個元素單獨(dú)看都沒問題，但整體就是不順眼”時，問題往往出在布局層級。
這時候，DevTools 的布局 Layout 面板就能派上用場——它能把頁面背后隱藏的布局邏輯全部”照亮”。
點擊右側(cè)面板中的布局 Layout，會顯示所有網(wǎng)格布局（Grid）和彈性盒子布局（Flexbox）。
Grid 網(wǎng)格布局視角
如果點擊網(wǎng)格名稱（或勾選復(fù)選框，或直接在元素Style面板中點擊對應(yīng)的 Grid 標(biāo)簽，三者是聯(lián)動的），頁面中會直接高亮顯示網(wǎng)格區(qū)域，你可以看到：網(wǎng)格線與區(qū)域劃分、網(wǎng)格線行號與列號、軌跡大小、區(qū)域名稱、延長網(wǎng)格線（用于檢查模塊對齊效果）。
這對于排查”為什么這個卡片沒對齊”特別有用。
Flexbox 彈性盒子布局視角
如果點擊彈性盒子名稱（或勾選，或直接在元素中點擊對應(yīng)的 Flex 標(biāo)簽，三者是聯(lián)動的），頁面中會高亮顯示色塊、框線，你可以看到：主軸方向（橫向還是縱向）、子項的分布方式（居中、兩端對齊等）、容器與子項的邊界、哪個元素占用了過多空間。
你還可以：點擊色塊，修改框線顏色、點擊定位圖標(biāo)，直接跳轉(zhuǎn)到 樣式 Styles 中的對應(yīng)代碼。
這對于排查”為什么按鈕擠在一起”或”為什么間距不均勻”非常有幫助。
09 響應(yīng)式走查
DevTools 的“設(shè)備模擬”工具，讓響應(yīng)式問題無處可藏。
觀察：導(dǎo)航是否撐開、文字是否過密、元素是否溢出、彈窗是否遮擋、按鈕是否掉到底部……
并支持：切換設(shè)備型號、改變屏幕寬度、翻轉(zhuǎn)屏幕方向。
10 走得更遠(yuǎn)一點
當(dāng)你熟練掌握了 DevTools 的基礎(chǔ)操作，你會發(fā)現(xiàn)自己開始好奇更深的問題：這些元素是怎么組織的？移動端怎么走查?能不能讓 AI 幫我自動找問題？
這些問題沒有標(biāo)準(zhǔn)答案，但值得探索。
移動端走查：H5 能用 DevTools，原生要用專門工具
移動端頁面分兩種：H5 網(wǎng)頁和原生 UI。它們的走查方式完全不同。
如果是 App 內(nèi)的 H5 頁面（WebView），你可以通過真機(jī)調(diào)試，直接用 DevTools 查看。如果是原生 UI（比如 iOS 的 UIKit、SwiftUI），DevTools 就無能為力了，需要用專門的工具，比如 Lookin。
怎么判斷一個頁面是不是原生？
有幾個簡單的特征：文本無法長按選中、滑動非常順滑、動畫絲滑、左右滑返回手勢明顯（iOS）。如果”像網(wǎng)頁但又不像網(wǎng)頁”，那可能是混合頁面——Native 外框 + 內(nèi)嵌 H5。
AI 自動化走查：人機(jī)協(xié)作，而非完全替代
有團(tuán)隊已經(jīng)在嘗試用 AI 做自動化 UI 走查，比如讓 AI 批量識別間距、顏色、字號等問題。
但目前來看，AI 更適合做”初篩”——它能快速找出明顯的偏差，但最終的判斷和決策，還是需要人來做。因為很多設(shè)計問題不是”對錯”，而是”合不合適”。
未來，走查可能會變成這樣：AI 先跑一遍，標(biāo)出疑似問題；設(shè)計師再用 DevTools 逐一確認(rèn)，給出具體的修改建議。這樣既提高了效率，又保留了人的判斷力。
11 寫在最后
當(dāng)你習(xí)慣了這種基于 DevTools 的走查方式，你會發(fā)現(xiàn)自己跟以前有一處很大的不同：過去你走查，是在“憑感覺找問題”，現(xiàn)在你走查，是在“用證據(jù)找原因”。
DevTools 不是讓你變成前端工程師，而是讓你能夠理解界面背后的結(jié)構(gòu)、邏輯和約束，并提供既符合體驗、又便于實現(xiàn)的解決方案。
最終，UI 走查也會從一場“找誰背鍋”的會，變成一場“讓產(chǎn)品更好”的會——設(shè)計師和工程師坐在同一個 DevTools 界面前，說著同一種語言，指著同一份證據(jù)。而這，正是一個成熟團(tuán)隊?wèi)?yīng)該擁有的樣子。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.wtxcl.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
