자바스크립트 스니펫 실행

Sofia Emelianova
Sofia Emelianova

콘솔에서 동일한 코드를 반복적으로 실행하고 있다면 코드를 스니펫으로 저장해 보세요. 스니펫은 페이지의 JavaScript 컨텍스트에 액세스할 수 있습니다. 북마크릿의 대안입니다.

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

예를 들어 아래 스크린샷의 왼쪽에는 DevTools 문서 홈페이지가, 오른쪽의 Sources > Snippets 창에 일부 스니펫 소스 코드가 표시되어 있습니다.

스니펫을 실행하기 전 DevTools 문서 홈페이지 Run(실행) 버튼이 강조 표시되어 있습니다.

다음은 메시지를 기록하고 홈페이지의 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! 메시지를 표시합니다.

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

스니펫 창 열기

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

  1. 소스 &gt; 탭 더보기 &gt; 스니펫으로 이동합니다.

    소스 창의 탭 더보기 메뉴

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

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

    명령 메뉴에서 스니펫 표시 선택

소스&gt;스니펫 창에 저장한 스니펫 목록이 표시됩니다(이 예에서는 비어 있음).

빈 스니펫 창

스니펫 만들기

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

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

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

  1. 스니펫 창을 엽니다.
  2. 새로운 스니펫 새 스니펫을 클릭합니다.
  3. 스니펫 이름을 입력하고 Enter 키를 눌러 저장합니다.

    스니펫 이름 지정

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

  1. DevTools 내에서 원하는 위치로 커서를 가져갑니다.
  2. Control+Shift+P (Windows/Linux) 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴를 엽니다.
  3. Snippet를 입력하고 새 스니펫 만들기를 선택한 후 Enter를 눌러 명령어를 실행합니다.

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

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

스니펫 수정

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

    코드 편집기에서 스니펫이 열렸습니다.

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

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

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

스니펫 실행

스니펫을 만드는 것과 마찬가지로 스니펫 창과 명령어 메뉴 모두에서 실행할 수 있습니다.

소스 패널에서 스니펫 실행

  1. 스니펫 창을 엽니다.
  2. 실행할 스니펫의 이름을 클릭합니다. Sources 패널이 코드 편집기에서 열립니다.
  3. 편집기 하단의 작업 모음에서 실행 Run을 클릭합니다. 또는 Control+Enter (Windows/Linux) 또는 Command+Enter (Mac)를 누릅니다.

    실행 버튼

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

  1. DevTools 내에서 원하는 위치로 커서를 가져갑니다.
  2. Control+O (Windows/Linux) 또는 Command+O (Mac)를 눌러 명령어 메뉴를 엽니다.
  3. ! 문자 이어서 실행할 스니펫 이름을 입력합니다.

    &#39;열기&#39; 메뉴에서 스니펫 실행

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

스니펫 이름 바꾸기

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

스니펫 삭제

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