試行された真のデバッグ戦略を使用して奇妙なバグを解決した方法は次のとおりです

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

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

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

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

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

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

問題の説明

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

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

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

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

まず、環境を考えてみましょう

バグの環境と条件を理解するために、プロジェクトの詳細を確認することをお勧めします。

• この特定のプロジェクトではReactを使用します（ただし、この投稿では必要ありません）。
• SVGはReactコンポーネントとしてインポートされ、Webpackを介してHTMLにインランスされています。
• SVGは設計ツールからエクスポートされており、構文エラーはありません。
• SVGは、StyleSheetsからいくつかのCSSを適用します。
• 影響を受けるSVGはHTMLにあります<div>要素の内側。<li>問題はSafariにのみ表示されます（バージョン13に記載）。</li> <h3 id="詳細な質問">詳細な質問</h3> <p>この質問を見て、何が起こっているのかについていくつかの仮定をすることができるかどうかを見てみましょう。このようなバグは複雑になる可能性があり、何が起こっているのかをすぐに知りません。最初の試みで100％正しい必要はありません。段階的に進み、テストできる仮説を形成して、考えられる原因を絞り込むことができるためです。</p> <h3 id="想定を形成します">想定を形成します</h3> <p>最初は、これはCSSの問題のように見えます。いくつかのスタイルは、ホバーイベントに適用され、SVGグラフィックスのレイアウトまたはオーバーフロープロパティを破壊する場合があります。また、Safariがページをレンダリングするたびに問題がランダムに発生するように見えます（画面のサイズを変更したり、ホバリングしたり、クリックするなど）。</p> <p>シンプルで最も明白なパスから始めて、CSSが問題の原因であると仮定しましょう。 SVGレンダリングをSVG要素（フレックスレイアウトなど）に適用するとSVGレンダリングが正しくない原因となるSafariブラウザーのバグの可能性を考慮することができます。</p> <p>そうすることで、<strong>仮説を立てます</strong>。次のステップは、仮説を確認または反論するテストを設定することです。各テスト結果は、バグに関する新しい事実を生み出し、さらなる仮定を形成するのに役立ちます。</p> <h3 id="問題を簡素化します">問題を簡素化します</h3> <p><strong>問題の単純化と</strong>呼ばれるデバッグ戦略を使用して、問題を特定しようとします。 CornellのCS講義は、この戦略を「バグに関連していないコードの一部を徐々に排除する方法」と説明しました。</p> <p>問題がCSSにあると仮定することにより、最終的に問題を特定したり、方程式からCSSを排除したりすることで、考えられる原因の数と問題の複雑さを減らすことができます。</p> <p>私たちの仮定を確認してみましょう。すべての非ブラウザースタイルシートを一時的に除外した場合、問題は発生しないはずです。プロジェクトの次のコード行にコメントすることにより、ソースコードでこれを行います。</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ではボタンをクリックして強制する必要があります。 CSSは犯人ではないと結論付けることができますが、この場合、5つのボタンのうち2つだけが問題に直面していることもわかります。これを思い出して、次の仮定に進みましょう。</p> <h3 id="分離の問題">分離の問題</h3> <p>次の仮定は、SafariがHTMLにあると述べています<code><div>要素内でSVGをレンダリングすると、バグがあります。問題は最初の2つのボタンで発生するため、<strong>最初のボタンを分離して</strong>、何が起こるかを確認します。<p> Sarah Drasnerは、孤立の重要性を説明しています。デバッグツールやその他の方法について詳しく知りたい場合は、彼女の記事を読むことを強くお勧めします。</p> <blockquote><p>隔離は、おそらくすべてのデバッグにおける最も強力な中核原則です。私たちのコードベースは、さまざまなライブラリ、フレームワークを備えた巨大になる可能性があり、プロジェクトに関与しなくなった多くの貢献者、さらには多くの貢献者も含まれている場合があります。検疫の問題は、ソリューションだけに集中できるように、問題から不必要な部分をゆっくりと削除するのに役立ちます。</p></blockquote> <p>また、多くの場合、「単純化されたテストケース」と呼ばれます。</p> <p>このボタンを別の空のテストルート（空白ページ）に移動しました。ステータスを示すために、次のCodepenを作成しました。 CSSは問題の原因ではないと結論付けたとしても、問題を可能な限り簡素化するバグの本当の原因を見つける前に、バグを除外する必要があります。</p> <p>このペンをSafariで開くと、<strong>問題を再現できなくなり</strong>、<strong>ボタンをクリックした後にSVGグラフが予想どおり表示されること</strong>がわかります。<strong>この変更を許容可能なバグ修正と見なすべきではありませんが</strong>、最小限の再現可能な例を作成するための良い出発点を提供します。</p> <h3 id="最小限の再現可能な例">最小限の再現可能な例</h3> <p>最初の2つの例の主な違いは、ボタンの組み合わせです。考えられるすべての組み合わせを試した後、この問題は、同じページの小さなSVGグラフの横にある大きなSVGグラフに対して描画イベントが発生した場合にのみ発生すると結論付けることができます。</p> <p>不要な要素なしでバグを再現できる<strong>最小限の再現可能な例</strong>を作成しました。最小の再現性のある例を使用して、問題をより詳細に研究し、問題を引き起こしているコードの部分を正確に特定することができます。</p> <p>次のCodepenを作成して、最小の再現性のある例を示しました。</p> <p> Safariでこのデモを開いてボタンをクリックすると、問題が発生していることがわかり、2つのSVGが互いに矛盾しているという仮定を形成できます。最初の図の2番目のSVG図をオーバーレイすると、最初のSVG図のトリミングされた円のサイズが、より小さなSVG図の正確なサイズと一致することがわかります。</p> <h3 id="分割して扱います">分割して扱います</h3> <p>問題を2つのSVGグラフィックスの組み合わせに絞り込みました。次に、問題を原因とする特定のSVGコードに絞り込みます。 SVGコードの基本的な理解しか持っておらず、問題を特定したい場合は、<strong>バイナリツリー検索</strong>戦略を使用して、分割統合アプローチを採用できます。コーネル大学のCS講義では、このアプローチについて説明しています。</p> <blockquote><p>たとえば、大きなコードから始めて、コードの中央にチェックポイントを配置します。その時点でエラーが発生しない場合、エラーが後半に発生することを意味します。そうでなければ、それは前半です。</p></blockquote> <p> SVGでは、最初のSVGから削除しようとすることができます<code><filter></filter>（同様に<defs></defs>とにかく空だから）。最初にチェックしましょう<filter></filter>Sara Soueidanによるこの記事の役割は、それを最もよく説明しています。

  SVGの線形勾配、マスク、パターン、その他のグラフィック効果のように、フィルターには便利な名前の専用要素があります。<filter></filter>要素。

  <filter></filter>要素が直接レンダリングされることはありません。その唯一の目的は、SVGのfilter属性またはCSSのurl()関数を使用してそれを参照することです。

  私たちのSVGで、<filter></filter> SVGグラフィックスの底にわずかな内側の影が適用されます。最初のSVGグラフから削除した後、内側の影が消えると予想されます。問題が続く場合、SVGタグの残りに問題があると結論付けることができます。出身なら<g filter="url(#filter0_ii)"></g>残りのIDを削除すると、影が完全に削除されます。何が起こっているのか？

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

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

  （私の強調）

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

  問題を修正します

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

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

  各SVGグラフに一意のID属性値を割り当てて、これが問題を解決するかどうかを確認しましょう。

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

  要約します

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

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

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

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

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

  参照してください

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