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