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

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

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

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

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

……我們來了。

問題描述

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

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

每當瀏覽器繪制事件發(fā)生時，較大按鈕中的SVG渲染不正確。它只是被截斷了。它可能在加載時隨機發(fā)生。它甚至可能在調(diào)整屏幕大小時發(fā)生。無論情況如何，它都會發(fā)生！

以下是我解決這個問題的方法。

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

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

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

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

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

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

  讓我們再看看前面提到的<filter></filter>屬性的定義，并注意以下細節(jié)：

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

  （我的強調(diào)）

  因此，我們可以得出結(jié)論，第二個SVG圖形的濾鏡定義被應用于第一個SVG圖形，并導致錯誤。

  修復問題

  我們現(xiàn)在知道問題與<filter></filter>屬性有關。我們也知道這兩個SVG都有filter屬性，因為它們使用它來創(chuàng)建圓形上的內(nèi)陰影。讓我們比較這兩個SVG之間的代碼，看看我們能否解釋和修復這個問題。

  我已經(jīng)簡化了兩個SVG圖形的代碼，以便我們可以清楚地看到發(fā)生了什么。以下代碼段顯示了第一個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>

  以下代碼段顯示了第二個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應用了它最后讀取的濾鏡定義（在本例中是第二個SVG標記），并導致第一個SVG被裁剪到第二個濾鏡的大?。◤?6px到28px）。id屬性在DOM中應該具有唯一值。通過在一個頁面上擁有兩個或多個id屬性，瀏覽器無法理解要應用哪個引用，并且濾鏡屬性在每次繪制事件中重新定義，這取決于導致問題隨機出現(xiàn)的競爭條件。

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

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

  總結(jié)

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

  首先，我們通過形成假設來簡化問題，這幫助我們消除了與問題無關的組件（樣式、標記、動態(tài)事件等）。之后，我們隔離了標記，并找到了最小的可重現(xiàn)示例，這使我們能夠?qū)Ｗ⒂趩蝹€代碼塊。最后，我們使用分而治之的策略查明了問題，并修復了它。

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

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

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

  參考

  • 康奈爾大學CS 312講座26 – 調(diào)試技術
  • 調(diào)試技巧和竅門
  • 簡化的測試用例
  • SVG濾鏡101