最後にUI関連のバグに遭遇したときのことを覚えています。問題はランダムに発生したり、特定の狀況（デバイス、オペレーティングシステム、ブラウザー、ユーザー操作）で発生したり、プロジェクトの多くのフロントエンドテクノロジーの1つに隠されているのでしょうか？

私は最近、UIバグの複雑さを再び経験しました。私は最近、明らかなパターンや理由なしにSafariブラウザの一部のSVGに影響を與える興味深いバグを修正しました。いくつかの手がかりを見つけることを望んで、同様の質(zhì)問を検索しましたが、有用な結(jié)果は見つかりませんでした。障害にもかかわらず、私はそれを修正することができました。

この記事でも説明するいくつかの有用なデバッグ戦略を使用して、問題を分析します。修正を送信した後、Chrisが以前に投稿したツイートを思い出しました。

Googleを検索するときに見つけたい記事を書き留めてください。

- Chris Coyier（@Chriscoyier）2017年10月30日

…私たちはここにいます。

問題の説明

進(jìn)行中のプロジェクトで次のバグを見つけました。これはオンラインのウェブサイトにあります。

この問題を示すためにCodepenの例を作成して、自分で確認(rèn)できるようにしました。 Safariで例を開くと、ボタンがロード時(shí)に予想どおりに見える場(chǎng)合があります。ただし、最初の2つの大きなボタンをクリックすると、問題が表示されます。

ブラウザの描畫イベントが発生するたびに、大きなボタンでのSVGレンダリングが正しくありません。切り捨てられています。ロード時(shí)にランダムに発生する可能性があります。畫面がサイズ変更されたときにも発生する可能性があります。狀況が何であれ、それは起こります！

これがこの問題の解決策です。

まず、環(huán)境を考えてみましょう

バグの環(huán)境と條件を理解するために、プロジェクトの詳細(xì)を確認(rèn)することをお?jiǎng)幛幛筏蓼埂?/p>

• この特定のプロジェクトではReactを使用します（ただし、この投稿では必要ありません）。
• SVGはReactコンポーネントとしてインポートされ、Webpackを介してHTMLにインランスされています。
• SVGは設(shè)計(jì)ツールからエクスポートされており、構(gòu)文エラーはありません。
• SVGは、StyleSheetsからいくつかのCSSを適用します。
• 影響を受けるSVGはHTMLにあります<div>要素の內(nèi)側(cè)。<li>問題はSafariにのみ表示されます（バージョン13に記載）。</li> <h3 id="詳細(xì)な質(zhì)問">詳細(xì)な質(zhì)問</h3> <p>この質(zhì)問を見て、何が起こっているのかについていくつかの仮定をすることができるかどうかを見てみましょう。このようなバグは複雑になる可能性があり、何が起こっているのかをすぐに知りません。最初の試みで100％正しい必要はありません。段階的に進(jìn)み、テストできる仮説を形成して、考えられる原因を絞り込むことができるためです。</p> <h3 id="想定を形成します">想定を形成します</h3> <p>最初は、これはCSSの問題のように見えます。いくつかのスタイルは、ホバーイベントに適用され、SVGグラフィックスのレイアウトまたはオーバーフロープロパティを破壊する場(chǎng)合があります。また、Safariがページをレンダリングするたびに問題がランダムに発生するように見えます（畫面のサイズを変更したり、ホバリングしたり、クリックするなど）。</p> <p>シンプルで最も明白なパスから始めて、CSSが問題の原因であると仮定しましょう。 SVGレンダリングをSVG要素（フレックスレイアウトなど）に適用するとSVGレンダリングが正しくない原因となるSafariブラウザーのバグの可能性を考慮することができます。</p> <p>そうすることで、<strong>仮説を立てます</strong>。次のステップは、仮説を確認(rèn)または反論するテストを設(shè)定することです。各テスト結(jié)果は、バグに関する新しい事実を生み出し、さらなる仮定を形成するのに役立ちます。</p> <h3 id="問題を簡(jiǎn)素化します">問題を簡(jiǎn)素化します</h3> <p><strong>問題の単純化と</strong>呼ばれるデバッグ戦略を使用して、問題を特定しようとします。 CornellのCS講義は、この戦略を「バグに関連していないコードの一部を徐々に排除する方法」と説明しました。</p> <p>問題がCSSにあると仮定することにより、最終的に問題を特定したり、方程式からCSSを排除したりすることで、考えられる原因の數(shù)と問題の複雑さを減らすことができます。</p> <p>私たちの仮定を確認(rèn)してみましょう。すべての非ブラウザースタイルシートを一時(shí)的に除外した場(chǎng)合、問題は発生しないはずです。プロジェクトの次のコード行にコメントすることにより、ソースコードでこれを行います。</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre> <p> CSSを含まないこれらの要素を示すために、便利なCodepen例を作成しました。 Reactでは、SVGグラフィックをコンポーネントとしてインポートしており、Webpackを使用してHTMLにインランスしています。</p> <p>このペンをSafariで開いてボタンをクリックすると、この問題があります。ページが読み込まれたときにまだ発生しますが、CodePenではボタンをクリックして強(qiáng)制する必要があります。 CSSは犯人ではないと結(jié)論付けることができますが、この場(chǎng)合、5つのボタンのうち2つだけが問題に直面していることもわかります。これを思い出して、次の仮定に進(jìn)みましょう。</p> <h3 id="分離の問題">分離の問題</h3> <p>次の仮定は、SafariがHTMLにあると述べています<code><div>要素內(nèi)でSVGをレンダリングすると、バグがあります。問題は最初の2つのボタンで発生するため、<strong>最初のボタンを分離して</strong>、何が起こるかを確認(rèn)します。<p> Sarah Drasnerは、孤立の重要性を説明しています。デバッグツールやその他の方法について詳しく知りたい場(chǎng)合は、彼女の記事を読むことを強(qiáng)くお?jiǎng)幛幛筏蓼埂?lt;/p> <blockquote><p>隔離は、おそらくすべてのデバッグにおける最も強(qiáng)力な中核原則です。私たちのコードベースは、さまざまなライブラリ、フレームワークを備えた巨大になる可能性があり、プロジェクトに関與しなくなった多くの貢獻(xiàn)者、さらには多くの貢獻(xiàn)者も含まれている場(chǎng)合があります。検疫の問題は、ソリューションだけに集中できるように、問題から不必要な部分をゆっくりと削除するのに役立ちます。</p></blockquote> <p>また、多くの場(chǎng)合、「単純化されたテストケース」と呼ばれます。</p> <p>このボタンを別の空のテストルート（空白ページ）に移動(dòng)しました。ステータスを示すために、次のCodepenを作成しました。 CSSは問題の原因ではないと結(jié)論付けたとしても、問題を可能な限り簡(jiǎn)素化するバグの本當(dāng)の原因を見つける前に、バグを除外する必要があります。</p> <p>このペンをSafariで開くと、<strong>問題を再現(xiàn)できなくなり</strong>、<strong>ボタンをクリックした後にSVGグラフが予想どおり表示されること</strong>がわかります。<strong>この変更を許容可能なバグ修正と見なすべきではありませんが</strong>、最小限の再現(xiàn)可能な例を作成するための良い出発點(diǎn)を提供します。</p> <h3 id="最小限の再現(xiàn)可能な例">最小限の再現(xiàn)可能な例</h3> <p>最初の2つの例の主な違いは、ボタンの組み合わせです。考えられるすべての組み合わせを試した後、この問題は、同じページの小さなSVGグラフの橫にある大きなSVGグラフに対して描畫イベントが発生した場(chǎng)合にのみ発生すると結(jié)論付けることができます。</p> <p>不要な要素なしでバグを再現(xiàn)できる<strong>最小限の再現(xiàn)可能な例</strong>を作成しました。最小の再現(xiàn)性のある例を使用して、問題をより詳細(xì)に研究し、問題を引き起こしているコードの部分を正確に特定することができます。</p> <p>次のCodepenを作成して、最小の再現(xiàn)性のある例を示しました。</p> <p> Safariでこのデモを開いてボタンをクリックすると、問題が発生していることがわかり、2つのSVGが互いに矛盾しているという仮定を形成できます。最初の図の2番目のSVG図をオーバーレイすると、最初のSVG図のトリミングされた?jī)窑违单ぅ氦ⅳ瑜晷·丹蔛VG図の正確なサイズと一致することがわかります。</p> <h3 id="分割して扱います">分割して扱います</h3> <p>問題を2つのSVGグラフィックスの組み合わせに絞り込みました。次に、問題を原因とする特定のSVGコードに絞り込みます。 SVGコードの基本的な理解しか持っておらず、問題を特定したい場(chǎng)合は、<strong>バイナリツリー検索</strong>戦略を使用して、分割統(tǒng)合アプローチを採用できます。コーネル大學(xué)のCS講義では、このアプローチについて説明しています。</p> <blockquote><p>たとえば、大きなコードから始めて、コードの中央にチェックポイントを配置します。その時(shí)點(diǎn)でエラーが発生しない場(chǎng)合、エラーが後半に発生することを意味します。そうでなければ、それは前半です。</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)側(cè)の影が適用されます。最初のSVGグラフから削除した後、內(nèi)側(cè)の影が消えると予想されます。問題が続く場(chǎng)合、SVGタグの殘りに問題があると結(jié)論付けることができます。出身なら<g filter="url(#filter0_ii)"></g>殘りのIDを削除すると、影が完全に削除されます。何が起こっているのか？

  前述の人を見てみましょう<filter></filter>プロパティの定義と次の詳細(xì)に注意してください。

  <filter></filter>要素が直接レンダリングされることはありません。その唯一の目的は、SVGのfilter屬性を使用して參照することです。

  （私の強(qiáng)調(diào)）

  したがって、 2番目のSVGグラフのフィルター定義が最初のSVGグラフに適用され、エラーが発生すると結(jié)論付けることができます。

  問題を修正します

  私たちは今、問題を知っています<filter></filter>関連するプロパティ。また、両方のSVGがfilter屬性を使用していることも知っています。これら2つのSVG間のコードを比較し、これを説明して修正できるかどうかを確認(rèn)しましょう。

  両方のSVGグラフィックスのコードを簡(jiǎn)素化したので、何が起こっているのかをはっきりと見ることができます。次のコードスニペットには、最初の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>

  次のコードスニペットには、2番目の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は、最後に読み取るフィルター定義（この場(chǎng)合は2番目のSVGマーカー）を適用し、最初のSVGを2番目のフィルターのサイズ（46pxから28px）にトリミングします。 ID屬性は、DOMに一意の値を持つ必要があります。ページに2つ以上のIDプロパティを持つことにより、ブラウザはどの參照を適用するかを理解できず、問題がランダムに表示されるレース條件に応じて、各ドローイベントでフィルタープロパティが再定義されます。

  各SVGグラフに一意のID屬性値を割り當(dāng)てて、これが問題を解決するかどうかを確認(rèn)しましょう。

  SafariでCodePenの例を開いてボタンをクリックすると、各SVGグラフファイルでそれを作成することでそれを見ることができます<filter></filter>屬性は一意のIDを割り當(dāng)て、この問題を修正しました。 IDのようなプロパティの非ユニーク値があるという事実を考慮した場(chǎng)合、これはこの問題がすべてのブラウザーに存在することを意味します。何らかの理由で、他のブラウザ（ChromeやFirefoxを含む）は、バグなしでこのエッジケースを処理しているようですが、それは単なる偶然かもしれません。

  要約します

  これはかなり長(zhǎng)い旅です！一見ランダムな問題をほとんど無視してから、それを完全に理解し、修正することになります。 UIをデバッグし、視覚的なバグを理解することは、問題の根本原因が不明または複雑である場(chǎng)合、困難な場(chǎng)合があります。幸いなことに、いくつかの有用なデバッグ戦略が役立ちます。

  まず、仮定を形成することで問題を簡(jiǎn)素化します。これにより、問題に関連しないコンポーネント（スタイル、タグ、動(dòng)的イベントなど）を排除できます。その後、マークアップを分離し、最小の再現(xiàn)性のある例を見つけました。これにより、コードの単一ブロックに集中できるようになりました。最後に、私たちは分割戦略を使用して問題を特定し、それを修正しました。

  この記事を読んでくれてありがとう。去る前に、コーネルのCS講義でも取り上げられている最後のデバッグ戦略を殘したいと思います。

  デバッグの試みの間で休憩を取ることを忘れないでください。あなたの考えをリラックスしてきれいにしてください。

  バグに時(shí)間がかかりすぎると、プログラマーは疲れを感じ、デバッグが裏目に出る可能性があります。休憩を取り、あなたの考えをきれいにしてください。休んだ後、別の視點(diǎn)からこれについて考えてみてください。

  參照してください

  • コーネル大學(xué)CS 312講義26 - デバッグテクノロジー
  • デバッグのヒントとヒント
  • 簡(jiǎn)素化されたテストケース
  • SVGフィルター101