신입 개발자가 알면 좋을 크롬 개발자 도구

저는 입사 7개월 차인 신입 프론트엔드 개발자입니다.

작업 전에 크롬 브라우저를 켜고 가장 먼저 하는 일이 F12를 눌러 개발자도구를 여는 일입니다.

개발자도구를 활용하면 작업시간도 줄고, 작업효율도 높일 수 있습니다.

오늘은 신입 개발자가 알면 좋을 크롬 브라우저의 기본적인 개발자 도구에 대해 소개해볼까 합니다.

1. 실시간 css 수정이 가능한 element styles

element는 개발자 도구를 열면 가장 먼저 표시되는 도구입니다.

그 중 styles 탭은 실시간으로 css 수정이 가능하고, css가 적용된 파일 경로를 확인할 수 있어 

작업시간을 훨씬 단축할 수 있습니다.

상단 이미지에서 체크박스 옆의 텍스트들이 해당 요소에 적용된 css 입니다.

체크박스를 해제하면 해당 css가 해제된 화면을 확인할 수 있고, 하단의 빈 부분에 css를 추가할 수도 있습니다.

그리고 체크박스 상단의 요소 이름 우측에서는 css 파일의 이름과 경로, 해당 파일의 몇번째 줄에서 css가 적용된건지 알려주니

브라우저와 편집기를 왔다갔다하며 작업을 하는 것 보다 훨씬 효율적인 작업이 가능하겠죠?

2. 개발자 도구 창의 위치 조절이 가능한 Dock Side

개발자 도구가 우측 고정이라고 생각하시는 분들이 있을겁니다. 물론 저도 그랬고요.

퍼블리싱을 하다보면 개발자 도구 창의 사이즈를 이리저리 조절하며 요소들이 깨지지 않는지 확인 하는 경우가 자주 있는데요

그렇게 작업을 하다보면 개발자도구 창을 아래로 내리고 싶거나, 브라우저 밖으로 똑 떼버리고 싶을 때가 있습니다.

개발자 도구의 우측상단의 설정버튼을 클릭하면 Dock side라는 기능이 있는데요.

Dock side는 개발자도구 dock을 좌측, 하단, 우측으로 이동 시킬 수 있고, 심지어 브라우저와 분리시킬 수도 있습니다.

3. 모바일 기기별 화면을 볼 수 있는 Toggle device toolbar

현재 대부분의 웹사이트는 반응형이거나 모바일용 웹사이트가 따로 있습니다.

그러니 당연히 퍼블리싱 작업을 할 때에도 모바일 화면을 고려해서 작업을 해야합니다.

1번에서 말씀드렸던 것 처럼 개발자도구창을 이리저리 늘리고 줄이며 작업을 하는 것도 방법이지만

device별로 정확한 해상도를 맞춰가며 작업하기엔 번거로움이 있습니다.

크롬에는 모바일 기기별로 화면을 볼 수 있는 Toggle device toolbar라는 기능이 있습니다.

 

상단 이미지의 표시된 부분을 클릭하면 

이처럼 모바일 기기별 해상도에 따른 화면을 확인 할 수 있습니다.

상단의 기기 이름을 클릭하면 다른 기기도 추가 할 수 있으니 참고하세요.

4. 브라우저와 서버의 흐름을 파악하는 Network

위에 소개한 기능들이 퍼블리싱을 위한 개발자 도구의 기능이었다면, 이제 소개 할 기능은 스크립트 단에서의 기능입니다.

네트워크는 브라우저와 서버 사이의 흐름을 파악하고, 분석하는 도구입니다.

이처럼 현재 웹페이지에서 불러오는 이미지나 css파일 api 등을 확인 할 수 있습니다.

뿐만 아니라 해당 파일의 크기나 로드되는 시간 등도 알 수 있어 여러모로 유용하게 쓰입니다.

저 같은 경우엔 각각의 해당 파일을 클릭하여 이미지를 확인하거나 api를 json 형태로 확인할 때도 자주 쓰곤 합니다.

5. 개발자 도구 dark 테마

웹개발자들이라면 하루 작업시간의 3분의 1 이상은 개발자도구를 보고 있을거라 생각합니다.

매일 같은 개발자 도구를 쳐다보는데 질렸을 개발자들을 위해 마지막으로 크롬의 dark 테마를 소개해 드리겠습니다.

Settings 탭에서 상단에 표시된 Theme을 Dark 버전으로 바꿔줍니다.

배경이 어두워 눈에 피로도 덜하고 텍스트들의 가독성도 높아집니다.

또한 오류 메세지도 좀 더 강렬하게 확인 할 수 있습니다.

크롬 개발자 도구에는 이렇게 훌륭한 기능들이 있으나 모든 작업을 크롬에서만 하는 것은 아주 어리석은 짓입니다.

브라우저별로 지원하지 않는 css나 스크립트 함수가 존재하기 때문이죠.

그러니 항상 크로스 브라우징을 염두해두며 작업을 하는 것을 추천드립니다.