시도한 진정한 디버깅 전략을 사용하여 이상한 버그를 해결 한 방법은 다음과 같습니다.

마지막으로 UI 관련 버그를 만난 시간이 몇 시간 동안 머리를 긁는 것을 기억하십니까? 문제가 무작위로 발생하거나 특정 상황 (장치, 운영 체제, 브라우저, 사용자 운영)에서 발생하거나 프로젝트의 많은 프론트 엔드 기술 중 하나에 숨겨져 있습니까?

최근에 UI 버그의 복잡성을 다시 경험했습니다. 나는 최근에 Safari 브라우저의 일부 SVG에 영향을 미치는 흥미로운 버그를 수정했습니다. 나는 몇 가지 단서를 찾기 위해 비슷한 질문을 검색했지만 유용한 결과는 발견되지 않았습니다. 장애물에도 불구하고 나는 그것을 고칠 수있었습니다.

이 기사에서 다룰 유용한 디버깅 전략을 사용하여 문제를 분석합니다. 수정 사항을 제출 한 후 Chris가 게시 한 트윗을 기억했습니다.

Google을 검색 할 때 찾고자하는 기사를 작성하십시오.

- Chris Coyier (@chriscoyier) 2017 년 10 월 30 일

… 우리는 여기 있습니다.

문제 설명

진행중인 프로젝트에서 다음 버그를 찾았습니다. 이것은 온라인 웹 사이트에 있습니다.

나는 당신이 직접 확인할 수 있도록이 문제를 보여주기 위해 Codepen 예제를 만들었습니다. Safari에서 예제를 열면 버튼이로드 될 때 예상대로 보일 수 있습니다. 그러나 처음 두 개의 더 큰 버튼을 클릭하면 문제가 나타납니다.

브라우저 드로우 이벤트가 발생할 때마다 더 큰 버튼의 SVG 렌더링이 올바르지 않습니다 . 그것은 단지 잘 렸습니다. 로딩 할 때 무작위로 발생할 수 있습니다. 화면이 크기가 커지면 발생할 수도 있습니다. 상황이 무엇이든, 그것은 일어날 것입니다!

이 문제에 대한 나의 해결책은 다음과 같습니다.

먼저 환경을 고려해 봅시다

환경과 버그 조건을 이해하기 위해 프로젝트의 세부 사항을 검토하는 것이 항상 좋습니다.

• 이 특정 프로젝트는 React를 사용합니다 (그러나이 게시물에는 필요하지 않습니다).
• SVG는 React 구성 요소로 가져오고 웹 팩을 통해 HTML로 인쇄됩니다.
• SVG는 설계 도구에서 내보내며 구문 오류가 없습니다.
• SVG는 스타일 시트에서 일부 CSS를 적용합니다.
• 영향을받는 SVG는 HTML에 있습니다<div> 요소 내부.<li> 문제는 사파리에만 나타납니다 (버전 13에 언급).</li> <h3 id="심층적-인-질문"> 심층적 인 질문</h3> <p> 이 질문을 살펴보고 무슨 일이 일어나고 있는지에 대한 가정을 할 수 있는지 확인합시다. 이와 같은 버그는 복잡해질 수 있으며 우리는 무슨 일이 일어나고 있는지 즉시 알 수 없습니다. 우리는 첫 번째 시도에서 100% 정확할 필요가 없습니다. 우리는 단계별로 진행하여 가능한 원인을 좁히기 위해 테스트 할 수있는 가설을 형성하기 때문입니다.</p> <h3 id="양식-가정"> 양식 가정</h3> <p> 처음에는 CSS 문제처럼 보입니다. 일부 스타일은 호버 이벤트에 적용될 수 있으며 SVG 그래픽의 레이아웃 또는 오버플로 특성을 깨뜨릴 수 있습니다. 또한 Safari가 페이지를 렌더링 할 때마다 문제가 무작위로 발생하는 것처럼 보입니다 (화면 크기 조정, 호버링, 클릭 등).</p> <p> 단순하고 가장 명백한 경로부터 시작하고 CSS가 문제의 원인이라고 가정 해 봅시다. 특정 스타일이 SVG 요소 (예 : Flex 레이아웃)에 적용될 때 SVG 렌더링이 잘못되게하는 Safari 브라우저의 버그 가능성을 고려할 수 있습니다.</p> <p> 그렇게함으로써 우리는 <strong>가설을 형성합니다</strong> . 다음 단계는 가설을 확인하거나 반박하는 테스트를 설정하는 것입니다. 각 테스트 결과는 버그에 대한 새로운 사실을 생성하고 추가 가정을 형성하는 데 도움이됩니다.</p> <h3 id="문제를-단순화하십시오"> 문제를 단순화하십시오</h3> <p> <strong>문제 단순화</strong> 라는 디버깅 전략을 사용하여 문제를 정확히 찾아 낼 것입니다. Cornell의 CS 강의는이 전략을 "버그와 관련이없는 코드의 일부를 점차적으로 제거하는 방법"이라고 설명했습니다.</p> <p> 문제가 CSS에 있다고 가정함으로써, 우리는 결국 문제를 정확히 파악하거나 방정식에서 CSS를 제거하여 가능한 원인의 수와 문제의 복잡성을 줄일 수 있습니다.</p> <p> 우리의 가정을 확인하려고 노력합시다. 브라우저 비 브라우저 스타일 시트를 일시적으로 제외하면 문제가 발생하지 않아야합니다. 프로젝트에서 다음 코드 줄을 댓글을 달아서 소스 코드 에서이 작업을 수행합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> CSS가 포함되지 않은 이러한 요소를 보여주기 위해 편리한 CodePen 예제를 만들었습니다. REACT에서는 SVG 그래픽을 구성 요소로 가져오고 있으며 웹 팩을 사용하여 HTML에 상환됩니다.</p> <p> 이 펜을 사파리로 열고 버튼을 클릭하면 여전히이 문제가 있습니다. 페이지가로드 될 때 여전히 발생하지만 CodePen에서는 버튼을 클릭하여 강제해야합니다. 우리는 CSS가 범인이 아니라고 결론을 내릴 수 있지만,이 경우 5 개의 버튼 중 2 개만 문제가 발생한다는 것을 알 수 있습니다. 이것을 기억하고 다음 가정으로 넘어 갑시다.</p> <h3 id="격리-문제"> 격리 문제</h3> <p> 우리의 다음 가정은 Safari가 HTML에 있다고 말합니다<code><div> 요소 내부에서 SVG를 렌더링 할 때 버그가 있습니다. 첫 두 버튼에서 문제가 발생하므로 <strong>첫 번째 버튼을 격리</strong> 하고 어떤 일이 발생하는지 확인합니다.<p> Sarah Drasner는 격리의 중요성을 설명하고, 디버깅 도구 및 기타 방법에 대해 더 많이 배우려면 기사를 읽는 것이 좋습니다.</p> <blockquote><p> 격리는 아마도 모든 디버깅에서 가장 강력한 핵심 원칙 일 것입니다. 우리의 코드 기반은 다양한 라이브러리, 프레임 워크를 사용하여 거대 할 수 있으며, 더 이상 프로젝트에 참여하지 않는 많은 기여자들을 포함 할 수 있습니다. 검역 문제는 문제에서 불필요한 부품을 천천히 제거하여 솔루션에만 집중할 수 있도록 도와줍니다.</p></blockquote> <p> 또한 종종 "단순화 된 테스트 사례"라고도합니다.</p> <p> 이 버튼을 별도의 빈 테스트 경로 (빈 페이지)로 옮겼습니다. 상태를 보여주기 위해 다음 코드펜을 만들었습니다. CSS가 문제의 원인이 아니라고 결론을 내리더라도, 문제를 가능한 한 단순화하기 위해 버그의 실제 원인을 찾기 전에 버그를 배제해야합니다.</p> <p> 이 펜을 사파리로 열면 <strong>더 이상 문제를 재현 할 수 없으며</strong> <strong>버튼을 클릭 한 후 예상대로 SVG 그래프가 표시됩니다</strong> . <strong>우리는이 변경을 허용 가능한 버그 수정으로 간주해서는 안되지만</strong> , 최소한의 재현 가능한 예를 만들기위한 좋은 출발점을 제공합니다.</p> <h3 id="최소-재현성-예"> 최소 재현성 예</h3> <p> 처음 두 예제의 주요 차이점은 버튼 조합입니다. 가능한 모든 조합을 시도한 후, 우리는이 문제가 같은 페이지의 작은 SVG 그래프 옆에있는 더 큰 SVG 그래프에 대한 도면 이벤트가 발생할 때만 발생한다고 결론을 내릴 수 있습니다.</p> <p> 우리는 불필요한 요소없이 버그를 재현 할 수있는 <strong>최소한의 재현 가능한 예제를</strong> 만들었습니다. 가장 작은 재현 가능한 예제를 사용하여 문제를보다 자세히 연구하고 문제를 일으키는 코드의 일부를 정확히 정확히 정확히 지적 할 수 있습니다.</p> <p> 가장 작은 재현 가능한 예를 보여주기 위해 다음 코드펜을 만들었습니다.</p> <p> 이 데모를 Safari에서 열고 버튼을 클릭하면 문제가 발생하고 있음을 알 수 있으며 두 SVG가 서로 상충되고 있다는 가정을 형성합니다. 첫 번째 그림에서 두 번째 SVG 그림을 오버레이하면 첫 번째 SVG 그림에서 자른 원의 크기가 작은 SVG 그림의 정확한 크기와 일치 함을 알 수 있습니다.</p> <h3 id="나누고-치료하십시오"> 나누고 치료하십시오</h3> <p> 우리는 문제를 두 개의 SVG 그래픽의 조합으로 좁혔습니다. 이제 문제를 문제를 일으키는 특정 SVG 코드로 문제를 좁힐 것입니다. SVG 코드에 대한 기본적인 이해가 있고 문제를 정확히 파악하려면 <strong>이진 트리 검색</strong> 전략을 사용하고 분열 및 정복 접근 방식을 채택 할 수 있습니다. Cornell University의 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 속성을 사용하여 참조하는 것 입니다.

  (내 강조)

  따라서 두 번째 SVG 그래프의 필터 정의가 첫 번째 SVG 그래프에 적용되어 오류로 이어진다 고 결론을 내릴 수 있습니다.

  문제를 해결하십시오

  우리는 이제 문제를 알고 있습니다<filter></filter> 속성 관련. 우리는 또한 두 SVG에 filter 속성이 있다는 것을 알고 있습니다. 왜냐하면 그들은 원에 내면의 그림자를 만들기 위해 사용하기 때문입니다. 이 두 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>

  다음 코드 스 니펫은 두 번째 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를 두 번째 필터의 크기 (46px ~ 28px)로 잘게 만듭니다. ID 속성은 DOM에서 고유 한 값을 가져야합니다. 페이지에 두 개 이상의 ID 속성이 있으면 브라우저는 적용 할 참조를 이해할 수 없으며, 문제가 무작위로 나타나게하는 경주 조건에 따라 각 Draw 이벤트에서 필터 속성이 재정의됩니다.

  각 SVG 그래프에 고유 한 ID 속성 값을 할당하여 문제가 해결되는지 확인해 봅시다.

  Safari에서 CodePen 예제를 열고 버튼을 클릭하면 각 SVG 그래프 파일에서이를 확인하여 볼 ​​수 있습니다.<filter></filter> 속성 고유 ID를 할당 하고이 문제를 수정했습니다 . ID와 같은 속성에 대한 비 유니 값이 있다는 사실을 고려하면 이 문제가 모든 브라우저에 존재해야 함을 의미합니다. 어떤 이유로, 다른 브라우저 (Chrome 및 Firefox 포함)는 버그 없이이 에지 케이스를 처리하는 것처럼 보이지만 우연의 일치 일 수도 있습니다.

  요약

  이것은 꽤 긴 여행입니다! 우리는 거의 무작위로 무작위 문제를 무시하고 그것을 완전히 이해하고 고치는 것으로 간다. 문제의 근본 원인이 불분명하거나 복잡한 경우 UI를 디버깅하고 시각적 버그를 이해하는 것은 어려울 수 있습니다. 다행히도 유용한 디버깅 전략이 우리를 도울 수 있습니다.

  먼저 가정을 형성하여 문제를 단순화하여 문제와 관련이없는 구성 요소 (스타일, 태그, 동적 이벤트 등)를 제거하는 데 도움이됩니다. 그 후, 우리는 마크 업을 격리 하고 가장 작은 재현 가능한 예를 발견하여 단일 블록의 코드에 집중할 수있었습니다. 마지막으로, 우리는 분할과 정복 전략을 사용하여 문제를 정확히 찾아서 고쳤습니다.

  시간을 내어이 기사를 읽어 주셔서 감사합니다. 떠나기 전에 Cornell의 CS 강의에서 다루는 마지막 디버깅 전략을 남겨두고 싶습니다.

  디버깅 시도 사이를 휴식을 취하고 휴식을 취하고 생각을 정리 하십시오.

  버그에 너무 많은 시간을 소비하면 프로그래머는 피곤해지고 디버깅하면 역효과를 낼 수 있습니다. 휴식을 취하고 생각을 정리하십시오. 휴식 후에는 다른 관점에서 이것에 대해 생각하십시오.

  참조하십시오

  • Cornell University CS 312 강의 26 - 디버그 기술
  • 디버깅 팁 및 팁
  • 단순화 된 테스트 사례
  • SVG 필터 101