자바스크립트 스니펫 실행

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Console에서 동일한 코드를 반복적으로 실행하는 경우 코드를 스니펫으로 저장하는 것이 좋습니다. 스니펫은 페이지의 JavaScript 컨텍스트에 액세스할 수 있습니다. 북마클릿의 대안입니다.

Sources 패널에서 스니펫을 작성하고 모든 페이지와 시크릿 모드에서 실행할 수 있습니다.

예를 들어 아래 스크린샷은 왼쪽에 DevTools 문서 홈페이지를, 오른쪽에 Sources > Snippets 창의 일부 스니펫 소스 코드를 보여줍니다.

스니펫을 실행하기 전의 DevTools 문서 홈페이지 '실행' 버튼이 강조 표시됨

다음은 메시지를 로깅하고 홈페이지의 HTML 본문을 메시지가 포함된 <p> 요소로 대체하는 스니펫 소스 코드입니다.

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

실행 실행 버튼을 클릭하면 콘솔 창이 표시되어 스니펫이 로깅하는 Hello, Snippets! 메시지를 표시하고 페이지의 콘텐츠가 변경됩니다.

스니펫을 실행한 후의 홈페이지

스니펫 창 열기

스니펫 창에 스니펫이 나열됩니다. 스니펫을 수정하려면 다음 두 가지 방법 중 하나로 스니펫을 엽니다.

  1. Sources > 탭 더보기 > Snippets로 이동합니다.

    소스 창의 탭 더보기 메뉴

  2. 명령어 메뉴에서 다음을 실행합니다.

    1. Control+Shift+P(Windows/Linux) 또는 Command+Shift+P(Mac)를 눌러 명령어 메뉴를 엽니다.
    2. Snippets을 입력하고 스니펫 표시를 선택한 후 Enter를 누릅니다.

    명령어 메뉴에서 스니펫 표시를 선택합니다.

Sources>Snippets 창에는 저장한 스니펫 목록이 표시됩니다. 이 예에서는 비어 있습니다.

빈 스니펫 창

스니펫 만들기

Snippets 창에서 또는 DevTools의 아무 곳에서나 명령어 메뉴에서 해당 명령어를 실행하여 스니펫을 만들 수 있습니다.

스니펫 창은 스니펫을 알파벳순으로 정렬합니다.

소스 패널에서 스니펫 만들기

  1. 스니펫 창을 엽니다.
  2. 새 스니펫입니다. 새 스니펫을 클릭합니다.

  3. 스니펫 이름을 입력하고 Enter 키를 눌러 저장합니다.

    스니펫 이름 지정

명령어 메뉴에서 스니펫 만들기

  1. DevTools 내부의 아무 곳에나 커서를 가져갑니다.
  2. Control+Shift+P(Windows/Linux) 또는 Command+Shift+P(Mac)를 눌러 명령어 메뉴를 엽니다.

  3. Snippet를 입력하기 시작하고 새 스니펫 만들기를 선택한 다음 Enter를 눌러 명령어를 실행합니다.

    명령어 메뉴에서 새 스니펫 만들기를 선택합니다.

새 스니펫에 맞춤 이름을 지정하려면 스니펫 이름 바꾸기를 참고하세요.

스니펫 수정

  1. 스니펫 창을 엽니다.

  2. 스니펫 창에서 수정하려는 스니펫의 이름을 클릭합니다. 소스 패널이 코드 편집기에서 열립니다.

    코드 편집기에서 열린 스니펫

  3. 코드 편집기를 사용하여 스니펫의 코드를 수정합니다. 스니펫 이름 옆에 별표가 있으면 아직 변경사항을 저장하지 않았음을 의미합니다.

    스니펫 이름 옆에 저장되지 않은 코드를 나타내는 별표가 표시됩니다.

  4. Control+S(Windows/Linux) 또는 Command+S(Mac)을 눌러 저장합니다.

스니펫 실행

스니펫을 만드는 것과 마찬가지로 Snippets 창과 Command Menu에서 모두 실행할 수 있습니다.

소스 패널에서 스니펫 실행

  1. 스니펫 창을 엽니다.
  2. 실행할 스니펫의 이름을 클릭합니다. 소스 패널이 코드 편집기에서 열립니다.

  3. 편집기 하단의 작업 모음에서 실행 실행을 클릭하거나 Control+Enter(Windows/Linux) 또는 Command+Enter(Mac)를 누릅니다.

    실행 버튼

명령어 메뉴에서 스니펫 실행

  1. DevTools 내부의 아무 곳에나 커서를 가져갑니다.
  2. Control+O(Windows/Linux) 또는 Command+O(Mac)를 눌러 명령어 메뉴를 엽니다.

  3. ! 문자를 입력한 후 실행하려는 스니펫의 이름을 입력합니다.

    열기 메뉴에서 스니펫 실행

  4. Enter 키를 눌러 스니펫을 실행합니다.

스니펫 이름 바꾸기

  1. 스니펫 창을 엽니다.
  2. 스니펫 이름을 마우스 오른쪽 버튼으로 클릭하고 이름 바꾸기를 선택합니다.

스니펫 삭제

  1. 스니펫 창을 엽니다.
  2. 스니펫 이름을 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다.