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를 입력하고 범위 표시를 선택합니다.

전체 페이지 스크린샷

아래 동영상을 통해 위에서 스크린샷을 찍는 방법을 알아보세요. 광고가 표시되는 것을 볼 수 있습니다.

요청 차단

특정 스크립트, 스타일시트 또는 다른 리소스를 사용할 수 없다면 어떻게 해야 하나요? Network에서 요청을 마우스 오른쪽 버튼으로 클릭합니다. 패널을 클릭하고 요청 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 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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