콘솔에서 동일한 코드를 반복적으로 실행하고 있다면 코드를 스니펫으로 저장해 보세요. 스니펫은 페이지의 JavaScript 컨텍스트에 액세스할 수 있습니다. 북마크릿의 대안입니다.
Sources 패널에서 스니펫을 작성하고 모든 페이지에서 시크릿 모드로 실행할 수 있습니다.
예를 들어 아래 스크린샷의 왼쪽에는 DevTools 문서 홈페이지가, 오른쪽의 Sources > Snippets 창에 일부 스니펫 소스 코드가 표시되어 있습니다.
다음은 메시지를 기록하고 홈페이지의 HTML 본문을 메시지가 포함된 <p> 요소로 대체하는 스니펫 소스 코드입니다.
console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
Run 버튼을 클릭하면 Console 창이 나타나 스니펫이 로깅하고 페이지의 콘텐츠가 변경된다는 Hello, Snippets! 메시지를 표시합니다.
스니펫 창 열기
스니펫 창에 스니펫이 나열됩니다. 스니펫을 수정하려면 다음 두 가지 방법 중 하나로 스니펫을 엽니다.
소스 >
> 스니펫으로 이동합니다.
명령어 메뉴에서 다음을 수행합니다.
- Control+Shift+P (Windows/Linux) 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴를 엽니다.
Snippets를 입력하고 스니펫 표시를 선택한 다음 Enter 키를 누릅니다.
소스>스니펫 창에 저장한 스니펫 목록이 표시됩니다(이 예에서는 비어 있음).
스니펫 만들기
스니펫 창에서 또는 DevTools의 아무 곳에서나 명령어 메뉴에서 해당하는 명령어를 실행하여 스니펫을 만들 수 있습니다.
스니펫 창에서는 스니펫을 알파벳순으로 정렬합니다.
소스 패널에서 스니펫 만들기
- 스니펫 창을 엽니다.
새 스니펫을 클릭합니다.스니펫 이름을 입력하고 Enter 키를 눌러 저장합니다.
명령어 메뉴에서 스니펫 만들기
- DevTools 내에서 원하는 위치로 커서를 가져갑니다.
- Control+Shift+P (Windows/Linux) 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴를 엽니다.
Snippet를 입력하고 새 스니펫 만들기를 선택한 후 Enter를 눌러 명령어를 실행합니다.
새 스니펫에 맞춤 이름을 지정하려면 스니펫 이름 바꾸기를 참조하세요.
스니펫 수정
- 스니펫 창을 엽니다.
스니펫 창에서 수정할 스니펫의 이름을 클릭합니다. Sources 패널이 코드 편집기에서 열립니다.
코드 편집기를 사용하여 스니펫의 코드를 수정합니다. 스니펫 이름 옆에 별표는 변경사항이 아직 저장되지 않았음을 의미합니다.
Control+S (Windows/Linux) 또는 Command+S (Mac)를 눌러 저장합니다.
스니펫 실행
스니펫을 만드는 것과 마찬가지로 스니펫 창과 명령어 메뉴 모두에서 실행할 수 있습니다.
소스 패널에서 스니펫 실행
- 스니펫 창을 엽니다.
- 실행할 스니펫의 이름을 클릭합니다. Sources 패널이 코드 편집기에서 열립니다.
편집기 하단의 작업 모음에서
Run을 클릭합니다.
또는 Control+Enter (Windows/Linux) 또는 Command+Enter (Mac)를 누릅니다.
명령어 메뉴에서 스니펫 실행
- DevTools 내에서 원하는 위치로 커서를 가져갑니다.
- Control+O (Windows/Linux) 또는 Command+O (Mac)를 눌러 명령어 메뉴를 엽니다.
!문자 이어서 실행할 스니펫 이름을 입력합니다.
Enter를 눌러 스니펫을 실행합니다.
스니펫 이름 바꾸기
- 스니펫 창을 엽니다.
- 스니펫 이름을 마우스 오른쪽 버튼으로 클릭하고 이름 바꾸기를 선택합니다.
스니펫 삭제
- 스니펫 창을 엽니다.
- 스니펫 이름을 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다.