'크롬 개발자도구 라이브러리 디버깅 제외하기'에 해당되는 글 1건

안녕하세요. 제임스 입니다. 

크롬 개발자 도구 사용 시 여러가지 유용한 설정들이 있어 소개 하고자 합니다. 

그렇다면 설정 화면 진입 하는 방법 부터 알아야 겠죠? ^^

■ 크롬 개발자도구 설정 (Settings) 열기

1. 개발자 도구의 메뉴버튼 > Settings 

2. 단축키 F1 클릭

1번 또는 2번 방법을 이용하면 아래와 같이 설정(Settings) 화면을 보실 수 있습니다. 

■ Dark 테마 적용하기

개발자 도구의 기본 테마는 Light 로 흰색 배경으로 되어 있습니다. 

이클립스 사용 하시던 분들 중 배경 테마를 Dark 로 설정해서 사용 하시는 분들 많으실 텐데요. 

크롬 개발자 도구에서도 Dark 테마를 선택 할 수 있습니다. 

Settings > Preferences > Appearance > Theme 에서 Dark 를 선택 하시면 됩니다. 

Dark 테마가 적용된 개발자 도구 모습입니다. 멋있죠? 

개발은 폼으로 하는게 아니지만... 그래도 이왕이면 멋있는게 좋죠 ^^

■ 캐싱 사용하지 않기 (Disable Cache)

개발중 정말 귀찮은 일 중 하나가 js 파일등을 적용 시 캐시 때문에 바로 적용이 안되어 인터넷 사용 기록 삭제를 통해 캐시를 지워 주는 일입니다. 일반 사용자의 경우라면 캐싱을 하는 것이 인터넷 사용 환경 상에서 잇점이 많지만 개발자 입장에서는 특별한 경우가 아니라면 캐싱을 할 필요가 거의 없습니다. 

그래서 캐싱을 사용하지 않도록 하는 방법이 있습니다. 

Settings > Preferences > NetWork > Disable cache (while DevTools is open) 

while DevTools is open 이라고 되어 있습니다. 즉, 개발자 도구가 열려 있는 상태에서는 캐싱을 하지 않습니다. 

정말 정말 유용한 기능이고 개발중이라면 특별한 케이스를 제외하고는 꼭 사용 하셔야 하는 기능입니다. 

■ 콘솔패널 타임스탬프 활성화

Console 패널에서 console log 등이 표기 될때 기본은 아래와 같이 시간 정보가 없습니다. 

Console 패널에 로그가 남은 시간 정보를 알고 싶다면 아래와 같이 Console 항목의 Show timestamps 를 선택하면 됩니다. 

Settings > Preferences > Console > Show timestamps 

타임 스탬프를 활성화 하면 위와 같이 로그가 남은 시간을 확인 하실 수 있습니다. 

■ Blackboxing

이 블랙박싱이라는 생소한 이름의 설정은 자바스크립트 디버깅 시 아주 아주 유용한 설정입니다. 

개발 시개발자 개인이 작성한 코드 이외의 외부 라이브러리를 호출 하는 경우가 있습니다. 디버깅 시 이 외부 라이브러리 스택도 찾아 들어가는 작업을 하게 되는데요. 직접 개발한 부분이 아니므로 (신뢰 할 수 있는 라이브러리의 경우 디버깅 하지 않아도 되므로...) 디버깅을 하지 않도록 설정 할 수 있습니다. 

이때 사용 하는 것이 바로 Blackboxing 입니다. 

Settings > Blackboxing > Framework Blackbox Patterns

Add pattern... 버튼을 클릭 합니다. 

외부 라이브러리로 jquery-1.12.4.min.js 파일을 사용하고 있다고 가정 했을때

jqeury 로 시작하는 .js 파일을 블랙박싱 해주겠다는 의미로 위와 같이 입력 후 Add 버튼을 클릭하여 완료 해줍니다. 

Blackbox (블랙박싱) 목록에 jquery 가 보이며 이후 디버깅 시 jqeury 관련 스택은 스킵하게 됩니다. 

Blackbox content scripts 는 항상 체크 해두는게 좋습니다. 

■ Devices (에뮬레이터 단말기 추가 삭제)

Devices 탭에서는 에뮬레이터용 단말기를 추가 삭제 할 수 있습니다. 

여기에 등록된 단말기 정보는 모두 프리셋 된 정보들입니다. 

물론 Add Custom Device 기능을 통해 원하는 단말 설정 및 테스트 에뮬레이터 생성이 가능합니다. 

(이와 관련하여 추후 좀더 자세히 다루도록 하겠습니다.)

Settings > Devices > Emulated Devices

■ Shortcuts (단축키 정보)

크롬 개발자도구에서 사용하는 단축기 정보를 확인 할 수 있습니다. 

많이 사용하는 단축키들은 외우고 있으면 좋겠죠? ^^

Settings > Shortcuts > Shortcuts

설정에서 개인적으로 많이 사용하거나 꼭 필요하다고 생각되는 컨텐츠 위주로 내용을 정리 했습니다. 

웹 개발에 많은 도움이 될것이라 생각 되네요 :)

※ 이 글은 크롬버전 63.0.3239.132 (공식빌드) 기준으로 작성 했습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D