이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 59)

Kayce Basques

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

하이라이트

CSS 및 JS 코드 적용 범위. 새로운 적용 범위 탭에서 사용되지 않는 CSS와 JS를 찾아보세요
전체 페이지 스크린샷. 표시 영역의 상단에서 하단까지 전체 페이지의 스크린샷을 찍습니다.
요청을 차단합니다. Network 패널에서 개별 요청을 수동으로 사용 중지합니다.
async await를 단계별로 실행합니다. 예측 가능한 방식으로 비동기 함수를 단계별로 실행합니다.
통합 명령어 메뉴. 명령을 실행하고 새로 통합된 명령 메뉴에서 파일을 엽니다.

새로운 기능

CSS 및 JS 코드 적용 범위

새로운 범위 탭에서 사용되지 않는 CSS 및 JS 코드를 찾아보세요. 페이지를 로드하거나 실행하면 이 탭에서 사용된 코드의 양과 로드된 코드의 양을 확인할 수 있습니다. 필요한 코드만 제공하면 페이지 크기를 줄일 수 있습니다.

범위 탭

URL을 클릭하면 실행된 코드 줄에 관한 세부정보와 함께 해당 파일이 Sources 패널에 표시됩니다.

소스 패널의 코드 범위 분석

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

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

범위 탭을 여는 방법은 다음과 같습니다.

명령어 메뉴를 엽니다.
Coverage를 입력하다가 Show Coverage를 선택합니다.

전체 페이지 스크린샷

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

요청 차단

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

요청 URL 차단

Step Over 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);
  }

추신: 디버깅 실력을 높이고 싶으신가요? 다음과 같은 새로운 문서를 확인해 보세요.

변경사항

이제 명령어 메뉴를 열면 명령어 앞에 보다 큰 문자 (>)가 붙습니다. 이는 명령어 메뉴가 Command+O (Mac) 또는 Control+O(Windows, Linux)인 파일 열기 메뉴로 통합되었기 때문입니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.