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

DevTools의 새로운 기능 (Chrome 59)

Kayce Basques

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

하이라이트

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

새로운 기능

CSS 및 JS 코드 적용 범위

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

노출 범위 탭

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

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

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

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

범위 탭을 열려면 다음 안내를 따르세요.

명령어 메뉴를 엽니다.
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);
  }

추신: 디버깅 기술을 향상하고 싶나요? 다음과 같은 새로운 문서를 확인해 보세요.

변경사항

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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