[Chrome]크롬 개발자 도구 테마 변경하는 방법

크롬 개발자 도구 테마 변경하는 방법

대부분의 FrontEnd 개발자들은 흰색 테마의 크롬 개발자 도구에 익숙합니다. 만약, 웹 페이지처럼 크롬 개발자 도구의 테마를 다크 모드로 변경하고 싶다면, 이번 포스팅에서 설명하는 방법을 따라하면 되겠습니다.

 

순서 1. 먼저, 크롬 개발자 도구를 실행합니다.

 

순서 2. 우측 상단의 톱니바퀴 모양의 아이콘을 선택하여 크롬 개발자 도구 설정으로 이동합니다.

 

순서 3. 환경설정 탭으로 이동하여 다음 사진처럼 테마를 선택할 수 있습니다. 다크 모드를 원하는 경우 "어둡게"를 선택합니다.

 

순서 4. 우측 상단의 x 아이콘을 클릭한 뒤 다시 크롬 개발자 도구로 넘어오면, 테마가 변경된 것을 확인할 수 있습니다.

---

커스텀 테마 적용

크롬에서 기본적으로 제공하는 테마가 아닌 커스텀 테마를 적용하고 싶을 수 있습니다.

 

커스텀 테마를 적용하고 싶은 경우 다음 순서를 따라합니다.

 

순서 1. 크롬 개발자 도구 설정에서 실험 탭으로 이동합니다. 그다음 "Allow extensions to load custom stylesheets"를 체크합니다.

 

순서 2. Chrome 스토어에서 원하는 Material Dev Tools 확장 프로그램을 설치합니다. 저는 제일 상단에 있는 Material DevTools Theme Collection을 설치하였습니다.

Chrome 웹 스토어

 

순서 3. 크롬 개발자 도구를 다시 실행하면, Material DevTools Theme Collection이 적용됩니다.

[Material DevTools Theme Collection 적용 전]

 

[Material DevTools Theme Collection 적용 후]