Chrome DevTools 스니펫의 강력한 기능 활용

Chrome DevTools의 스니펫 패널은 종종 간과되는 강력한 도구입니다. 스니펫을 사용하면 개발자가 브라우저에서 직접 사용자 정의 JavaScript 코드를 작성, 저장 및 실행할 수 있습니다. 이 기능은 새로운 로컬/개발/스테이징 인스턴스를 가동하지 않고도 JavaScript를 실험, 디버깅 및 데모하는 데 도움이 될 수 있습니다.

이 기사에서는 스니펫 패널의 기능을 강조하면서 일상적인 개발 작업에 대한 몇 가지 실용적인 사용법을 제시하고 싶습니다.

조각 패널이란 무엇입니까?

Chrome DevTools의 스니펫 패널은 본질적으로 재사용 가능한 JavaScript 코드를 작성하고 저장할 수 있는 미니 코드 편집기입니다. 콘솔에 명령을 입력하는 것과 달리 스니펫을 사용하면 다음을 수행할 수 있습니다.

• 재사용을 위해 코드를 저장하세요.
• 한 번의 클릭으로 스크립트를 실행하세요.
• 브라우저 세션 간에 코드를 공유합니다.
• 중단점과 조사식을 사용하여 스크립트를 디버그합니다.

접속 방법

DevTools를 열어 스니펫에 액세스할 수 있습니다(마우스 오른쪽 버튼 클릭 > Inspect > 소스 > 스니펫).

그런데 왜?

이전 기사에서는 웹사이트 디버깅에 도움이 되도록 콘솔을 사용하는 다양한 방법을 다루었습니다. 스니펫은 이보다 조금 더 나아갑니다. JavaScript를 콘솔에 직접 추가하면 작동하지만 반복되는 작업에는 약간 지루합니다. 이것이 스니펫이 작동하는 곳입니다. 이를 통해 스크립트를 반복하고 확장할 수 있습니다.

스니펫은 콘솔과 자체 로컬 인스턴스 실행 사이의 중간 지점에 있습니다.

실제 용도

시민

경력 중 어느 시점에서는 고객과 직접 소통하거나 내부 팀을 위해 무언가를 시연해야 할 수도 있습니다. 스니펫을 사용하면 코드에 액세스할 수 없는 라이브 사이트에 잠재적인 업데이트를 표시할 수 있습니다. 저는 대량 CSS 업데이트, 섹션 재배열, 라이브 사이트 조작 등 특정 변경 가능성을 클라이언트에게 보여주기 위해 스니펫을 사용했습니다. 콘솔이나 Elements 콘솔을 통해 CSS를 조작하는 것은 단일 인스턴스에서는 잘 작동하지만 스니펫은 대량 업데이트에 적합합니다.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

스크래핑 사이트

대행사에 따라 온보딩 클라이언트를 회사의 독점 템플릿으로 변환해야 하는 위치에 있을 수도 있습니다. 클라이언트 설정에 따라 사전 제작된 스크레이퍼를 사용하지 못하고 자신만의 맞춤형 스크레이퍼를 선택하지 못할 수도 있습니다. 저는 적절한 요소에서만 데이터를 가져오는지 확인하기 위해 스니펫을 사용하여 스크래핑 사이트를 테스트했습니다. 이는 필요한 데이터가 페이지에 있고 백엔드에서 사용할 수 없는 스크랩하기 어려운 사이트에서 작업할 때 유용합니다.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

반복적인 작업

사이트를 수동으로 테스트 중이고 새로운 작업을 계속해서 반복하는 경우. 사용자가 경험하는 상황을 확인하기 위해 클릭 이벤트를 반복해야 할 수도 있습니다. 스니펫을 작성하면 이를 반복적으로 실행하는 데 매우 도움이 됩니다. 더 긴 작업 흐름을 지원하려면 코드 조각을 스크립트의 중단점과 연결하세요.

const h1 = document.querySelector('h1').innerText;
console.log(h1);

결론

스니펫 패널은 개발 작업 흐름을 향상할 수 있는 다용도 도구입니다. 작업 자동화, 효율적인 디버깅, 콘텐츠 분석을 통해 일상 업무에서 시간과 노력을 절약할 수 있습니다.

스니펫에 대한 다른 사용 사례가 있나요? 아래 댓글로 공유해주세요!

위 내용은 Chrome DevTools 스니펫의 강력한 기능 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!