Google I/O 2016이 종료되었습니다. DevTools는 I/O에서 강력한 존재감을 보였습니다. Paul Bakaus, Paul Irish, Seth Thompson이 DevTools의 미래를 설명하는 강연을 했습니다. 아래 동영상을 시청하거나 계속해서 읽어 2016년 이후 DevTools의 방향에 대해 자세히 알아보세요.
작성
DevTools는 웹 개발 수명 주기의 모든 단계를 더 쉽게 만드는 것을 목표로 합니다. DevTools를 사용하여 웹사이트를 디버그하거나 프로파일링할 수 있다는 것은 알고 있지만 사이트 작성 시 DevTools를 사용하는 방법을 잘 모르는 경우도 있을 것입니다. '작성'이란 사이트를 만드는 행위를 의미합니다. 가까운 미래의 목표 중 하나는 여러 기기에서 사이트를 더 쉽게 반복, 실험, 에뮬레이션할 수 있도록 하는 것입니다.
기기 모드
DevTools팀은 Chrome 49에서 첫 번째 주요 업그레이드를 받은 기기 모드 환경을 계속해서 반복하고 있습니다. 업데이트에 관한 개요는 3월 게시물 (모바일 중심 시대를 위한 새로운 기기 모드)을 참고하세요. 전반적인 목표는 모든 폼 팩터에서 사이트를 보고 에뮬레이션하는 원활한 워크플로를 제공하는 것입니다.
3월에 도움말을 게시한 이후 Canary에 적용된 기기 모드 업데이트의 요약은 다음과 같습니다.
특정 기기로 페이지를 볼 때 페이지 주변에 기기 하드웨어를 표시하여 환경에 더 몰입할 수 있습니다.
기기 방향 메뉴를 사용하면 탐색 메뉴 및 키보드와 같은 다양한 시스템 UI 요소가 활성 상태일 때 페이지를 볼 수 있습니다.
데스크톱 스토리도 개선되었습니다. 기기 모드의 확대/축소 기능을 사용하면 실제로 작업하는 화면보다 큰 데스크톱 화면(예: 4K(3840x2160픽셀) 화면)을 에뮬레이션할 수 있습니다.
네트워크 패널로 전환하지 않고도 기기 모드 UI에서 직접 네트워크를 제한할 수 있습니다.
소스 비교
사이트의 스타일을 반복하면 변경사항을 놓치기 쉽습니다. 이를 해결하기 위해 DevTools는 소스 패널의 줄 번호 여백에 시각적 신호를 표시하여 변경사항을 추적할 수 있도록 지원합니다. 삭제된 줄은 빨간색 선으로 표시되고, 수정된 줄은 보라색으로 강조표시되며, 새 줄은 녹색으로 강조표시됩니다.
또한 새 빠른 소스 창 탭에서 변경사항을 추적할 수 있습니다.
이제 빠른 소스 탭을 사용하면 CSS 규칙과 동시에 HTML 또는 JavaScript 소스 코드에 집중할 수 있습니다. 또한 스타일 창에서 CSS 속성을 클릭하면 빠른 소스 탭이 소스의 정의로 자동으로 이동하여 강조 표시합니다.
Chrome Canary에서 소스 차이 실험을 사용 설정하여 지금 바로 사용해 보세요.
실시간 Sass 편집
다음은 Sass 수정 워크플로에 적용될 예정인 주요 개선사항을 미리 살펴보는 자리입니다. 이 기능은 실험 초기 단계에 있습니다. 사용해 보실 수 있게 되면 추후 게시물을 통해 알려드리겠습니다.
기본적으로 DevTools를 사용하면 항상 바라왔던 것처럼 Sass 변수를 보고 수정할 수 있습니다. Sass 변수에서 컴파일된 값을 클릭하면 새 빠른 소스 탭이 변수 정의로 이동합니다.
Sass 변수에서 컴파일된 값을 수정하면 선택한 개별 속성뿐만 아니라 Sass 변수도 업데이트됩니다.
프로그레시브 웹 앱
Google I/O 2016의 웹 및 Chrome 강연 목록을 살펴보면 웹 개발 분야에서 떠오르는 거대한 주제인 프로그레시브 웹 앱을 확인할 수 있습니다.
프로그레시브 웹 앱 모델이 등장함에 따라 DevTools는 개발자가 우수한 프로그레시브 웹 앱을 만드는 데 필요한 도구를 제공하기 위해 빠르게 반복하고 있습니다. 이러한 최신 애플리케이션을 빌드하고 디버그할 때 고유한 요구사항이 자주 발생한다는 점을 고려하여 DevTools에서는 프로그레시브 웹 애플리케이션 개발에 전용 패널을 마련했습니다. Chrome Canary를 열면 리소스 패널이 애플리케이션 패널로 대체된 것을 볼 수 있습니다. 리소스 패널의 이전 기능은 모두 그대로 유지됩니다. 프로그레시브 웹 앱 개발을 위해 특별히 설계된 몇 가지 새 창이 있습니다.
매니페스트 창에는 앱 매니페스트 파일이 시각적으로 표시됩니다. 여기에서 '홈 화면에 추가' 워크플로를 수동으로 트리거할 수 있습니다.
서비스 워커 창을 사용하면 현재 페이지에 등록된 서비스 워커를 검사하고 상호작용할 수 있습니다.
저장용량 지우기 창을 사용하면 모든 종류의 데이터를 삭제하여 깨끗한 페이지를 볼 수 있습니다.
자바스크립트
프런트엔드와 백엔드 간의 경계를 넘는 것은 풀스택 웹 개발에서 어려운 부분입니다. 웹 앱을 디버그하는 동안 백엔드에서 500 상태 코드를 반환하는 것으로 확인되면 DevTools의 유용성에 한도가 도달한 것이므로 컨텍스트를 변경하고 백엔드 개발 환경을 실행하여 문제를 디버그해야 합니다.
하지만 Node.js로 작성된 백엔드로 인해 프런트엔드와 백엔드 간의 경계가 점점 모호해지고 있습니다. Node.js는 V8 JavaScript 엔진 (Google Chrome을 구동하는 것과 동일한 엔진)에서 실행되므로 DevTools에서 Node.js를 디버그할 수 있도록 했습니다. Node.js팀을 위한 V8, DevTools, 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의 최신 디버깅 기능을 계속 업데이트합니다.