Chrome DevTools November Digest

HTML5 Rocks

크롬 개발자도구는 빠르게 움직이고 있으며 우리가 소개하고자 하는 몇몇 컴포넌트의 새로운 기능들과 개선점들이 여러분의 관심을 받기를 원합니다. 즉, 몇가지 UI 변경점들, 고해상도 JS 프로파일링과 새로운 작업영역(Workspace) 기능에 대해 얘기하고자 합니다.

  • 고해상도 프로파일링이 이제 .1 밀리초 단위로 동작합니다.

  • 툴바가 개발자도구의 상단에 생겨났고 Overrides가 콘솔 드로어(Drawer)로 이동하였습니다.

  • 작업영역(Workspace)들에 파일의 추가/삭제/검색을 지원하는 몇가지 기능이 추가되었습니다.

고해상도 프로파일링

CPU 프로파일링은 얼마나 자바스크립트가 효율적인지를 보기 위해 꽤나 유용한 기능입니다. 이번 여름에 전통적인 프로파일 뷰들에 더하여 페이지의 과도한 자바스크립트 처리를 비주얼하게 표현하는 플레임 차트(Flame Chart)를 소개했습니다. 이는 호출 스택이 얼마나 깊게 호출되어 가고 있는지와 더불어 개별적인 함수들의 처리에 얼마나 시간이 걸리는지를 손쉽게 보는데 사용될 수 있습니다.

최근까지 전통적인 무거움(상향식의)과 트리(하향식) 표현들과 더불어 플레임 차트(Flame Chart)는 1밀리초 단위로 처리를 보여줄 수만 있었습니다. 대부분의 어플리케이션에서 괜찮습니다. 그러나, 게임처럼 UI에서 정말 속도 문제가 있는 무언가를 동작하려고 한다면 1밀리초 해상도는 너무나 두터워서 무엇이 사이트를 느리게 만들고 UI에 랙을 발생하는지에 대한 의미있는 결과를 얻을 수가 없습니다.

(현재는 Canary에서만 지원하는) 고해상도 프로파일링(High Resolution Profiling)을 가능하게 하기 위한 방법은 다음과 같습니다.

  1. 개발자도구(DevTools)의 설정을 엽니다.

  2. 프로파일러 하위의 일반 탭에서 고해상도 CPU 프로파일링(High resolution CPU Profiling)을 켜시기 바랍니다.

여기 HTML5Rocks 홈페이지의 로딩을 알려주는 일반적인 프로파일링에서 볼 수 있고 고해상도를 가지는 플레임 차트(Flame Chart)의 예가 있습니다.

기본 해상도의 플레임 차트(Flame chart)
고해상도의 플레임 차트(Flame chart)

일반 프로파일링 해상도에서, 처리 시간은 언제나 다음 밀리초에 합해집니다. 그러므로 0.1 밀리초나 그 미만으로 처리되는 경우 여전히 1.0 밀리초로 리포팅되며 다른 처리들은 아마도 호출 스택에서 전부 보이지는 않을 것입니다.

고해상도 프로파일링은 자바스크립트 VM의 큰 오버헤드를 발생하기 때문에 기본적으로 비활성화되어 있습니다. 확실히 일반 프로파일링 해상도보다 명확하게 보이기 때문에 여러분이 정밀함이 실제로 필요할 때만 사용할 것을 권장합니다.

개발자도구의 UI 개선점들

카나리(Canary)에서는 언제나 새로운 것들 출시되고 있기 때문에 일반적으로 UI의 상단에 나타나는 버튼들, 타임라인 탐색 및 정보 패널들 그리고 Overrides의 콘솔 드로어(Console Drawer)로의 재배치와 같은 몇가지 주요한 UI 변경들에 대해서 주의를 환기하고자 합니다.

첫번째, 우리가 어디로부터 오고 있는지를 살펴보도록 하죠. 왜냐하면 우리는 어쨌던 타임라인에 대해 이야기를 하고 있고 저는 한쌍의 스크린샷으로 첫번째 일타쌍피를 하려 합니다. 바로 크롬(Stable 버전)에서 타임라인에 무엇이 보이는지 다음을 살펴보도록 하겠습니다.

기존 타임라인

그리고 이제 타임라인에 무엇이 보이는지 살펴보겠습니다.

새로운 타임라인

다음과 같은 점들에 주의하시기 바랍니다.

  1. 툴바들과 버튼들은 이제 모두 스크린의 상단에 있으며, 왼쪽에는 특정한 타임라인 그리고 일반적인 개발자도구들은 오른쪽에 위치합니다.

  2. 타임라인은 이제 패널에서 왼쪽에 내재된 구조를 기록하며 그것들을 스크롤하는데 키보드도 사용할 수 있습니다. 추가적으로 위/아래키는 위/아래 스크롤에 사용되며 좌우 키를 이용하여 내재된 레코드들을 열고 닫을 수 있습니다.

  3. 시간 상세정보는 이제 패널에서 선택한 항목들의 오른쪽에 표시됩니다. (다른 항목들에 마우스를 올려놓음(hover)으로써 해당 항목에 대한 정보를 확인할 수 있습니다.)

이제 콘솔 드로어(Console Drawer)를 살펴보도록 하겠습니다. 콘솔 드로어를 열기 위해 개발자도구 안에서 Escape 키를 누르거나 콘솔 드로어 버튼 drawer icon을 클릭하면 드로어가 아래에서 나타납니다.

기본적으로 콘솔(Console)검색(Search) 탭이 있을 것입니다. 공식적으로는 Overrides로 알려진 기능을 사용하기 위해 개발자도구(DevTools)의 설정을 열고 "Show 'Emulation' view in console drawer" 옆의 박스를 체크합니다. 설정 박스를 닫으면 에뮬레이션(Emulation) 탭이 다음 스크린샷과 같이 콘솔 드로어 내에 있을 것입니다.

콘솔 드로어(Console drawer와 Overrides

그리고 그것으로 모든 에뮬레이션을 할 수 있습니다.

이렇게 변경된 이유는 기존에는 에뮬레이션 Overrides의 변경을 위해 설정(Settings)에 들어갔다 나와야 했고 그리고나서 되돌아가서 페이지를 볼 수 있었기 때문입니다. 이제 스타일을 조작하는 동안에도 에뮬레이션 오버라이드(Emulation Overrides)를 변경할 수 있습니다.

개선된 작업영역(Workspace)

작업영역(Workspace)는 특히 저작 작업흐름을 꽤 많이 단순화시켜줄 수 있는 기능이며 아직 충분히 사랑받을만큼 사용되지는 않고 있습니다. 작업영역(Workspace)를 이용하여 개발자도구(DevTools)에서 실험과 변경도 가능하며 변경들을 소스파일로 복사하고 붙일 수 있을 뿐만이 아니라 개발자도구에서 변경한 부분이 브라우저에서 렌더링되는 것을 확인할수도 있고 로컬 파일의 영구적인 버전으로 저장할 수 있습니다 -- 모두가 크롬을 떠날 수 없는 이유일겁니다.

만약 Chrome Developer Tools Revolutions 2013 글을 아직 읽어보지 않았다면, 바로 살펴보시고 나서 돌아와 지난 몇달동안 어떻게 저 기능들이 개선되었는지 알아보시기 바랍니다.

손쉬운 파일 추가

Revolutions 2013 튜토리얼로 돌아가보면 새로운 작업영역(Workspace) 생성하기는 작업영역(Workspace)에 폴더를 추가하고 네트워크 리소스에 대한 폴더 맵핑 과정이 필요합니다. 이 과정을 다음과 같이 한단계로 단순화하였습니다. 간단하게 Sources의 왼쪽 패널에서 오른쪽 클릭하고 Add Folder to Workspace를 선택합니다. 이것은 작업영역(Workspace)에 추가할 새로운 폴더를 고를 수 있도록 파일 다이얼로그를 실행합니다. (이 기능은 현재 하이라이트된 폴더를 작업영역(Workspace)에 추가하는 것이 아닙니다.)

작업영역(Workspace)에 폴더 추가

파일의 생성과 삭제

이제 새로운 파일을 사용 중인 그 자신의 작업영역(Workspace) 내의 로컬 디렉토리로 추가할 수 있습니다. 왼쪽의 소스 패널의 폴더에서 간단히 오른쪽 클릭을하고 New File을 선택하면 됩니다.

새 파일

또한 작업영역(Workspace) 내로부터 파일을 삭제할 수 있습니다. 왼쪽의 소스 패널의 파일 상에서 오른쪽 클릭을 하고 Delete File을 선택하면 됩니다.

파일 삭제

역시 파일의 복제는 Duplicate File을 선택함으로써 할 수 있습니다.

새로고침

이제 여러분은 작업영역(Workspace)에서 새로운 파일을 직접 생성(하거나 삭제)할 수 있으며, 소스 디렉토리 또한 새로운 파일들을 자동으로 새로고침하고 보여줄 것입니다. 만약 그렇지 않다면, 항상 폴더 상에서 오른쪽 클릭을 하고 강제로 새로고침을 하는 팝업 메뉴에서 Refresh를 선택할 수 있습니다.

이는 또한 다른 편집기에서 열려있는 파일의 변경이 일어났을 때 이 변경들을 개발자도구 상에서 보고자할 경우에도 유용합니다.

파일 검색

우리는 파일 검색에 대한 인터페이스를 조금 변경했으며 이제 작업영역(Workspace) 내에 있는 모든 파일들 뿐만이 아니라 개발자도구에 로딩되어 있는 모든 파일들 간에도 문자열을 검색할 수 있습니다. 문자열을 검색할 수도 정규표현식으로 검색할 수도 있으며 모든 파일이나 페이지 안에 있는 모든 것들에 대해 맞추어 볼 것입니다.
작업 공간에서 다수의 파일을 검색하기 위한 방법은 다음과 같습니다. (현재는 카나리에서만 됩니다.)

  1. ESC 키를 눌러 콘솔 드로어를 열고 검색 윈도우를 열기 위해 Console 옆에 있는 Search 탭을 누릅니다.

    혹은

    Ctrl + Shift + F (Mac에서는 Cmd + Opt + F)를 눌러 검색 윈도우를 엽니다.

  2. 쿼리문을 Search Sources 박스에 넣고 엔터를 칩니다. 만약 쿼리문이 정규표현식이거나 대소문자 구분(Case-insensitive)를 해야한다면 적절한 박스를 클릭하시기 바랍니다.

파일 간의 검색

무시 리스트(Ignore Lists)

만약 엄청나게 많은 .git 파일이나 README.md 파일들을 가지고 있다면 어수선해진 결과에서 파일의 텍스트를 검색하거나 파일 이름으로 필터링하는 것은 아주 번거로울 수 있습니다.

그러므로, 우리는 작업영역(Workspace)에 무시 리스트(Ignore Lists) 기능을 추가하여 작업영역(Workspace)을 보거나 검색할 때 특정한 파일 타입이나 폴더들을 배제할 수 있도록 하였습니다.

다음과 같이 작업영역(Workspace)에서 현재 공유되고 있는 무시 리스트를 보고 변경할 수 있습니다.

  1. 개발자도구(DevTools)의 설정(Settings)을 엽니다.

  2. 작업영역(Workspace)을 클릭합니다.

  3. CommonFolder exclude pattern(폴더 배제 패턴) 박스 내에서 패턴들을 보거나 편집할 수 있습니다.

파일 패턴의 배제(Exclude file patterns)

다음과 같이 전역으로 배제 패턴(Global exclude patterns)를 추가할 수 있습니다.

/.git/|/.sass-cache/|/.hg/|/.idea/|/.svn/|/.cache/|/.project/|/.DSStore$|/.Trashes$|/.Spotlight-V100$|/.AppleDouble$|/.LSOverride$|/Icon$|/..*$

이 정규표현식은 Git, SVN, Mercurial, Eclipse와 IntelliJ의 프로젝트 파일들, OS X의 DS_Store와 쓰레기(Trash) 파일들 그리고 Sass의 캐쉬같은 무시될만한 가치가 있는 몇가지 다른 것들로부터의 메타데이터들을 배제합니다. 그들의 전체 폴더와 자식들을 포함하여 UI에서 보여지지 않도록 UI로부터 배제되며 파일 검색 시에도 보여지지 않습니다.

특정 작업영역(Workspace)에 대한 무시 리스트(Workspace-specific Ignore Lists)

또한 더 특정을 하기 위해 검색의 어수선함을 감소하기 위해 특정한 작업영역(Workspace) 안의 파일과 폴더들을 배제하도록 선택할 수 있습니다. 배제된 폴더는 소스 디렉토리에서도 나타다지 않습니다.

작업영역(Workspace)에서 전체 폴더를 배제하기 위해 왼쪽의 Sources 패널의 폴더 상에서 오른쪽 클릭을 하고 Exclude Folder을 선택합니다.
다음과 같이 주어진 작업영역(Workspace)의 폴더에 대한 매핑되거나 배제된 폴더들을 볼 수 있습니다.

  1. 개발자도구의 설정(Settings)를 엽니다.

  2. 작업영역(Workspace)을 클릭합니다.

  3. 관심 폴더를 하일라이트합니다.

  4. Edit을 클릭하고 "Edit file system" 윈도우가 나타나면 여러분은 이 윈도우에서 매핑을 추가/삭제하거나 폴더들을 배제할 수 있습니다.

Exclude folders

Comments

0