* 이 글은 medium에 작성된 yasassri의 글을 번역하였습니다.

반드시 경험해 보아야 할 Google Chrome 기능들

크롬 개발 도구는 웹 개발자들 사이에서 가장 많이 사용되는 도구 중 하나이다. 하지만 대부분의 개발자들은 모르는 몇 가지 놀라운 기능들을 가지고 있다.

이 포스팅에서는 모든 개발자가 시도해야 하는 상위 5가지 크롬 DevTools 기능에 대해 설명할 것이다.

1. CSS overview — 모든 스타일

CSS overview는 웹 페이지에 사용되는 모든 유형의 요약을 제공한다.

여기에는 색상, 폰트, 미디어 쿼리 및 사용되지 않는 선언에 대한 자세한 정보가 포함된다. 이 기능은 UI를 CSS로 수정할 때 유용하며 더 이상 색상 선택기와 같은 타사 도구를 사용할 필요가 없다.

이 기능을 활성화하는 방법

• Google Chrome에서 보기 -> 개발자 -> 개발자 도구를 클릭한다.
• 설정을 연다.
• 엘리먼트 탭을 클릭한다.
• CSS overview를 활성화 한다. 
• DevTools 창을 닫고 다시 연다.
• 새로운 탭이 DevTools에  CSS Overview 로 나타난다.

이 CSS overview 패널은 실험적인 기능이지만 일단 사용하면 절대 끄지 않을 것이다. 이 기능은 매우 유용하며 CSS 작업을 훨씬 쉽게 해준다.

2. CSP 위반 – 가능한 보안 취약성에 대해 경고

Chrome DevTools CSP 위반 중단점은 CSP 위반과 관련된 가능한 예외를 포착하여 코드에 표시한다.

이 기능을 활성화하면 프로그램에 보안 레이어가 추가되고 크로스 사이트 스크립팅(XSS)과 같은 취약성이 줄어든다.

이 기능을 활성화하는 방법

개발자는 아래에 언급된 대로 “Sources” 탭에서 CSP 위반 중단점을 활성화할 수 있다.

• Chrome Developer Tools를 통해 Experiments 탭으로 이동한다.
• CSP 위반 보기 표시 옵션을 선택한다.
• DevTools 창을 닫았다가 다시 열어보자.
• CSP 위반 중단점에서 신뢰할 수 있는 유형 위반 및 위반 유형을 선택하여 기능을 활성화한다.

크롬 DevTools는 탐지된 취약한 코드 블록 바로 앞에 수정에 대한 추가 세부 사항까지 보여준다.

3. 새로운 폰트 편집 툴 – 폰트 스타일 즉시 뒤집기

여러분은 웹사이트에 있는 모든 폰트를 즉시 뒤집을 수 있고 코드를 건드리지 않고도 폰트가 어떻게 보이는지 볼 수 있다는 것을 알고 있나?

Chrome DevTools는 폰트 설정을 변경하는 데 사용할 수 있는 폰트 편집툴을 제공한다. 폰트 패밀리, 크기, 무게, 높이 공간을 변경하고 실시간으로 변경 사항을 확인할 수 있다.

이 기능을 활성화하는 방법

• Chrome DevTools를 통해 Experiments 탭으로 이동한다.
• 스타일 영역 내에서 새 폰트 편집 도구 사용을 선택한다.
• DevTools 창을 닫았다가 다시 연다.
• 변경할 폰트 속성이 포함된 HTML 요소를 선택한다.
• 그러면 스타일 창에 폰트 편집기 아이콘이 나타난다.

4. 듀얼 스크린 모드 – 폴더블 장치용 듀얼 스크린 에뮬레이터

Dual Screen Mode를 활성화하면 Chrome DevTools 에뮬레이터 자체의 듀얼 스크린 장치에서 웹 응용 프로그램을 디버깅할 수 있다.

이 기능은 서피스 듀오와 같은 듀얼 스크린 장치를 디버깅하는 데 있어 큰 도움이 된다.

이 기능을 활성화하는 방법

• Chrome DevTools를 통해 Experiments 탭으로 이동한다.
• 에뮬레이션 검사: 듀얼 스크린 모드를 지원한다.
• DevTools 창을 닫았다가 다시 연다.
• DevTool 창의 오른쪽 상단 모서리에 있는 Toggle Device Tool 옵션을 통해 테스트할 웹 페이지를 연다.
• 에뮬레이터를 Surface Duo 장치(또는 사용 가능한 다른 폴더블 장치)로 전환한다.
• 그런 다음 듀얼 스크린 모드 전환을 클릭하여 웹 응용 프로그램을 듀얼 스크린 모드로 에뮬레이트한다.

5. 전체 접근성 트리 보기 — 접근성 세부 정보가 있는 요소 검사

Chrome DevTools Accessibility 트리를 사용하여 각 DOM 요소에 대해 생성된 내게 필요한 옵션 개체를 검사할 수 있다.

이 기능은 요소 검사 탭으로 익숙하다. 그러나 이를 통해 웹 애플리케이션의 세부 정보를 자세히 살펴보고 보다 자세한 접근성 정보를 탐색할 수 있다.

이 기능을 활성화하는 방법

• Chrome DevTools를 통해 Experiments 탭으로 이동한다.
• 요소 창에서 전체 접근성 트리 보기를 선택한다.
• DevTools 창을 닫았다가 다시 연다.
• Elements 패널에 표시된 내게 필요한 옵션 버튼을 클릭하여 요소 보기 모드를 전체 접근성 트리 보기로 전환한다.

속도와 확장성을 위해 독립적인 구성요소로 제작

획일적인 앱을 구축하는 대신 독립적인 구성요소를 먼저 구축하여 기능 및 애플리케이션으로 구성한다. 개발 속도를 높이고 보다 일관되고 확장 가능한 애플리케이션을 구축할 수 있도록 지원한다.

Bit와 같은 OSS 툴은 독립 구성 요소를 구축하고 애플리케이션을 구성하기 위한 훌륭한 개발자 경험을 제공한다. 많은 팀이 독립적인 구성요소를 통해 설계 시스템 또는 마이크로 프론트엔드를 구축하는 것으로 시작한다.

시도해보자 →

결론

이 포스팅에서는 5가지 강력하지만 흔하지 않은 Chrome DevTools 기능에 대해 설명하였다. 

필자는 Chrome DevTools로 당신의 개발자 생활을 더 쉽게 만드는 데 도움이 되기를 바란다. 

번역 – 핀인사이트 인턴연구원 강지윤(shety0427@gmail.com)

원문 보러가기>

https://blog.bitsrc.io/google-chrome-experimental-features-for-developers-a9a7cc9d1b30