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