奇妙なバグ修正と実績のあるデバッグ戦略

修正に何時間もかかったUIエラーに最後に遭遇したときのことを覚えていますか？明らかな理由もなく、このエラーが定期的に発生した可能性があります。たぶんそれは特定の条件下で現れた（それはデバイス、オペレーティングシステム、ブラウザまたはユーザーのアクションに依存する可能性がある）か、それともWebプロジェクトのクライアント側の一部である多くのフロントエンドテクノロジーの1つの深さのどこかに隠されていましたか？



最近、UIエラーの原因がどれほど混乱する可能性があるかを思い出す必要がありました。つまり、SafariブラウザでのSVG画像の出力に影響を与える興味深いバグの修正について話しているのです。このエラーは、特定のシステムがなくても、明らかな理由もなく発生しました。問題に直面したとき、私はそのようなケースの説明が私に何が起こっているのかについてのヒントを与えることを期待して、同様のケースを見つけようとしました。しかし、私は有用なものを見つけることができませんでした。確かに、目の前にあるすべての障害にもかかわらず、私はこのエラーに対処することができました。



この記事で取り上げるデバッグ戦略のいくつかを使用して、問題を分析しました。間違いを取り除いた後、アドバイスを思い出しましたChrisCoyerが数年前にTwitterの読者に提供したものです。このアドバイスは次のようになります。「検索エンジンにアクセスしたときに見つけたい記事を書いてください。」実際、それは私がしたことです。

問題の概要

私が取り組んでいたプロジェクトで、ライブサイトでエラーを見つけました。その兆候をこのビデオに記録しました。これは、ボタンが通常の状態でどのように見えるかです。





通常の状態のボタン



そして、これは問題が発生した後の同じボタンです。





ボタンの一部が途切れる



さまざまな状況でこのエラーを再現し、ページが再描画されました。たとえば、ブラウザウィンドウのサイズが変更されたときに発生しました。



問題を示すために、CodePenで例を作成しました。これについては、以下で詳しく説明します。ただし、この例を自分で試すことができます。つまり、この例をSafariブラウザで開くと、ページが読み込まれると、ボタンが期待どおりに表示されるという事実について話します。しかし、2つの大きなボタンのいずれかをクリックすると、バグが醜い頭を突き出します。





SVG画像がトリミングされるのはなぜですか？



イベントが発生するたびpaintに、大きなボタンで使用されているSVG画像が正しく表示されません。これらの画像は単純にトリミングされています。これは、明らかな理由もなく、ページの読み込み時に発生する可能性があります。これは、ウィンドウのサイズが変更された場合でも発生する可能性があります。一般に、エラーはさまざまな状況で発生します。

エラーが発生したプロジェクトの概要

エラーについて話すときは、プロジェクトの詳細とその発生条件を明らかにするのがよいと思います。

• プロジェクトはReactを使用します（ただし、この記事の読者は、Reactを理解するためにReactを知る必要はありません）。
• SVGイメージはReactコンポーネントとしてプロジェクトにインポートされ、webpackを使用してHTMLに埋め込まれます。
• . .
• CSS.
• , , HTML- <button>.
• Safari ( 13 ).

エラーを見て、何が起こっているのかについて何らかの仮定を立てることができるかどうかを考えてみましょう。このようなエラーの理由は通常、表面のどこかにあるわけではないため、このようなエラーに直面すると、何が起こっているのかをすぐに自信を持って言うことはできません。問題を最初に理解しようとするとき、100％の精度で原因を特定しようと努力する必要はありません。エラーを段階的に調査し、起こっていることの考えられる原因のリストを絞り込むのに役立つ仮説を立ててテストします。

仮説を立てる

一見すると、何が起こっているのかはCSSエラーのように見えます。おそらく、ボタンの上にマウスを置くと、いくつかのスタイルがボタンに適用され、レイアウトが壊れます。おそらく、overflowSVGイメージ属性が原因です。また、さまざまな理由（paintブラウザウィンドウのサイズ変更、マウスポインタがボタンの上にあるとき、クリックされたときなど）でページを再描画すると、特定のシステムがないとエラーが発生するような気がします。



最も単純で最も明白な仮定から始めましょう。エラーがCSSにあるとしましょう。特定のスタイルがSVG要素に適用されると、Safariブラウザに誤ったSVG出力が発生するバグがあると想定できます。たとえば、フレックスレイアウトの作成に使用されるスタイルのように。



仮説を立てたところです。次のステップは、この仮説を確認または反証するテストを実施することです。各テストの結果は、エラーに関する新しい情報を提供し、次の仮説を立てるのに役立ちます。

問題を単純化する

「問題の単純化」と呼ばれるデバッグ戦略を使用します。これにより、エラーが発生した場所を特定できます。コーネル大学でのコンピューターサイエンスに関するある講演では、この戦略は「エラーに関係のないコードを徐々に取り除くアプローチ」と説明されています。



エラーがCSSにあると仮定すると、最終的にエラーの原因を見つけるか、方程式からCSSを削除することができます。これにより、エラーの考えられる原因の数が減り、問題の複雑さが軽減されます。



仮説をテストしてみましょう。確認してみましょう。この場合、ページからすべての非標準スタイルを一時的に無効にすると、エラーが表示されなくなります。



適切なスタイルシートを含めるためのコードは次のとおりです。

import 'css/app.css';

このCodePenプロジェクト は、CSSを使用しない要素の出力を示すために作成しました。Reactでは、SVGグラフィックがコンポーネントとしてプロジェクトにインポートされ、対応するコードがwebpackを使用してHTMLに埋め込まれます。





通常のボタン表示



前述のプロジェクトをSafariで開き、大きなボタンの1つをクリックすると、エラーがまだ発生していることがわかります。ページが読み込まれたときにも発生しますが、CodePenを使用している場合は、ボタンをクリックしてエラーをトリガーする必要があります。





CSSを無効にしてもエラーが続く（Safari 13）



結果として、CSSはそれとは何の関係もないと結論付けることができます。ただし、このような状況では、5つのボタンのうち2つだけが正しく表示されないことに注意してください。これを覚えて、次の仮説に移りましょう。

エラー分離

次の仮説は、HTML要素内でSVG画像をレンダリングするときにSafariにバグがあるというもの<button>です。最初の2つのボタンが表示されたときに問題が発生するため、最初のボタンを分離して、何が起こるかを確認します。



サラDraznerこのこの資料は、絶縁の重要性を説明しています。デバッグツールやバグを見つけるためのさまざまなアプローチの詳細に関心のある方は、この資料を読むことを強くお勧めします。その資料からの引用は次のとおりです。「分離は、おそらくデバッグの最も重要な基本原則です。私たちのプロジェクトで機能するコードは、さまざまなライブラリやフレームワークに分散させることができます。多くの人がプロジェクトの作業に関与している可能性があり、プロジェクトの開発に貢献した人の一部はもはやプロジェクトに取り組んでいません。問題を特定することで、エラーが表示されない原因をゆっくりと切り取ることができます。これにより、最終的に、問題の原因を見つけてそれに集中することができます。」



障害の切り分けは、「簡単なテストケース」と呼ばれることがよくあります。



ボタンを別の空白のページに移動しました（別のテストを作成しました）。つまり、このCodePenプロジェクトは、ボタンを個別に調査するために作成されました。CSSは問題の原因ではないと結論付けましたが、問題の本当の原因が見つかるまで、スタイルを無効のままにしておく必要があります。これにより、問題を可能な限り単純化することができます。





ボタンだけのページ



このプロジェクトをSafariで開くと、エラーを生成できなくなっていることがわかります。ボタンをクリックしても画像は変わりません。しかし、これは問題の許容可能な解決策とは見なされません。ただし、このCodePenプロジェクトのコードは、再現可能な最小限の例を作成するための優れた基盤を提供します。

最小限の再現可能な例

以前の2つのCodePenプロジェクトの主な違いは、ボタンの組み合わせです。考えられるすべてのボタンの組み合わせを調べると、問題paintは大きなSVGイメージでイベントが発生した場合にのみ発生し、その隣に小さなSVGイメージがページ上にあると結論付けることができます。



これを知ることで、エラーを再現し、不要な要素を取り除くことができる、最小限の再現可能な例を作成することができました。最小限の再現可能な例のおかげで、問題をより深く研究し、それを引き起こすコードの部分を正確に強調することができます。



これが問題のCodePenプロジェクトです。





最小限の再現可能な例



このプロジェクトをSafariで開き、ボタンをクリックすると、再び問題が発生します。これにより、2つのSVG要素が何らかの形で互いに競合するという仮説を立てることができます。2番目のSVG画像を最初の画像の上に重ねると、最初の画像の背景に残っているもののサイズが小さい画像のサイズと正確に一致することがわかります。





エラーの結果として歪んだ、2番目の画像が最初の画像の上に配置されている図面

分裂とルール

SVG画像のペアで表される最小数の要素を使用してバグを再現することができました。次に、問題の範囲をさらに絞り込み、問題の原因であるSVGコードの特定の部分に絞り込みます。 SVGコードを一般的な用語で理解し、それでも問題の原因を見つけたい場合は、除算と征服のアプローチを使用したバイナリツリー検索戦略を使用できます。これが講義からの別の抜粋ですCornell University Computer Scienceから：「たとえば、大きなコードを調べることから始めて、調べている部分の中央に検証コードを配置することができます。ここでエラーが発生しない場合は、そのソースがコードの後半にあることを意味します。それ以外の場合、そのソースはコードの前半にあります。」



SVGコードを調べるとき<filter>は、最初の画像の説明から要素を削除してみることができます（また<defs>、このブロックには何もないので）。要素がどのようなタスクを解決するかに興味を持ってみましょう<filter>。これについての素晴らしい説明はここにあります。つまり、次のことについて話します。「SVG画像にフィルターを適用するには、次のような特別な要素があります。<filter>..。これは基本的に、線形グラデーション、マスク、テンプレート、およびその他のグラフィック効果で機能するように設計された要素に似ています。要素が<filter>単独で表示されることはありません。これはfilter、SVGコードの属性またはurl()CSSの関数を使用して参照できるものとしてのみ使用されます。」



SVG画像では、フィルターを使用して、画像の下部に小さな内側の影を追加しています。最初の画像のコードからフィルターを削除した後、この影が消えるのを待ちます。その後も問題が解決しない場合は、SVG要素を記述するための他のコードに問題があると結論付けることができます。このテストの結果を示すために、別のCodePenプロジェクト



を作成しました。





<filter>要素を削除した結果



簡単にわかるように、問題はどこにも行きません。また、フィルターコードを削除した後も、内側の影は引き続き表示されます。しかし今、とりわけ、問題はすべてのブラウザーで発生します。これにより、エラーはボタンの説明コードの残りの部分にあると結論付けることができます。idから残りを削除すると<g filter="url(#filter0_ii)">、影が消えます。何が起きてる？



上記の要素の定義をもう一度見て、<filter>次の単語に注目してみましょう。「要素が<filter>単独で表示されることはありません。SVGの属性を使用して参照できるものとしてのみ使用されfilterます。」 （テキストの一部を強調表示しました。）



したがって、これを知っていると、2番目のSVGイメージからのフィルター宣言が最初のSVGイメージに適用され、エラーが発生したと結論付けることができます。

バグ修正

これで、問題が要素に関連していることがわかりました<filter>。フィルタは円形の内側の影を作成するために使用されるため、両方のSVG画像にこの要素があることもわかっています。2つのSVGイメージのコードを比較して、エラーを説明して修正できるかどうかを考えてみましょう。



両方の画像のコードを簡略化して、そこで何が起こっているのかを明確に確認できるようにしました。



最初のSVGイメージのコードは次のとおりです。

<svg width="46" height="46" viewBox="0 0 46 46">
  <g filter="url(#filter0_ii)">
    <!-- ... -->
  </g>
  <!-- ... -->
  <defs>
    <filter id="filter0_ii" x="0" y="0" width="46" height="46">
      <!-- ... -->
    </filter>
  </defs>
</svg>

2番目の画像のコードは次のとおりです。

<svg width="28" height="28" viewBox="0 0 28 28">
  <g filter="url(#filter0_ii)">
    <!-- ... -->
  </g>
  <!-- ... -->
  <defs>
    <filter id="filter0_ii" x="0" y="0" width="28" height="28">
      <!-- ... -->
    </filter>
  </defs>
</svg>

これらの2つのフラグメントを分析するとid=filter0_ii、同じ識別子が構成で使用されていることがわかります。 Safariは、最後にブラウザーで解析されたフィルター定義を要素（この場合は2番目の画像のフィルター）に適用します。これは、最初の画像がトリミングされるという事実につながります。元のサイズは48px、フィルターを適用した後、サイズの一部が切り取られ26pxます。idDOMプロパティには一意の値が必要です。ページidに同じものが複数ある場合、ブラウザはどれを使用する必要があるかを判断できません。また、filter各イベントの発生時にプロパティが上書きされるためpaint次に、どの定義が最初に準備されるかに応じて（ここでレース条件のようなものが発生します）、エラーが表示されるかどうかが決まります。各画像のコード



に一意の値を割り当ててid、結果を確認してみましょう。これが対応するCodePenプロジェクトです。





一意のIDを割り当てると問題が解決し



ましたSafariでプロジェクトを開いてボタンをクリックするとid、SVGイメージで使用される一意のフィルターを割り当てることで問題が解決したことを確認できます。プロジェクトがのような属性に対して一意でない値を持っていたという事実を考えるidと、問題はSafariだけでなくすべてのブラウザで発生するはずであるという結論につながります。しかし、何らかの理由で、他のブラウザー（ChromeやFirefoxを含む）はこの異常な状況をエラーなしで処理したようです。しかし、それは偶然かもしれません。

結果

それはまた別の冒険でした！プロジェクトになんらかのエラーが発生していることだけを知り始めましたが、発生することも発生しないこともありましたが、最終的にはその理由を十分に理解し、問題に対処しました。何が起こっているのかを理解していない場合、ユーザーインターフェイスコードをデバッグし、グラフィックが歪む理由を理解するのは難しい場合があります。幸いなことに、最も紛らわしいエラーの根本原因を見つけるのに役立つデバッグ戦略があります。



まず、エラーに関係のないコンポーネント（スタイル、マークアップ、動的イベントなど）をプロジェクトから削除できる仮説を立てることで、問題を単純化しました。その後、マークアップを分離し、再現可能な最小限の例を見つけました。これにより、小さなコードに集中することができました。そして最終的に、エラーを取り除くために分割と征服の戦略を使用して問題を特定しました。



この記事を読むために時間を割いてくれたすべての人に感謝します。しかし、会話を終える前に、講義で言及された別のデバッグ戦略についてお話ししましょう。コーネル大学。重要なのは、作業の過程で休憩を取り、休憩し、頭をすべての考えから解放する必要があるということです。「デバッグに時間がかかりすぎると、プログラマーは疲れます。そのような状態にある彼は無駄に働いていることがわかるかもしれません。このような状況では、休憩を取り、頭からすべてを捨てる価値があります。そしてしばらくすると、別の観点から問題を検討する必要があります。」



理解できないエラーをどのように修正しますか？