DevTools의 새로운 기능: 크로스 브라우저 에디션

브라우저 개발자 도구는 항상 새롭고 향상된 기능이 추가되면서 계속 발전하고 있습니다. 특히 둘 이상의 브라우저를 사용할 때 추적하기가 어렵습니다. 많은 것을 제공함에도 불구하고 압도당하고 새로운 기능을 따라잡는 대신 이미 알고 있는 기능을 사용하는 것은 놀라운 일이 아닙니다.

그러나 그들 중 일부는 우리를 훨씬 더 생산적으로 만들 수 있기 때문에 유감입니다.

따라서 이 기사의 목표는 Chrome, Microsoft Edge, Firefox 및 Safari의 일부 최신 기능에 대한 인식을 높이는 것입니다. 바라건대, 그것은 당신이 그것들을 시도하고 싶게 만들고 다음에 브라우저 관련 문제를 디버그해야 할 때 더 편안해지는 데 도움이 될 것입니다.

라고 말하면서 바로 들어가 보겠습니다.

Chrome 개발자 도구

Chrome DevTools 팀은 (현재 13년 된) 코드베이스를 현대화하기 위해 열심히 노력해 왔습니다. 그들은 빌드 시스템을 개선하고, TypeScript로 마이그레이션하고, 새로운 WebComponents를 도입하고, 테마 인프라를 재구축하는 등 많은 일에 바빴습니다. 결과적으로 도구를 확장하고 변경하기가 더 쉬워졌습니다.

그러나 이 덜 사용자 대면 작업 외에도 팀은 많은 기능을 제공했습니다. 여기에서 CSS 디버깅과 관련된 몇 가지를 살펴보겠습니다.

스크롤 스냅

CSS 스크롤 스냅은 웹 개발자에게 스크롤 가능한 컨테이너가 스크롤을 중지하는 위치를 제어하는 ​​방법을 제공합니다. 예를 들어 브라우저가 자동으로 스크롤 가능한 컨테이너 내에서 각 사진을 깔끔하게 배치하기를 원하는 긴 사진 목록에 유용한 기능입니다.

스크롤 스냅에 대해 자세히 알아보려면 이 MDN 설명서를 읽고 여기에서 Adam Argyle의 데모를 살펴보세요.

스크롤 스냅의 주요 속성은 다음과 같습니다.

• 브라우저에 스냅이 발생하는 방향과 발생 방식을 알려주는 scroll-snap-type ;
• scroll-snap-align , 브라우저에 스냅할 위치를 알려줍니다.

Chrome DevTools는 다음과 같은 주요 속성을 디버그하는 데 도움이 되는 새로운 기능을 도입했습니다.

• 요소가 scroll-snap-type 을 사용하여 스크롤 스냅을 정의하는 경우 요소 패널 옆에 배지가 표시됩니다.

• 스크롤 스냅 배지를 클릭하여 새 오버레이를 활성화할 수 있습니다. 그렇게 하면 페이지에서 몇 가지 사항이 강조 표시됩니다.
  • 스크롤 컨테이너,
  • 컨테이너 내에서 스크롤되는 항목,
  • 항목이 정렬되는 위치(파란색 점으로 표시됨).

이 오버레이를 사용하면 주변을 스크롤한 후 사물이 제자리에 고정되는지 여부와 방식을 쉽게 이해할 수 있습니다. 이것은 예를 들어 항목에 배경이 없고 ​​항목 사이의 경계가 잘 보이지 않을 때 매우 유용할 수 있습니다.

스크롤 스냅이 새로운 CSS 기능은 아니지만 채택률이 다소 낮고(chromestatus.com에 따르면 4% 미만) 사양이 변경되었기 때문에 모든 브라우저에서 동일한 방식으로 지원하지 않습니다.

이 DevTools 기능을 통해 사람들이 더 많이 사용하고 궁극적으로 사이트에 채택하기를 바랍니다.

컨테이너 쿼리

최근 몇 년 동안 웹 개발을 해본 적이 있다면 컨테이너 쿼리에 대해 들어본 적이 있을 것입니다. 이것은 가장 오랫동안 가장 많이 요청된 CSS 기능 중 하나였으며 브라우저 제조업체와 사양 작성자가 해결해야 하는 매우 복잡한 문제였습니다.

컨테이너 쿼리가 무엇인지 모른다면 먼저 Stephanie Eckles의 Primer On CSS Container Queries 기사를 살펴보는 것이 좋습니다.

간단히 말해서 개발자가 컨테이너의 크기에 따라 요소의 레이아웃과 스타일을 정의하는 방법입니다. 이 기능은 재사용 가능한 구성 요소를 만들 때 큰 이점이 있습니다. (미디어 쿼리가 적합한 뷰포트 크기에만 적용되는 것이 아니라) 사용되는 위치에 맞게 구성할 수 있기 때문입니다.

다행히 이 영역에서 상황이 바뀌고 있으며 Chromium은 이제 컨테이너 쿼리를 지원하고 Chrome DevTools 팀은 더 쉽게 시작할 수 있는 도구를 추가하기 시작했습니다.

컨테이너 쿼리는 아직 Chromium에서 기본적으로 활성화되어 있지 않으며(활성화하려면 chrome://flags로 이동하여 "컨테이너 쿼리"를 검색) 활성화하는 데 약간의 시간이 걸릴 수 있습니다. 또한 DevTools의 디버깅 작업은 아직 초기 단계입니다. 그러나 일부 초기 기능은 이미 상륙했습니다.

• @container at-rule에서 가져온 스타일이 있는 DevTools의 요소를 선택하면 이 규칙이 요소 패널의 스타일 사이드바에 나타납니다. 이는 DevTools에서 미디어 쿼리 스타일이 표시되는 방식과 유사하며 특정 스타일의 출처를 쉽게 알 수 있습니다.

위의 스크린샷에서 볼 수 있듯이 스타일 사이드바에는 현재 요소에 적용되는 2개의 규칙이 표시됩니다. 맨 아래는 .media 요소에 적용되며 기본 스타일을 제공합니다. 그리고 맨 위는 컨테이너가 300px보다 좁을 때만 적용되는 @container (max-width:300px) 컨테이너 쿼리에 중첩됩니다.

• 또한 @container at-rule 바로 위에 있는 스타일 창에는 규칙이 해석되는 요소에 대한 링크가 표시되고 그 위에 마우스를 놓으면 해당 크기에 대한 추가 정보가 표시됩니다. 이렇게 하면 컨테이너 쿼리가 일치하는 이유를 정확히 알 수 있습니다.

Chrome DevTools 팀은 이 기능에 대해 적극적으로 작업하고 있으며 앞으로 더 많은 것을 기대할 수 있습니다.

크롬 협업

다른 브라우저에 있는 기능으로 들어가기 전에 Chromium에 대해 잠시 이야기해 보겠습니다. Chromium은 Chrome, Edge, Brave 및 기타 브라우저를 기반으로 하는 오픈 소스 프로젝트입니다. 이는 이러한 모든 브라우저가 Chromium의 기능에 액세스할 수 있음을 의미합니다.

이 프로젝트에 가장 적극적으로 기여한 두 사람은 Google과 Microsoft이며 DevTools와 관련하여 그들은 제가 지금 살펴보고 싶은 몇 가지 흥미로운 기능에 대해 협력했습니다.

CSS 레이아웃 디버깅 도구

몇 년 전 Firefox는 이 분야에서 혁신을 이루었고 최초의 그리드 및 플렉스박스 검사기를 출시했습니다. 이제 Chromium 기반 브라우저를 통해 웹 개발자가 그리드와 플렉스박스를 쉽게 디버그할 수 있습니다.

이 협업 프로젝트에는 Microsoft와 Google의 엔지니어, 제품 관리자 및 디자이너가 참여하여 공유 목표를 위해 작업했습니다(내 BlinkOn 토크에서 프로젝트 자체에 대해 자세히 알아보기).

무엇보다도 DevTools에는 이제 다음과 같은 레이아웃 디버깅 기능이 있습니다.

• 페이지에서 여러 그리드 및 플렉스 레이아웃을 강조 표시하고 그리드 라인 이름이나 번호, 그리드 영역 등을 보려면 사용자 정의하십시오.

• 다양한 속성을 시각적으로 사용할 수 있는 Flex 및 그리드 편집기.

• CSS 자동 완성의 정렬 아이콘을 사용하면 속성과 값을 더 쉽게 선택할 수 있습니다.

• 페이지 속성이 적용되는 부분을 이해하려면 속성 호버를 강조 표시합니다.

이에 대한 자세한 내용은 Microsoft 및 Google 설명서 사이트에서 읽을 수 있습니다.

현지화

이것은 Microsoft와 Google이 관련된 또 다른 협업 프로젝트로, 현재 모든 Chromium 기반 DevTools를 영어 이외의 언어로 번역할 수 있습니다.

원래 DevTools를 현지화할 계획은 없었습니다. 이는 엄청난 노력이었음을 의미합니다. 여기에는 전체 코드베이스를 살펴보고 UI 문자열을 지역화할 수 있도록 만드는 작업이 포함되었습니다.

결과는 그만한 가치가 있었습니다. 영어가 모국어가 아니고 다른 언어로 DevTools를 사용하는 것이 더 편하다면 설정( F1 )으로 이동하여 언어 드롭다운을 찾으세요.

다음은 Chrome DevTools에서 어떻게 보이는지 스크린샷입니다.

Edge가 일본어로 어떻게 표시되는지는 다음과 같습니다.

Edge DevTools

Microsoft는 2년 이상 전에 Edge를 개발하기 위해 Chromium으로 전환했습니다. 당시 웹 커뮤니티에서 많은 토론을 일으켰지만 그 이후로 그것에 대해 많이 작성되거나 언급되지 않았습니다. Edge에서 작업하는 사람들(DevTools 포함)은 바쁘지만 이제 브라우저에는 고유한 기능이 많이 있습니다.

Chromium 오픈 소스 프로젝트를 기반으로 한다는 것은 Edge가 모든 기능과 버그 수정의 이점을 누릴 수 있음을 의미합니다. 실제로 Edge 팀은 Chromium 리포지토리의 변경 사항을 자체 리포지토리에 수집합니다.

그러나 지난 1년 정도 동안 팀은 Edge 사용자의 요구와 피드백을 기반으로 Edge 관련 기능을 만들기 시작했습니다. 이제 Edge DevTools에는 일련의 고유한 기능이 있습니다.

도구 열기, 닫기 및 이동

거의 30개의 서로 다른 패널이 있는 DevTools는 모든 브라우저에서 정말 복잡한 소프트웨어입니다. 그러나 실제로 모든 도구에 동시에 액세스할 필요는 없습니다. 실제로 DevTools를 처음 시작할 때 몇 개의 패널만 표시되며 나중에 추가할 수 있습니다.

반면에 기본적으로 표시되지 않는 패널은 사용자에게 정말 유용하더라도 찾기가 어렵습니다.

Edge는 이 문제를 해결하기 위해 작지만 강력한 3가지 기능을 추가했습니다.

• 더 이상 필요하지 않은 도구를 닫는 탭의 닫기 버튼,
• 도구를 열려면 탭 표시줄 끝에 있는 + (더하기) 버튼,
• 도구를 이동하는 상황에 맞는 메뉴 옵션.

다음 GIF는 Edge에서 기본 및 서랍 영역 모두에서 도구를 닫고 여는 방법을 보여줍니다.

기본 영역과 서랍 영역 간에 도구를 이동할 수도 있습니다.

• 상단의 탭을 마우스 오른쪽 버튼으로 클릭하면 "맨 아래로 이동" 항목이 표시되고,
• 서랍의 탭을 마우스 오른쪽 버튼으로 클릭하면 "맨 위로 이동" 항목이 표시됩니다.

DevTools 도구 설명으로 상황별 도움말 얻기

초보자와 노련한 개발자 모두 DevTools에 대해 모두 아는 것은 어렵습니다. 앞서 언급했듯이 패널이 너무 많아서 모두 알고 있을 것 같지 않습니다.

이 문제를 해결하기 위해 Edge는 도구에서 Microsoft 웹 사이트의 설명서로 직접 이동하는 방법을 추가했습니다.

이 새로운 도구 설명 기능은 도구를 덮는 토글 가능한 오버레이로 작동합니다. 활성화하면 패널이 강조 표시되고 각 패널에 대해 문서 링크와 함께 상황에 맞는 도움말이 제공됩니다.

다음과 같은 3가지 방법으로 도구 설명을 시작할 수 있습니다.

• Windows/Linux에서 Ctrl + Shift + H 키보드 단축키 사용(Mac에서는 Cmd + Shift + H )
• 기본( ... ) 메뉴로 이동한 다음 도움말로 이동하여 "DevTools 도구 설명 전환"을 선택합니다.
• 명령 메뉴를 사용하고 "도구 설명"을 입력합니다.

색상 사용자 정의

코드 편집 환경에서 개발자는 코드를 더 읽기 쉽고 보기 좋게 만들기 위해 색상 테마를 사용자 지정하는 것을 좋아합니다. 웹 개발자도 DevTools에서 상당한 시간을 보내기 때문에 사용자 지정 가능한 색상도 사용하는 것이 좋습니다.

Edge는 이미 사용 가능한 어둡고 밝은 테마 외에도 DevTools에 여러 가지 새로운 테마를 추가했습니다. 총 9개의 새로운 테마가 추가되었습니다. 이는 VS Code에서 제공되므로 이 편집기를 사용하는 사람들에게 친숙할 것입니다.

설정으로 이동( F1 또는 오른쪽 상단 모서리에 있는 톱니바퀴 아이콘 사용)하거나 명령 메뉴를 사용하고 theme 을 입력하여 사용하려는 테마를 선택할 수 있습니다.

파이어폭스 개발도구

Chrome DevTools 팀과 마찬가지로 Firefox DevTools에서 작업하는 사람들은 코드베이스 현대화를 목표로 하는 대대적인 아키텍처 업데이트로 분주했습니다. 또한, Mozilla가 최근에 다시 집중해야 했기 때문에 그들의 팀은 요즘 상당히 작습니다. 그러나 이것이 그들이 새로운 기능을 추가할 시간이 적었음을 의미하더라도 그들은 여전히 ​​내가 지금 설명할 몇 가지 정말 흥미로운 기능을 출시했습니다.

원하지 않는 스크롤바 디버깅

"이 스크롤바는 어디에서 왔습니까?"라고 자문해 본 적이 있습니까? 저도 알고 있습니다. 이제 Firefox에는 바로 이 문제를 디버깅할 수 있는 도구가 있습니다.

Inspector 패널에서 스크롤하는 모든 요소 옆에는 scroll 배지가 있습니다. 이는 깊이 중첩된 DOM 트리를 처리할 때 이미 유용합니다. 또한 이 배지를 클릭하여 스크롤 막대를 표시한 요소를 표시할 수 있습니다.

여기에서 더 많은 문서를 찾을 수 있습니다.

탭 순서 시각화

키보드로 웹 페이지를 탐색하려면 tab 키를 사용하여 포커스 가능한 요소를 하나씩 이동해야 합니다. tab 을 사용하는 동안 포커스 가능한 요소가 포커스되는 순서는 사이트 접근성의 중요한 측면이며 잘못된 순서는 사용자에게 혼란을 줄 수 있습니다. 최신 레이아웃 CSS 기술을 사용하면 웹 개발자가 페이지의 요소를 매우 쉽게 재정렬할 수 있으므로 이에 주의하는 것이 특히 중요합니다.

Firefox에는 접근성 트리에 대한 정보를 제공하고 다양한 접근성 문제를 자동으로 찾아 보고하며 다양한 색각 결함을 시뮬레이션할 수 있는 유용한 접근성 검사기 패널이 있습니다.

이러한 기능 외에도 패널은 이제 포커스 가능한 요소의 탭 순서를 표시하는 새 페이지 오버레이를 제공합니다.

활성화하려면 도구 모음에서 "탭 순서 표시" 확인란을 사용하십시오.

여기에서 더 많은 문서를 찾을 수 있습니다.

완전히 새로운 성능 도구

성능 최적화만큼 도구에 의존하는 웹 개발 영역은 많지 않습니다. 이 영역에서 Chrome DevTools의 성능 패널은 동급 최고입니다.

지난 몇 년 동안 Firefox 엔지니어는 브라우저 자체의 성능을 개선하는 데 주력해 왔으며 이를 돕기 위해 성능 프로파일러 도구를 구축했습니다. 이 도구는 원래 엔진 네이티브 코드를 최적화하기 위해 제작되었지만 처음부터 JavaScript 성능 분석도 지원했습니다.

현재 이 새로운 성능 도구는 시험판 버전(Nightly 및 Developer Edition)의 이전 Firefox DevTools 성능 패널을 대체합니다. 기회가 있을 때 한 번 시도해 보세요.

무엇보다도 새로운 Firefox 프로파일러는 기록된 사용 사례의 성능을 개선하는 데 도움이 될 수 있도록 다른 사람과 프로필 공유를 지원합니다.

여기에서 관련 문서를 읽고 GitHub 리포지토리에서 프로젝트에 대해 자세히 알아볼 수 있습니다.

사파리 웹 인스펙터

마지막으로 최신 Safari 기능 몇 가지를 살펴보겠습니다.

Apple의 소규모 팀은 도구에 대한 광범위한 개선 및 수정 작업으로 매우 바쁘게 지냈습니다. Safari Web Inspector에 대해 자세히 알아보면 iOS 또는 tvOS 기기에서 사이트를 디버깅할 때 생산성을 높일 수 있습니다. 또한 다른 DevTools에는 없고 많은 사람들이 알지 못하는 많은 기능이 있습니다.

CSS 그리드 디버깅

Firefox, Chrome 및 Edge(및 모든 Chromium 기반 브라우저)에는 CSS 그리드를 시각화하고 디버깅하기 위한 전용 도구가 있지만 Safari는 이 도구가 없는 마지막 주요 브라우저였습니다. 자, 이제 됩니다!

기본적으로 Safari는 이제 이 영역에서 다른 브라우저의 DevTools와 동일한 기능을 갖습니다. 이것은 한 브라우저에서 다음 브라우저로 쉽게 이동하면서도 여전히 생산적이라는 의미이므로 훌륭합니다.

• 그리드 배지는 그리드를 빠르게 찾을 수 있도록 요소 패널에 표시됩니다.
• 배지를 클릭하면 페이지의 시각화 오버레이가 전환됩니다.
• 이제 사이드바에 새로운 레이아웃 패널이 표시됩니다. 그리드 오버레이를 구성하고 페이지의 모든 그리드 목록을 보고 오버레이를 토글할 수 있습니다.

하지만 Safari의 구현에서 흥미로운 점은 도구의 성능 측면을 제대로 구현했다는 것입니다. 한 번에 여러 오버레이를 활성화하고 성능 문제를 전혀 일으키지 않고 페이지를 스크롤할 수 있습니다.

또 다른 흥미로운 점은 Safari가 Firefox와 마찬가지로 3개의 창으로 구성된 요소 패널을 도입했다는 것입니다. 이를 통해 DOM, 선택한 요소에 대한 CSS 규칙 및 레이아웃 패널을 한 번에 모두 볼 수 있습니다.

이 WebKit 블로그 게시물에서 CSS Grid Inspector에 대해 자세히 알아보십시오.

다양한 디버거 개선 사항

Safari에는 별도의 리소스 및 디버거 패널이 있었습니다. 코드를 디버깅할 때 필요한 모든 것을 더 쉽게 찾을 수 있도록 단일 소스 패널로 병합했습니다. 또한 이는 많은 사람들이 사용하는 Chromium과 도구의 일관성을 높여줍니다.

공통 작업에 대한 일관성은 브라우저 간 세계에서 중요합니다. 웹 개발자는 이미 여러 브라우저에서 테스트해야 하므로 다른 브라우저의 DevTools를 사용할 때 완전히 새로운 패러다임을 배워야 하는 경우 필요 이상으로 일이 더 어려워질 수 있습니다.

그러나 Safari는 최근 다른 DevTools에는 없는 혁신적인 기능을 디버거에 추가하는 데 중점을 두었습니다.

부트스트랩 스크립트:
Safari를 사용하면 페이지의 스크립트보다 먼저 실행되도록 보장되는 JavaScript 코드를 작성할 수 있습니다. 이것은 예를 들어 debugger 문을 추가하거나 로깅을 위한 내장 함수를 계측하는 데 매우 유용합니다.

새로운 중단점 구성:
모든 브라우저는 조건부 중단점, DOM 중단점, 이벤트 중단점 등과 같은 여러 유형의 중단점을 지원합니다.

Safari는 최근에 광범위하게 구성할 수 있는 모든 방법을 제공하여 전체 중단점 유형 제품군을 개선했습니다. 이 새로운 중단점 기능으로 다음을 결정할 수 있습니다.

• 특정 조건이 true일 때만 중단점에 도달하려면
• 중단점에서 실행을 전혀 일시 중지하거나 일부 코드를 실행하려면
• 또는 오디오 신호음을 재생하여 일부 코드 행이 실행되었음을 알 수 있습니다.

queryInstances 및 queryHolders 콘솔 기능:
이 두 기능은 사이트에서 많은 JavaScript 개체를 사용하기 시작할 때 정말 유용합니다. 어떤 상황에서는 이러한 개체 간의 종속성을 추적하기 어려워지고 메모리 누수도 나타나기 시작할 수 있습니다.

Safari에는 메모리 힙 스냅샷을 탐색할 수 있도록 하여 이러한 문제를 해결하는 데 도움이 되는 메모리 도구가 있습니다. 그러나 때로는 어떤 클래스나 개체가 문제를 일으키는지 이미 알고 있고 어떤 인스턴스가 존재하거나 무엇을 참조하는지 찾고 싶을 때가 있습니다.

Animal 이 애플리케이션의 JavaScript 클래스인 경우 queryInstances(Animal) 는 모든 인스턴스의 배열을 반환합니다.

foo 가 애플리케이션의 객체인 경우 queryHolders(foo) 는 foo 에 대한 참조가 있는 다른 모든 객체의 배열을 반환합니다.

마무리 생각

이러한 기능이 유용하기를 바랍니다. 여러 브라우저를 사용하고 DevTools에 익숙해지는 것이 좋습니다. 다른 DevTools에 더 익숙해지면 정기적으로 사용하지 않는 브라우저에서 문제를 디버그해야 할 때 유용할 수 있습니다.

브라우저를 만드는 모든 회사에는 DevTools에서 적극적으로 작업하는 팀이 있습니다. 그들은 그것들을 더 낫고 덜 버그가 있고 더 강력하게 만드는 데 투자했습니다. 이 팀은 올바른 것을 구축하기 위해 귀하의 피드백 에 의존합니다. 어떤 문제에 직면했는지 또는 어떤 기능이 부족했는지에 대해 듣지 않고 구축할 대상에 대해 올바른 결정을 내리기가 더 어렵습니다.

DevTools 팀에 ​​버그를 보고하면 수정 사항이 나왔을 때 도움이 될 뿐만 아니라 동일한 문제에 직면한 많은 다른 사람들에게도 도움이 될 수 있습니다.

Microsoft, Mozilla, Apple 및 Google의 DevTools 팀은 일반적으로 규모가 상당히 작고 많은 피드백을 받기 때문에 문제를 보고한다고 해서 빠르게 수정된다는 의미는 아니지만 도움이 되며 해당 팀 이 경청 하고 있습니다.

다음은 버그를 보고하거나 질문하거나 기능을 요청할 수 있는 몇 가지 방법입니다.

• 파이어폭스 개발도구
  • Firefox는 Bugzilla를 공개 버그 추적기로 사용하며 누구든지 버그를 보고하거나 새 항목을 만들어 새로운 기능을 요청할 수 있습니다. 로그인하려면 GitHub 계정만 있으면 됩니다.
  • Twitter에서 @FirefoxDevTools 계정을 사용하거나 Mozilla 채팅에 로그인하여 팀에 연락할 수 있습니다(채팅에 대한 문서는 여기에서 확인).
• 사파리 웹 인스펙터
  • Safari는 또한 WebKit 버그에 대해 공개 버그 추적을 사용합니다. 다음은 버그를 검색하고 새로운 버그를 보고하는 방법에 대한 문서입니다.
  • Twitter에서 @webkit을 사용하여 팀에 연락할 수도 있습니다.
  • 마지막으로 피드백 지원을 사용하여 Safari 및 Safari Web Inspector에 대한 버그를 알릴 수도 있습니다.
• Edge DevTools
  • 문제를 보고하거나 기능을 요청하는 가장 쉬운 방법은 DevTools(도구의 오른쪽 상단 모서리에 있는 작은 막대 모양)의 피드백 버튼을 사용하는 것입니다.
  • 팀에 질문하는 것은 Twitter에서 @EdgeDevTools 계정을 언급하는 것이 가장 좋습니다.
• 크롬 개발자 도구
  • 팀은 devtools-dev 메일링 리스트와 트위터 @ChromeDevTools에 대한 피드백을 수신합니다.
• 크롬
  • Chromium은 Google Chrome과 Microsoft Edge(및 기타)를 지원하는 오픈 소스 프로젝트이므로 Chromium의 버그 추적기에서 문제를 보고할 수도 있습니다.

읽어주셔서 감사합니다!