DevTools의 새로운 기능 (Chrome 59)

Kayce Basques

DevTools 출시 노트의 새로운 버전을 만나보세요. 동영상 보기 Chrome 59 Chrome DevTools의 새로운 기능을 알아보려면 아래를 읽어보세요.

하이라이트

새로운 기능

CSS 및 JS 코드 적용 범위

새로운 범위 탭에서 사용하지 않는 CSS 및 JS 코드를 찾으세요. 페이지를 로드하거나 실행하면 탭에 사용된 코드 수와 로드된 코드 수가 표시됩니다. 코드만 배송하여 페이지 크기를 줄일 수 있습니다. 사용할 수 있습니다

노출 범위 탭

URL을 클릭하면 Sources 패널에 해당 파일이 분석과 함께 표시됩니다. 확인할 수 있습니다

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

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

  • 연한 녹색은 코드 줄이 실행되었음을 나타냅니다.
  • 빨간색으로 고정된 경우 실행되지 않았음을 의미합니다.
  • 위 스크린샷의 3번 행과 같이 빨간색과 녹색이 모두 표시된 코드 줄은 해당 줄의 일부 코드만 실행되었음을 의미합니다. 예를 들어 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의 새로운 기능 시리즈에서 다룬 모든 내용 목록입니다.