Chrome DevTools는 빠르게 발전하고 있습니다. 새로운 기능과 개선사항을 몇 가지 구성요소에 소개해 드리고자 합니다. 몇 가지 UI 변경사항, 고해상도 JS 프로파일링, 새로운 Workspaces 기능에 관해 알아보겠습니다.
- 고해상도 프로파일링이 이제 0.1밀리초 정밀도가 됩니다.
- 툴바가 Devtools의 상단에 위치하고 재정의는 콘솔 창으로 이동함
- 작업공간에 파일 추가/삭제/검색을 지원하는 여러 기능이 추가됨
고해상도 프로파일링
CPU 프로파일링은 JavaScript가 얼마나 효율적인지 확인하는 데 매우 유용한 기능입니다. 기존 프로필 보기 외에도 이번 여름에 Google은 Flame Chart를 선보였습니다. 이 기능은 시간 경과에 따른 페이지의 자바스크립트 처리를 시각적으로 보여줍니다. 이를 통해 호출 스택의 진행 정도와 개별 함수를 처리하는 데 걸리는 시간을 쉽게 확인할 수 있습니다.
최근까지만 해도 기존의 헤비 (상향식) 및 트리 (하향식) 표시와 Flame Chart에는 1밀리초의 정밀도로만 프로세스가 표시되었습니다. 대부분의 애플리케이션에서는 괜찮습니다. 하지만 게임과 같이 UI에서 속도가 정말 중요한 작업을 하고 있다면 1밀리초 해상도는 사이트 속도를 저하시키거나 UI가 지연되는 것처럼 보이는 의미 있는 결과를 얻기에는 너무 커질 수 있습니다. 고해상도 프로파일링을 사용 설정하려면 (현재 Canary만 해당) 다음 단계를 따르세요.
- DevTools 설정을 엽니다.
- General(일반) 탭의 Profiler(프로파일러)에서 고해상도 CPU 프로파일링을 사용 설정합니다.
다음은 일반 프로파일링에서 고해상도로 볼 수 있는 Flame Chart의 예입니다. 여기서 HTML5Rocks.com 홈페이지 로드가 프로파일링됩니다.
일반적인 프로파일링 해상도에서 프로세스 시간은 항상 다음 밀리초로 반올림되므로 0.1밀리초 이하만 걸리는 프로세스도 1.0밀리초가 걸리는 것으로 보고되며 다른 프로세스는 호출 스택에 전혀 표시되지 않을 수 있습니다.
고해상도 프로파일링은 자바스크립트 VM에 큰 오버헤드가 있으므로 기본적으로 사용 중지되어 있습니다. 일반적인 프로파일링 해상도보다 더 멋있게 보이지만 정밀도가 필요한 경우에만 사용하는 것이 좋습니다.
Devtools UI 개선
Canary에서는 항상 새로운 기능이 출시되지만, 일반적으로 UI 상단에 표시되는 버튼, 타임라인 탐색 및 정보 패널, 재정의를 콘솔 창으로 재배치 등 몇 가지 주요 UI 변경사항을 염두에 두시기 바랍니다.
먼저 우리가 어떤 과정을 거쳐 왔는지 살펴보겠습니다. 어쨌든 타임라인에 대한 이야기이므로 스크린샷 한 쌍으로 처음 두 마리를 죽여 보겠습니다. 현재 Chrome (공개 버전) 타임라인은 다음과 같습니다.
현재 타임라인은 다음과 같습니다.
다음 사항을 확인하세요.
- 이제 툴바와 버튼이 화면 상단에 표시됩니다. 왼쪽에는 특정 타임라인과 일반 DevTools의 버튼이 모두 표시됩니다.
- 이제 타임라인 레코드의 중첩 구조가 왼쪽 패널에 생겼으며 키보드를 사용하여 스크롤할 수도 있습니다. 위/아래 키를 사용하여 위아래로 스크롤하는 것 외에 왼쪽 및 오른쪽 키를 사용하여 중첩된 레코드를 열고 닫을 수도 있습니다.
- 이제 선택한 항목의 오른쪽 패널에 시간 세부정보가 표시됩니다. 다른 항목 위로 마우스를 가져가면 해당 항목의 정보를 확인할 수 있습니다.
이제 콘솔 창을 살펴보겠습니다. 콘솔 창을 열려면 DevTools 내에서 Esc 키를 누르거나 콘솔 창 버튼 
을 누릅니다. 그러면 창이 아래쪽에서 위로 올라갑니다.
기본적으로 콘솔 및 검색 탭이 표시됩니다. 이전에 재정의라고 했던 기능을 사용하려면 DevTools 설정을 열고 '콘솔 창에 'Emulation' 뷰 표시' 옆의 체크박스를 선택합니다. 설정 상자를 닫으면 다음 스크린샷과 같이 콘솔 창에 에뮬레이션 탭이 표시됩니다.
이곳에서 모든 에뮬레이션을 할 수 있습니다.
이렇게 변경되는 이유는 이전에는 설정 안팎으로 에뮬레이션 재정의를 변경한 다음 다시 돌아와 페이지를 확인해야 했기 때문입니다. 이제 스타일을 조작하면서 에뮬레이션 재정의를 변경할 수 있습니다.
개선된 작업공간
특히 작업공간은 작성 워크플로를 상당히 간소화할 수 있는 기능이지만, 그만큼 유용하지는 않습니다. Workspaces를 사용하면 DevTools에서 실험해 변경하고 변경사항을 소스 파일에 다시 복사하여 붙여넣을 필요 없이 DevTools에서 변경하고 브라우저에서 렌더링된 것을 확인하고 파일의 영구 로컬 버전에 저장할 수 있습니다. 이 모든 작업이 Chrome을 종료하지 않고도 가능합니다.
Chrome 개발자 도구 혁명 2013 도움말을 아직 읽지 않았다면 계속 읽어본 후 이 페이지를 다시 방문하여 지난 몇 개월 동안 이러한 기능이 어떻게 개선되었는지 알아보세요.
더 간편해진 파일 추가
2013년 혁명 당시 기사에서 새 작업공간을 만들려면 폴더를 작업공간에 추가한 다음 폴더를 네트워크 리소스에 매핑해야 했습니다. 이 프로세스는 한 단계로 간소화되었습니다. 소스의 왼쪽 패널을 마우스 오른쪽 버튼으로 클릭하고 작업공간에 폴더 추가를 선택하기만 하면 됩니다. 그러면 파일 대화상자가 열리며 작업공간에 추가할 새 폴더를 선택할 수 있습니다. (현재 강조표시된 폴더는 작업공간에 추가되지 않습니다.)
파일 만들기 및 삭제
이제 작업공간 자체 내에서 작업공간에 사용 중인 로컬 디렉터리에 새 파일을 추가할 수 있습니다. 왼쪽 Sources 패널에서 폴더를 마우스 오른쪽 버튼으로 클릭하고 New File을 선택하기만 하면 됩니다.
작업공간 내에서 파일을 삭제할 수도 있습니다. 왼쪽 Sources 패널에서 파일을 마우스 오른쪽 버튼으로 클릭하고 Delete File을 선택합니다.
파일 복제를 선택하여 파일을 복제할 수도 있습니다.
새로고침
이제 작업공간에서 직접 새 파일을 만들거나 파일을 삭제할 수 있으므로 Sources 디렉터리도 자동으로 새로고침되어 새 파일을 표시합니다. 그렇지 않은 경우 언제든지 폴더를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 Refresh(새로고침)를 선택하여 강제로 새로고침할 수 있습니다.
이 기능은 다른 편집기에서 열려 있는 파일을 변경하여 DevTools에 변경사항을 표시하려는 경우에도 유용합니다.
파일 전체 검색
파일 간의 검색을 위한 인터페이스를 약간 개선했으며 이제 DevTools에 로드된 모든 파일뿐만 아니라 작업공간의 모든 파일에서 문자열을 검색할 수도 있습니다. 문자열이나 정규 표현식을 검색하면 모든 파일 또는 페이지에서 일치하는 항목을 찾아줍니다. 작업공간 (현재 Canary)에서 여러 파일을 검색하려면 다음 안내를 따르세요.
- Esc 키를 눌러 콘솔 창을 열고 콘솔 옆의 검색 탭을 클릭하여 검색 창을 엽니다.
OR
Ctrl + Shift + F (Mac에서는 Cmd + Opt + F)를 눌러 검색 창을 엽니다.
- 검색 소스 상자에 쿼리를 입력하고 Enter 키를 누릅니다. 쿼리가 정규 표현식이거나 대소문자를 구분하지 않아야 하는 경우 해당 상자를 클릭합니다.
목록 무시
.git 파일이나 README.md 파일이 너무 많으면 결과가 어수선해지면 파일의 텍스트를 검색하거나 파일 이름을 필터링하는 과정이 매우 지루할 수 있습니다.
따라서 작업공간을 보고 검색할 때 특정 파일 형식이나 폴더를 제외할 수 있도록 작업공간에 무시 목록 기능을 추가했습니다.
작업공간에서 현재 공유된 무시 목록을 보고 변경하는 방법은 다음과 같습니다.
- DevTools 설정을 엽니다.
- 작업공간을 클릭합니다.
- 일반의 폴더 제외 패턴 상자 내에서 패턴을 보거나 수정할 수 있습니다.
Google에서는 다음과 같은 기본 전역 제외 패턴과 함께 제공됩니다.
이 정규식은 Git, SVN, Mercurial의 메타데이터, Eclipse 및 IntelliJ의 프로젝트 파일, OS X DS_Store 및 Trash 파일, 그리고 Sass의 캐시와 같이 무시할 만한 기타 몇 가지 메타데이터를 제외합니다. 하위 요소를 포함한 전체 폴더가 UI에서 제외되어 UI에 표시되지 않고 파일을 검색할 때 표시되지 않습니다.
작업공간별 무시 목록
더 구체적으로 검색하려면 특정 작업공간 내의 파일과 폴더를 제외하여 검색의 혼잡성을 줄일 수 있습니다. 제외된 폴더는 소스 디렉터리에도 표시되지 않습니다.
작업공간에서 전체 폴더를 제외하려면 왼쪽 소스 패널에서 폴더를 마우스 오른쪽 버튼으로 클릭하고 폴더 제외를 선택합니다. 지정된 작업공간 폴더에 대한 매핑 및 제외된 폴더를 보려면 다음 단계를 따르세요.
- DevTools 설정을 엽니다.
- 작업공간을 클릭합니다.
- 원하는 폴더를 강조표시합니다.
- 수정을 클릭하면 '파일 시스템 수정' 창이 표시됩니다. 이 창에서 매핑 및 제외된 폴더를 추가하거나 삭제할 수 있습니다.
