Chrome DevTools 문제 탭을 구축한 방법

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

2019년 마지막 분기에 Chrome DevTools팀은 쿠키와 관련된 DevTools의 개발자 환경을 개선하기 시작했습니다. Google Chrome 및 다른 브라우저에서 기본 쿠키 동작을 변경하기 시작했기 때문에 이는 특히 중요했습니다.

DevTools에서 이미 제공하는 도구를 연구하는 과정에서 다음과 같은 상황에 처하는 경우가 많았습니다.

콘솔 패널의 문제

🎊 콘솔에 경고와 오류 메시지가 가득 차 있었는데, 여기에는 다소 기술적인 설명이 포함되고 때로는 chromestatus.com으로 연결되는 링크가 포함되어 있었습니다. 모든 메시지가 거의 비슷해 보여 어떤 조치를 먼저 해결해야 하는지 파악하기가 어려웠습니다. 더 중요한 것은 텍스트가 DevTools 내의 추가 정보에 연결되지 않아 무슨 일이 일어났는지 파악하기가 어려웠습니다. 마지막으로, 문제를 해결하는 방법을 파악하거나 기술적 맥락을 파악하는 것은 전적으로 웹 개발자에게 맡겨진 경우가 많았습니다.

자체 애플리케이션의 메시지에도 콘솔을 사용하는 경우 브라우저의 모든 메시지 중에서 해당 메시지를 찾는 데 어려움을 겪을 수 있습니다.

사람뿐만 아니라 자동화된 프로세스도 콘솔 메시지와 상호작용하기가 어렵습니다. 예를 들어 개발자는 지속적 통합/지속적 배포 시나리오에서 Chrome Headless 및 Puppeteer를 사용할 수 있습니다. 콘솔 메시지는 문자열일 뿐이므로 개발자는 정규 표현식이나 다른 파서를 작성하여 조치 가능한 정보를 추출해야 합니다.

해결 방법: 구조화되고 실행 가능한 문제 신고

발견한 문제에 대한 더 나은 해결책을 찾기 위해 먼저 요구사항을 생각해 보고 이를 설계 문서에 수집했습니다.

YouTube의 목표는 문제를 설명하고 해결 방법을 명확하게 설명하는 방식으로 문제를 제시하는 것입니다. 설계 과정에서 각 문제에는 다음 4가지 부분이 포함되어야 한다는 점을 확인했습니다.

  • 제목
  • 설명
  • DevTools 내에서 영향을 받은 리소스로 연결되는 링크
  • 추가 안내 링크

제목은 개발자가 핵심 문제를 파악하는 데 도움이 되도록 짧고 정확해야 하며, 종종 해결 방법을 암시하기도 합니다. 예를 들어 이제 쿠키 문제는 다음과 같이 표시됩니다.

크로스 사이트 쿠키를 안전한 것으로 표시하여 크로스 사이트 컨텍스트에서 설정 허용

모든 문제에는 설명에 더 자세한 정보가 포함되어 있습니다. 설명에는 발생한 상황을 설명하고, 해결 방법에 관한 실행 가능한 조언을 제공하며, 맥락에서 문제를 이해할 수 있도록 DevTools 내의 다른 패널 링크가 포함되어 있습니다. 또한 웹 개발자가 주제에 대해 자세히 알아볼 수 있도록 web.dev의 심층 도움말 링크도 제공합니다.

각 문제에서 중요한 부분은 영향을 받는 리소스 섹션으로, DevTools의 다른 부분으로 연결되어 쉽게 추가 조사를 진행할 수 있습니다. 쿠키 문제의 경우 문제를 트리거한 네트워크 요청 목록이 있으며 요청을 클릭하면 바로 Network 패널로 이동합니다. 이 기능을 통해 편리함을 얻을 뿐만 아니라 DevTools 내에서 특정 유형의 문제를 디버그하는 데 사용할 수 있는 패널과 도구를 강화할 수 있기를 바랍니다.

'문제' 탭과 개발자 간의 상호작용을 장기적으로 고려하면 개발자 상호작용은 다음과 같이 진화할 것으로 예상됩니다.

  • 웹 개발자는 특정 문제가 처음 발생하면 도움말을 읽고 문제를 심층적으로 이해합니다.
  • 문제가 두 번째로 발생할 때 문제 설명을 통해 개발자가 문제의 내용을 상기하고 즉시 조사하여 해결 조치를 취할 수 있기를 바랍니다.
  • 문제가 몇 번 발생한 후에도 문제 제목만으로도 개발자가 문제 유형을 충분히 파악할 수 있기를 바랍니다.

개선해야 할 또 다른 중요한 측면은 집계입니다. 예를 들어 동일한 쿠키로 인해 같은 문제가 여러 번 발생한 경우 해당 쿠키를 한 번만 보고하려고 했습니다. 이렇게 하면 메시지 수를 크게 줄일 수 있을 뿐 아니라 문제의 근본 원인을 보다 빠르게 식별할 수 있습니다.

집계된 문제

구현

팀은 이러한 요구사항을 염두에 두고 새로운 기능을 구현하는 방법을 모색하기 시작했습니다. Chrome DevTools의 프로젝트는 일반적으로 다음 세 가지 영역으로 나뉩니다.

구현은 다음 세 가지 작업으로 구성되었습니다.

  • Chromium 내에서 표시하려는 정보가 있는 구성요소를 식별하고 속도나 보안을 저하시키지 않으면서 DevTools 프로토콜에서 해당 정보에 액세스할 수 있도록 해야 했습니다.
  • 그런 다음 Chrome DevTools 프로토콜 (CDP)을 설계하여 DevTools 프런트엔드와 같이 클라이언트에 정보를 노출하는 API를 정의해야 했습니다.
  • 마지막으로 DevTools 프런트엔드에 구성요소를 구현해야 했습니다. 이 구성요소는 CDP를 통해 브라우저에 정보를 요청하고, 개발자가 정보를 쉽게 해석하고 상호작용할 수 있도록 적절한 UI에 표시합니다.

브라우저 측에서는 콘솔 메시지가 처리되는 방식을 먼저 살펴봤습니다. 콘솔 메시지의 동작은 문제에 관해 염두에 두었던 것과 매우 유사하기 때문입니다. 일반적으로 CodeSearch는 이와 같은 탐색을 시작할 때 유용한 출발점이 됩니다. 이를 통해 Chromium 프로젝트의 전체 소스 코드를 온라인에서 검색하고 살펴볼 수 있습니다. 이를 통해 콘솔 메시지 구현에 대해 알아보고 문제와 관련하여 수집한 요구사항을 중심으로 동시에 더 체계적인 방식을 구축할 수 있었습니다.

이 작업은 항상 염두에 두어야 하는 모든 보안 문제로 인해 특히 어렵습니다. Chromium 프로젝트는 정보를 서로 다른 프로세스로 분리하고 제어된 통신 채널을 통해서만 통신하여 정보 유출을 방지하는 데 큰 도움이 됩니다. 문제에 민감한 정보가 포함될 수 있으므로 이러한 정보를 알 필요가 없는 브라우저 부분으로 전송하지 않도록 주의해야 합니다.

DevTools 프런트엔드

DevTools 자체는 JavaScript 및 CSS로 작성된 웹 애플리케이션입니다. 출시된 지 10년이 넘었다는 점을 제외하면 다른 웹 애플리케이션과 매우 유사합니다. 물론 백엔드는 기본적으로 브라우저에 대한 직접 통신 채널인 Chrome DevTools 프로토콜입니다.

문제 탭의 경우 먼저 사용자 스토리와 개발자가 문제를 해결하기 위해 해야 할 일을 고려했습니다. YouTube는 문제 탭을 조사의 중심적인 출발점으로 삼고 사용자를 더 자세한 정보를 보여주는 패널로 연결하는 아이디어를 중심으로 발전시켰습니다. 개발자가 Network 또는 Application 패널과 같은 다른 DevTools 구성요소와 상호작용하는 동안 Issues 탭이 열려 있을 수 있도록 DevTools 하단에 다른 탭과 함께 Issues 탭을 배치하기로 결정했습니다.

UX 디자이너는 이 점을 염두에 두고 우리의 목표를 이해하고 다음과 같은 초기 제안의 프로토타입을 제작했습니다.

프로토타입

최적의 솔루션에 대해 수없이 논의한 후, Google은 설계를 구현하고 반복적으로 결정을 반복하면서 현재의 '문제' 탭이 어떻게 표시되는지 파악하기 시작했습니다.

또 다른 중요한 요소는 문제 탭의 검색 가능성입니다. 이전에는 개발자가 구체적으로 무엇을 찾아야 하는지 알지 못하면 많은 훌륭한 Devtools 기능을 찾을 수 없었습니다. 개발자가 중요한 문제를 놓치지 않도록 하기 위해 Issues 탭에서 여러 영역의 문제를 강조 표시하기로 했습니다.

이제 문제에 중점을 두기 위해 특정 콘솔 메시지가 삭제되므로 콘솔 패널에 알림을 추가하기로 결정했습니다. DevTools 창의 오른쪽 상단에 있는 경고 및 오류 카운터에도 아이콘이 추가되었습니다.

문제 알림

마지막으로 Issues 탭은 다른 DevTools 패널에 연결할 뿐만 아니라 문제와 관련된 리소스도 Issues 탭으로 다시 연결합니다.

관련 문제

프로토콜

프런트엔드와 백엔드 간의 통신은 Chromium DevTools Protocol (CDP)이라는 프로토콜을 통해 작동합니다. CDP는 Chrome DevTools라는 웹 앱의 백엔드라고 생각할 수 있습니다. CDP는 여러 도메인으로 세분화되며 모든 도메인에는 여러 명령어와 이벤트가 포함되어 있습니다.

문제 탭의 경우 새로운 문제가 발생할 때마다 트리거되는 새로운 이벤트를 감사 도메인에 추가하기로 결정했습니다. DevTools가 아직 열리지 않은 동안 발생하는 문제도 보고할 수 있도록 감사 도메인은 최신 문제를 저장하고 DevTools가 연결되는 즉시 전달합니다. 그러면 DevTools에서 이러한 문제를 모두 수집하고 집계합니다.

또한 CDP를 사용하면 Puppeteer와 같은 다른 프로토콜 클라이언트에서 문제를 수신하고 처리할 수 있습니다. CDP를 통해 전송되는 구조화된 문제 정보를 통해 기존 연속 통합 인프라에 통합하고 간소화할 수 있기를 바랍니다. 이렇게 하면 페이지가 배포되기 전에 문제를 감지하고 해결할 수 있습니다.

향후 일정

우선 더 많은 메시지를 콘솔에서 문제 탭으로 이동해야 합니다. 특히 새롭게 추가되는 모든 문제에 대해 명확하고 실행 가능한 문서를 제공하기 위해 시간이 다소 걸릴 수 있습니다. 앞으로는 개발자가 콘솔 대신 문제 탭에서 문제를 찾을 수 있기를 바랍니다.

또한 Google은 Chromium 백엔드 이외의 다른 출처의 문제를 문제 탭에 통합하는 방법을 모색하고 있습니다.

문제 탭을 깔끔하게 유지하고 사용성을 개선할 방법을 모색하고 있습니다. 올해는 검색, 필터링, 집계 개선이 주요 목표입니다. 신고되는 문제의 수가 증가함에 따라 향후 지원 중단에 관한 문제만 표시할 수 있는 문제 카테고리를 도입하는 등 문제를 구조화하는 작업을 진행하고 있습니다. 개발자가 문제를 일시적으로 숨기기 위해 사용할 수 있는 일시중지 기능도 추가할 계획입니다.

문제를 해결할 수 있도록 페이지의 어느 부분에서 문제가 발생했는지 더 쉽게 파악할 수 있도록 하려는 것입니다. 특히 Google은 실제로 내 페이지 (예: 퍼스트 파티)에서 비롯된 문제와 사용자가 삽입한 리소스에 의해 발생하지만 직접 제어할 수는 없는 문제 (예: 광고 네트워크)를 구별하고 필터링하는 방법을 찾고 있습니다. 첫 번째 단계로 Chrome 86에서 서드 파티 쿠키 문제를 숨길 수 있습니다.

문제 탭을 개선하기 위한 제안사항이 있으면 버그를 신고하여 알려주세요.

미리보기 채널 다운로드

Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools 팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.