Google I/O 2016이 마무리되었습니다. DevTools는 I/O에서 폴 바카우스, 폴 아이리시, 세스 톰슨이 DevTools의 미래에 대해 설명하는 강연을 포함하여 활발한 참여가 이루어졌습니다. 아래 동영상을 확인하거나 2016년 이후 DevTools가 나아갈 방향에 대해 자세히 알아보세요.
작성
DevTools는 웹 개발 수명 주기의 모든 단계를 더 쉽게 만드는 것을 목표로 합니다. 여러분은 아마도 DevTools를 사용하여 웹사이트를 디버그하거나 프로파일링하는 데 도움을 줄 수 있지만, 사이트 작성을 돕기 위해 이 도구를 사용하는 방법은 모를 수도 있습니다. '작성'이란 사이트를 만드는 행위를 의미합니다. 가까운 미래의 목표 중 하나는 여러 기기에서 사이트를 더 쉽게 반복, 실험, 에뮬레이션할 수 있도록 하는 것입니다.
기기 모드
DevTools 팀은 Chrome 49에서 첫 번째 주요 업그레이드를 거친 Device Mode 환경을 계속 반복하고 있습니다. 3월 게시물 (모바일 중심 세상을 위한 새로운 기기 모드)에서 업데이트 개요를 확인하세요. 가장 중요한 목표는 모든 폼 팩터에서 사이트를 보고 에뮬레이션할 수 있는 원활한 워크플로를 제공하는 것입니다.
다음은 3월에 도움말을 게시한 이후 Canary에 도입된 일부 기기 모드 업데이트에 관한 간단한 요약입니다.
특정 기기로 페이지를 볼 때 페이지 주변에 기기 하드웨어를 표시하여 더욱 생생한 경험을 할 수 있습니다.
기기 방향 메뉴를 사용하면 탐색 메뉴나 키보드와 같은 여러 시스템 UI 요소가 활성화되어 있을 때 페이지를 볼 수 있습니다.
데스크톱 스토리도 개선되었습니다. Device Mode의 확대/축소 기능 덕분에, 4K (3840px x 2160px) 화면과 같이 실제 작업 중인 화면보다 큰 데스크톱 화면을 에뮬레이션할 수 있습니다.
Network 패널로 전환할 필요 없이 Device Mode UI에서 직접 네트워크를 제한할 수 있습니다.
소스 차이
사이트 스타일 지정을 반복하면 변경사항을 쉽게 추적하지 못할 수 있습니다. 이 문제를 해결하기 위해 DevTools는 Sources 패널의 줄 번호 여백에 시각적 신호를 사용하여 변경 사항을 추적할 수 있도록 할 것입니다. 삭제된 줄은 빨간색 선으로 표시되고, 수정된 줄은 보라색으로, 새 줄은 녹색으로 강조표시됩니다.
새로운 Quick Source 창 탭에서 변경 내용을 추적할 수도 있습니다.
처음으로 빠른 소스 탭을 사용하면 CSS 규칙과 동시에 HTML 또는 자바스크립트 소스 코드에 집중할 수 있습니다. 또한 Styles 창에서 CSS 속성을 클릭하면 빠른 소스 탭이 자동으로 소스의 정의로 이동하여 강조 표시합니다.
지금 Chrome Canary에서 소스 비교 실험을 사용 설정하여 사용해 보세요.
실시간 Sass 편집
다음은 Sass 편집 워크플로에 적용될 몇 가지 주요 개선사항입니다. 이러한 기능은 실험 단계의 초기 단계입니다. 사용해 볼 준비가 되면 이후 게시물에서 연락드리겠습니다.
기본적으로 DevTools를 사용하면 항상 바라던 대로 Sass 변수를 보고 편집할 수 있습니다. Sass 변수에서 컴파일된 값을 클릭하면 새로운 Quick Sources 탭이 변수 정의로 바로 이동합니다.
Sass 변수에서 컴파일된 값을 수정할 때 수정사항은 선택한 개별 속성뿐 아니라 Sass 변수를 업데이트합니다.
프로그레시브 웹 앱
Google I/O 2016의 웹 및 Chrome 대담 목록을 살펴보면 웹 개발 분야에서 떠오르는 커다란 주제인 프로그레시브 웹 앱을 확인할 수 있습니다.
프로그레시브 웹 앱 모델이 등장하면서 DevTools는 개발자가 훌륭한 프로그레시브 웹 앱을 만드는 데 필요한 도구를 제공하기 위해 빠르게 반복하고 있습니다. 우리는 이러한 최신 애플리케이션을 빌드하고 디버그하는 데 고유한 요구사항이 있다는 것을 깨달았기 때문에 DevTools는 프로그레시브 웹 애플리케이션 개발을 위한 전체 패널을 전담했습니다. Chrome Canary를 열면 리소스 패널이 애플리케이션 패널로 교체된 것을 볼 수 있습니다. 리소스 패널의 이전 기능은 모두 그대로 제공됩니다. 프로그레시브 웹 앱 개발을 위해 특별히 디자인된 몇 가지 새로운 창이 있습니다.
Manifest 창에는 앱 매니페스트 파일이 시각적으로 표시됩니다. 여기에서 '홈 화면에 추가' 워크플로를 수동으로 트리거할 수 있습니다.
Service Workers 창을 사용하면 현재 페이지에 등록된 서비스 워커를 검사하고 상호작용할 수 있습니다.
또한 Clear Storage 창에서 모든 종류의 데이터를 지워서 페이지를 깔끔하게 표시할 수 있습니다.
JavaScript
프런트엔드와 백엔드 사이의 경계를 넘는 것은 풀 스택 웹 개발에서 어려운 부분입니다. 웹 앱을 디버그하는 동안 백엔드가 500 상태 코드를 반환한다는 사실을 발견하면, 사실상 DevTools의 유용성의 한계에 도달한 것이며, 컨텍스트를 변경하고 백엔드 개발 환경을 실행하여 문제를 디버그해야 합니다.
그러나 Node.js로 작성된 백엔드를 사용하면 프런트엔드와 백엔드 사이의 경계가 흐려지기 시작합니다. Node.js는 V8 JavaScript 엔진 (Chrome을 구동하는 것과 동일한 엔진)에서 실행되므로 DevTools에서 Node.js를 디버그할 수 있도록 만들고자 했습니다. V8, DevTools 및 Node.js용 Google Cloud Platform팀 덕분에 이제 DevTools의 모든 강력한 디버깅 기능을 사용하여 Node.js 앱을 점검할 수 있습니다. 이 기능은 이미 Node.js 야간 빌드에 적용되었습니다. 하지만 DevTools 통합은 메이저 버전에 포함되기 전에 아직 개선 중입니다. DevTools에서 Node.js 앱을 디버깅하려면 node --inspect app.js를 전달하고 Chrome 창의 DevTools에서 연결하는 것만큼 간단합니다.
Node Inspector와 같은 기존 도구가 GUI 기반 디버깅 환경을 제공하지만, 새로운 Node.js DevTools 통합은 비동기 스택 디버깅, 블랙박스, ES6 지원과 같은 DevTools의 최신 디버깅 기능을 통해 계속 업데이트됩니다.