DevTools의 새로운 기능 (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

DevTools 출시 노트의 또 다른 버전에 오신 것을 환영합니다. 아래 동영상을 시청하거나 계속 읽어 Chrome 59의 Chrome DevTools에 새로 추가된 기능을 확인하세요.

하이라이트

새로운 기능

CSS 및 JS 코드 적용 범위

새로운 Coverage 탭으로 사용되지 않는 CSS 및 JS 코드를 찾으세요. 페이지를 로드하거나 실행하면 탭에 사용된 코드와 로드된 코드의 양이 표시됩니다. 필요한 코드만 제공하여 페이지 크기를 줄일 수 있습니다.

범위 탭

URL을 클릭하면 실행된 코드 줄의 분석과 함께 소스 패널에 파일이 표시됩니다.

소스 패널의 코드 커버리지 분석

각 코드 줄은 다음과 같이 색상으로 구분됩니다.

  • 녹색은 해당 코드 줄이 실행되었음을 의미합니다.
  • 빨간색으로 고정되면 실행되지 않았음을 의미합니다.
  • 위 스크린샷의 3번째 줄과 같이 빨간색과 녹색이 모두 표시된 코드 줄은 해당 줄의 일부 코드만 실행되었음을 의미합니다. 예를 들어 var b = (a > 0) ? a : 0와 같은 삼항식은 빨간색과 녹색으로 모두 표시됩니다.

범위 탭을 열려면 다음 단계를 따르세요.

  1. 명령어 메뉴를 엽니다.
  2. Coverage을 입력하고 Show Coverage를 선택합니다.

전체 페이지 스크린샷

페이지 상단부터 하단까지 스크린샷을 찍는 방법을 알아보려면 아래 동영상을 확인하세요.

요청 차단

특정 스크립트, 스타일시트 또는 기타 리소스를 사용할 수 없을 때 페이지가 어떻게 작동하는지 확인하고 싶으신가요? 네트워크 패널에서 요청을 마우스 오른쪽 버튼으로 클릭하고 요청 URL 차단을 선택합니다. 서랍에 새 차단 요청 탭이 팝업으로 표시되며, 이 탭에서 차단된 요청을 관리할 수 있습니다.

요청 URL 차단

async await 위로 이동

지금까지 아래 스니펫과 같은 코드를 단계별로 실행하려고 하면 골치 아팠습니다. test()를 실행하는 중에 한 줄을 건너뛰면 setInterval() 코드로 인해 중단됩니다. 이제 test()과 같은 비동기 코드를 단계별로 실행하면 DevTools가 첫 번째 줄부터 마지막 줄까지 일관성 있게 단계별로 실행합니다.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

PS 디버깅 기술을 향상하고 싶으신가요? 다음과 같은 새로운 문서를 확인하세요.

변경사항

통합 명령 메뉴

이제 명령어 메뉴를 열면 명령어 앞에 보다 큼 기호 (>)가 추가됩니다. 이는 명령어 메뉴가 파일 열기 메뉴와 통합되었기 때문입니다. 파일 열기 메뉴는 Command+O (Mac) 또는 Control+O(Windows, Linux)입니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.