還記得上次你遇到一個(gè)讓你抓耳撓腮幾個(gè)小時(shí)的UI相關(guān)bug嗎？也許問題是隨機(jī)發(fā)生的，或者在特定情況下出現(xiàn)（設(shè)備、操作系統(tǒng)、瀏覽器、用戶操作），或者只是隱藏在項(xiàng)目中眾多前端技術(shù)之一中？

我最近再次體會(huì)到UI bug的複雜性。我最近修復(fù)了一個(gè)有趣的bug，它影響了Safari瀏覽器中的一些SVG，沒有任何明顯的模式或原因。我搜索過任何類似的問題，希望能找到一些線索，但沒有找到有用的結(jié)果。儘管有障礙，我還是設(shè)法解決了它。

我通過使用一些有用的調(diào)試策略來分析問題，這些策略我也將在本文中介紹。提交修復(fù)程序後，我想起了Chris之前發(fā)布的一條推文。

寫下你希望在谷歌搜索時(shí)找到的那篇文章。

— Chris Coyier (@chriscoyier) 2017年10月30日

……我們來了。

問題描述

我在一個(gè)正在進(jìn)行的項(xiàng)目中發(fā)現(xiàn)了以下bug。這是在一個(gè)上線的網(wǎng)站上。

我創(chuàng)建了一個(gè)CodePen示例來演示這個(gè)問題，以便您可以自己檢查它。如果我們?cè)赟afari中打開示例，按鈕在加載時(shí)可能看起來符合預(yù)期。但是，如果我們點(diǎn)擊前兩個(gè)較大的按鈕，問題就會(huì)出現(xiàn)。

每當(dāng)瀏覽器繪製事件發(fā)生時(shí)，較大按鈕中的SVG渲染不正確。它只是被截?cái)嗔?。它可能在加載時(shí)隨機(jī)發(fā)生。它甚至可能在調(diào)整屏幕大小時(shí)發(fā)生。無論情況如何，它都會(huì)發(fā)生！

以下是我解決這個(gè)問題的方法。

首先，讓我們考慮一下環(huán)境

回顧項(xiàng)目的細(xì)節(jié)以了解環(huán)境和存在bug的條件總是一個(gè)好主意。

• 這個(gè)特定的項(xiàng)目使用React（但這篇文章不需要）。
• SVG作為React組件導(dǎo)入，並通過webpack內(nèi)聯(lián)到HTML中。
• SVG是從設(shè)計(jì)工具導(dǎo)出的，沒有語法錯(cuò)誤。
• SVG應(yīng)用了一些來自樣式表的CSS。
• 受影響的SVG位於一個(gè)HTML<div>元素內(nèi)。<li>問題只出現(xiàn)在Safari中（在13版本上被注意到）。</li> <h3 id="深入問題">深入問題</h3> <p>讓我們來看看這個(gè)問題，看看我們能否對(duì)正在發(fā)生的事情做出一些假設(shè)。像這樣的bug會(huì)變得很複雜，我們不會(huì)立即知道發(fā)生了什麼。我們不必在第一次嘗試時(shí)就100%正確，因?yàn)槲覀儗⒅鸩竭M(jìn)行，形成我們可以測(cè)試的假設(shè)，以縮小可能的原因。</p> <h3 id="形成假設(shè)">形成假設(shè)</h3> <p>起初，這看起來像是一個(gè)CSS問題。某些樣式可能會(huì)在懸停事件中應(yīng)用，從而破壞SVG圖形的佈局或溢出屬性。它也看起來像是問題隨機(jī)發(fā)生，每當(dāng)Safari渲染頁面時(shí)（調(diào)整屏幕大小、懸停、點(diǎn)擊等時(shí)的繪製事件）。</p> <p>讓我們從簡(jiǎn)單而最明顯的途徑開始，並假設(shè)CSS是問題的根源。我們可以考慮Safari瀏覽器中存在一個(gè)bug的可能性，該bug會(huì)導(dǎo)致在某些特定樣式應(yīng)用於SVG元素（例如flex佈局）時(shí)SVG渲染不正確。</p> <p>通過這樣做，我們<strong>形成了一個(gè)假設(shè)</strong>。我們的下一步是設(shè)置一個(gè)測(cè)試，該測(cè)試要么證實(shí)要么反駁該假設(shè)。每個(gè)測(cè)試結(jié)果都會(huì)產(chǎn)生關(guān)於bug的新事實(shí)，並有助於形成進(jìn)一步的假設(shè)。</p> <h3 id="問題簡(jiǎn)化">問題簡(jiǎn)化</h3> <p>我們將使用一種稱為<strong>問題簡(jiǎn)化</strong>的調(diào)試策略來嘗試查明問題?？的螤柎髮W(xué)的CS講座將此策略描述為“一種逐漸消除與bug無關(guān)的代碼部分的方法”。</p> <p>通過假設(shè)問題在於CSS，我們可以最終查明問題或從等式中消除CSS，從而減少可能原因的數(shù)量和問題的複雜性。</p> <p>讓我們嘗試確認(rèn)我們的假設(shè)。如果我們暫時(shí)排除所有非瀏覽器樣式表，則問題不應(yīng)發(fā)生。我在我的源代碼中通過註釋掉項(xiàng)目中的以下代碼行來做到這一點(diǎn)。</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre> <p>我創(chuàng)建了一個(gè)方便的CodePen示例來演示這些不包含CSS的元素。在React中，我們正在將SVG圖形作為組件導(dǎo)入，並且它們使用webpack內(nèi)聯(lián)到HTML中。</p> <p>如果我們?cè)赟afari中打開這個(gè)pen並點(diǎn)擊按鈕，我們?nèi)匀粫?huì)遇到這個(gè)問題。它仍然在頁面加載時(shí)發(fā)生，但在CodePen上，我們必須通過點(diǎn)擊按鈕來強(qiáng)制它。我們可以得出結(jié)論，CSS不是罪魁禍?zhǔn)?，但我們也可以看到只有五個(gè)按鈕中的兩個(gè)在這種情況下面臨問題。讓我們記住這一點(diǎn)，然後繼續(xù)下一個(gè)假設(shè)。</p> <h3 id="隔離問題">隔離問題</h3> <p>我們的下一個(gè)假設(shè)指出，Safari在HTML<code><div>元素內(nèi)渲染SVG時(shí)存在bug。由於問題發(fā)生在前兩個(gè)按鈕上，我們將<strong>隔離第一個(gè)按鈕</strong>，看看會(huì)發(fā)生什麼。<p> Sarah Drasner解釋了隔離的重要性，如果您想了解有關(guān)調(diào)試工具和其他方法的更多信息，我強(qiáng)烈建議您閱讀她的文章。</p> <blockquote><p>隔離可能是所有調(diào)試中最強(qiáng)的核心原則。我們的代碼庫可能龐大，包含不同的庫、框架，並且可能包含許多貢獻(xiàn)者，甚至包括不再參與該項(xiàng)目的人員。隔離問題有助於我們慢慢剔除問題中不必要的部件，以便我們可以單獨(dú)關(guān)註解決方案。</p></blockquote> <p>它也經(jīng)常被稱為“簡(jiǎn)化的測(cè)試用例”。</p> <p>我將此按鈕移動(dòng)到一個(gè)單獨(dú)的空測(cè)試路由（空白頁面）。我創(chuàng)建了以下CodePen來演示該狀態(tài)。即使我們已經(jīng)得出結(jié)論，CSS不是問題的原因，我們也應(yīng)該在找出bug的真正原因之前將其排除在外，以盡可能簡(jiǎn)化問題。</p> <p>如果我們?cè)赟afari中打開這個(gè)pen，我們可以看到我們<strong>無法再重現(xiàn)這個(gè)問題</strong>，並且<strong>SVG圖形在點(diǎn)擊按鈕後按預(yù)期顯示</strong>。<strong>我們不應(yīng)該將此更改視為可接受的bug修復(fù)</strong>，但它為創(chuàng)建最小的可重現(xiàn)示例提供了一個(gè)良好的起點(diǎn)。</p> <h3 id="最小的可重現(xiàn)示例">最小的可重現(xiàn)示例</h3> <p>前兩個(gè)示例之間的主要區(qū)別在於按鈕組合。在嘗試了所有可能的組合之後，我們可以得出結(jié)論，此問題僅在對(duì)同一頁面上較小的SVG圖形旁邊的較大SVG圖形發(fā)生繪製事件時(shí)才會(huì)發(fā)生。</p> <p>我們創(chuàng)建了一個(gè)<strong>最小的可重現(xiàn)示例</strong>，允許我們?cè)跊]有任何不必要元素的情況下重現(xiàn)bug。使用最小的可重現(xiàn)示例，我們可以更詳細(xì)地研究問題並準(zhǔn)確地查明導(dǎo)致問題的代碼部分。</p> <p>我創(chuàng)建了以下CodePen來演示最小的可重現(xiàn)示例。</p> <p>如果我們?cè)赟afari中打開此演示並點(diǎn)擊按鈕，我們可以看到問題正在發(fā)生，並形成一個(gè)假設(shè)，即這兩個(gè)SVG以某種方式相互衝突。如果我們將第二個(gè)SVG圖形疊加在第一個(gè)圖形上，我們可以看到第一個(gè)SVG圖形上被裁剪的圓圈的大小與較小的SVG圖形的精確尺寸相匹配。</p> <h3 id="分而治之">分而治之</h3> <p>我們將問題縮小到兩個(gè)SVG圖形的組合?，F(xiàn)在我們將把問題縮小到導(dǎo)致問題的特定SVG代碼。如果我們只對(duì)SVG代碼有基本的了解，並且想要查明問題，我們可以使用<strong>二叉樹搜索</strong>策略，並採用分而治之的方法?？的螤柎髮W(xué)的CS講座描述了這種方法：</p> <blockquote><p>例如，從一大段代碼開始，在代碼中間放置一個(gè)檢查點(diǎn)。如果錯(cuò)誤沒有出現(xiàn)在該點(diǎn)，則表示錯(cuò)誤發(fā)生在後半部分；否則，它就在前半部分。</p></blockquote> <p>在SVG中，我們可以嘗試從第一個(gè)SVG中刪除<code><filter></filter>（以及<defs></defs>，因?yàn)樗鼰o論如何都是空的）。讓我們首先檢查<filter></filter>的作用。 Sara Soueidan的這篇文章最好地解釋了它。

  與SVG中的線性漸變、蒙版、圖案和其他圖形效果一樣，濾鏡有一個(gè)方便命名的專用元素：<filter></filter>元素。

  <filter></filter>元素永遠(yuǎn)不會(huì)直接渲染；它唯一的用途是可以使用SVG中的filter屬性或CSS中的url()函數(shù)來引用它。

  在我們的SVG中，<filter></filter>在SVG圖形底部應(yīng)用了一個(gè)輕微的內(nèi)陰影。在我們將其從第一個(gè)SVG圖形中刪除後，我們預(yù)計(jì)內(nèi)陰影將消失。如果問題仍然存在，我們可以得出結(jié)論，SVG標(biāo)記的其餘部分存在問題。如果我們從<g filter="url(#filter0_ii)"></g>中刪除剩餘的id，則陰影將完全移除。到底是怎麼回事？

  讓我們?cè)倏纯辞懊嫣岬降?code><filter></filter>屬性的定義，並註意以下細(xì)節(jié)：

  <filter></filter>元素永遠(yuǎn)不會(huì)直接渲染；它唯一的用途是可以被引用，使用SVG中的filter屬性。

  （我的強(qiáng)調(diào)）

  因此，我們可以得出結(jié)論，第二個(gè)SVG圖形的濾鏡定義被應(yīng)用於第一個(gè)SVG圖形，並導(dǎo)致錯(cuò)誤。

  修復(fù)問題

  我們現(xiàn)在知道問題與<filter></filter>屬性有關(guān)。我們也知道這兩個(gè)SVG都有filter屬性，因?yàn)樗鼈兪褂盟鼇韯?chuàng)建圓形上的內(nèi)陰影。讓我們比較這兩個(gè)SVG之間的代碼，看看我們能否解釋和修復(fù)這個(gè)問題。

  我已經(jīng)簡(jiǎn)化了兩個(gè)SVG圖形的代碼，以便我們可以清楚地看到發(fā)生了什麼。以下代碼段顯示了第一個(gè)SVG的代碼。

  <code><svg height="46" viewbox="0 0 46 46" width="46"><g filter="url(#filter0_ii)"></g><defs><filter height="46" width="46" x="0" y="0"></filter></defs></svg></code>

  以下代碼段顯示了第二個(gè)SVG圖形的代碼。

  <code><svg height="28" viewbox="0 0 28 28" width="28"><g filter="url(#filter0_ii)"></g><defs><filter height="28" width="28" x="0" y="0"></filter></defs></svg></code>

  我們可以注意到，生成的SVG使用相同的id屬性id=filter0_ii 。 Safari應(yīng)用了它最後讀取的濾鏡定義（在本例中是第二個(gè)SVG標(biāo)記），並導(dǎo)致第一個(gè)SVG被裁剪到第二個(gè)濾鏡的大?。◤?6px到28px）。 id屬性在DOM中應(yīng)該具有唯一值。通過在一個(gè)頁面上擁有兩個(gè)或多個(gè)id屬性，瀏覽器無法理解要應(yīng)用哪個(gè)引用，並且濾鏡屬性在每次繪製事件中重新定義，這取決於導(dǎo)致問題隨機(jī)出現(xiàn)的競(jìng)爭(zhēng)條件。

  讓我們嘗試為每個(gè)SVG圖形分配唯一的id屬性值，看看是否能解決這個(gè)問題。

  如果我們?cè)赟afari中打開CodePen示例並點(diǎn)擊按鈕，我們可以看到通過為每個(gè)SVG圖形文件中<filter></filter>屬性分配唯一的ID，我們修復(fù)了這個(gè)問題。如果我們考慮這樣一個(gè)事實(shí)：我們?yōu)橄駃d這樣的屬性具有非唯一值，這意味著此問題應(yīng)該存在於所有瀏覽器上。出於某種原因，其他瀏覽器（包括Chrome和Firefox）似乎在沒有任何bug的情況下處理了這個(gè)邊緣情況，儘管這可能只是一個(gè)巧合。

  總結(jié)

  這是一次相當(dāng)長(zhǎng)的旅程！我們從幾乎對(duì)一個(gè)看似隨機(jī)發(fā)生的問題一無所知，到完全理解並修復(fù)它。如果問題的根本原因不明確或複雜，調(diào)試UI和理解視覺bug可能很困難。幸運(yùn)的是，一些有用的調(diào)試策略可以幫助我們。

  首先，我們通過形成假設(shè)來簡(jiǎn)化問題，這幫助我們消除了與問題無關(guān)的組件（樣式、標(biāo)記、動(dòng)態(tài)事件等）。之後，我們隔離了標(biāo)記，並找到了最小的可重現(xiàn)示例，這使我們能夠?qū)Ｗ㈧秵蝹€(gè)代碼塊。最後，我們使用分而治之的策略查明了問題，並修復(fù)了它。

  感謝您抽出時(shí)間閱讀這篇文章。在我離開之前，我想給您留下最後一種調(diào)試策略，它也在康奈爾大學(xué)的CS講座中有所介紹。

  記住在調(diào)試嘗試之間休息一下，放鬆並清理你的思緒。

  如果在bug上花費(fèi)了太多時(shí)間，程序員就會(huì)感到疲倦，調(diào)試可能會(huì)適得其反。休息一下，清理你的思緒；休息之後，嘗試從不同的角度思考這個(gè)問題。

  參考

  • 康奈爾大學(xué)CS 312講座26 – 調(diào)試技術(shù)
  • 調(diào)試技巧和竅門
  • 簡(jiǎn)化的測(cè)試用例
  • SVG濾鏡101