DevTools의 새로운 기능 (Chrome 59)

Kayce Basques

DevTools 출시 노트의 또 다른 회에 오신 것을 환영합니다. 아래 동영상을 시청하거나 Chrome 59의 Chrome DevTools에 추가된 새로운 기능을 알아보세요.

하이라이트

새로운 기능

CSS 및 JS 코드 적용 범위

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

노출 범위 탭

URL을 클릭하면 소스 패널에 해당 파일이 표시되며 실행된 코드 줄이 분류됩니다.

소스 패널의 코드 적용 범위 분석

코드의 각 줄은 색상으로 구분됩니다.

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

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

  1. 명령어 메뉴를 엽니다.
  2. 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, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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