[Chrome] devtools snippets

 

 

간단한 스크립트를 등록해놓고 빠르게 실행해볼 수 있는 방법.

반복적인 칸 채우기나 유틸리티성 스크립트를 등록해놓고 실행하거나 여러모로 유용함.

로딩된 웹페이지의 js scope에도 접근이 가능하고 Console에서 임의로 지정한 변수도 접근해서 사용할 수 있음.

 

개발자도구를 열고 Sources 탭을 선택한 다음 좌측상단의 Page FileSystem Overrides >> 여기서 >> 를 클릭해서 Snippets 선택.

그리고 + New snippet 선택해서 하나 새로 만들어 보자.

이름은 대충 img_count 로 정함.

 

그리고 우측 소스코드 탭에 아래 코드 입력.

const imgCount = document.querySelectorAll('img').length;
const styleNormal = 'font-size:12px;';
const styleSpecial = 'font-size:15px; color:#f33; font-weight:bold;';
 
console.log(`%c현재 페이지의 <img> 갯수는 %c${imgCount}%c개 입니다.`, styleNormal, styleSpecial, styleNormal);

 

이 상태에서 ctrl + Enter (cmd + Enter) 하면 snippet의 소스코드가 실행됨.

로딩된 웹페이지의 <img> 갯수를 콘솔에 출력해줌.

 

ctrl + S (cmd + S) 로 저장할 수 있고,

저장된 snippet은 개발자도구가 열린 상태에서 ctrl + O (cmd + O) 를 입력한 후 !를 입력하고 설정한 snippet 이름을 입력해서 실행할 수 있음.

 

prompt로 값을 입력받아서 처리할 수도 있고,

js 소스코드를 수정해서 리로드하지 않고도 이것저것 빠르고 편하게 해볼 수 있어,

사용하기에 따라 대단히 유용함.