본문 바로가기

HTML&CSS

크롬 개발자 도구 커멘드 팔레트(Command Palette) 사용하기 - 명령어 리스트 보기

반응형

크롬 개발자 도구는 프론트엔드 개발용으로 사용할 수 있는 강력한 도구입니다.

그런만큼 많은 기능들을 내장하고 있다보니 초보 개발자는 그 기능들이 어디에 있는지, 명령이 어떤 것이 있는지도 잘 모릅니다.

단축키 명령어를 알면 개발자 도구를 더 효율적으로 사용할 수 있지만, 사실 단축키가 어떤게 있는지도 모릅니다.

 

크롬 개발자 도구에서는 명령어 목록을 커멘드 팔레트(Command Palette) 라고 하고, 원하는 명령어를 키워드로 검색할 수 있는 기능을 제공합니다.

 

Ctrl+Shift+P

 

를 누르면 열고 싶은 소스 파일을 검색해서 선택하는 "파일 검색 창"과 같은 창이 표시됩니다.

그리고 검색창에는 ">" 문자가 미리 입력되어 있습니다.

">" 뒤에 찾고 싶은 명령어의 키워드, 또는 키워드 일부를 입력합니다.

 

키워드를 가지고 있는 관련 명령어들이 목록에 필터링 되어 표시됩니다.

예를 들어, ">console" 을 입력하면 콘솔과 관련된 명령어들이 목록에 표시됩니다.

 

크롬 개발자 도구 커멘트 팔레트 검색 결과 화면

 

목록에서 원하는 명령어를 선택하면 해당 명령이 실행됩니다.

단축키가 있는 명령이면 목록 오른쪽에 단축키까지 표시해주므로, 단축키를 확인하는 용도로도 사용할 수 있습니다.

 

눈치가 빠른 분은 ">"가 미리 입력되어 있는 부분에서 눈치를 챘을 수도 있지만, 이 ">" 문자는 삭제할 수 있습니다.

앞서 "파일 검색 창" 과 같은 창이 표시된다고 했는데, 말 그대로 "파일 검색 창" 입니다.

">" 문자를 지우면 "파일 검색"을 하는 검색창 상태가 되고, 키워드를 입력하면 현재 웹 페이지에 링크된 리소스 파일을 검색해서 결과 목록을 표시합니다.

 

반대로 하면

 

"파일 검색 창"을 호출하는 단축키인

 

Ctrl + P

 

를 누른 후 ">"를 입력하고 그 뒤에 명령어 키워드를 입력하면 크롬 개발자도구의 커멘드 검색을 합니다.

반응형

닫기