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