DevTools 터미널

Addy Osmani

DevTools 터미널은 터미널의 기능을 브라우저로 가져오는 새로운 Chrome DevTools 확장 프로그램입니다. 애셋 가져오기, git, grunt, wget, vim 사용과 같은 작업을 위해 Chrome과 명령줄 간에 컨텍스트를 전환하는 경우 이 확장 프로그램을 사용하면 시간을 절약할 수 있습니다.

DevTools 터미널은 웹 앱을 작업하는 동안 Chrome 내부에서 빠르게 명령줄을 조정하는 데 유용합니다.

네트워크 패널에서 cURL로 복사를 사용하면 전체 명령어를 DevTools 터미널에 쉽게 붙여넣고 실행할 수 있습니다.

브라우저에서 터미널을 사용하는 이유는 무엇인가요?

개발 중에는 작성용 텍스트 편집기, 테스트 및 디버깅용 브라우저, 패키지 업데이트, 헤더 컬링 또는 Grunt를 사용한 빌드 프로세스용 터미널 등 몇 가지 도구를 사용하는 데 익숙할 것입니다.

브라우저를 나가지 않고도 Grunt로 빌드 작업을 실행합니다.

개발 중에 도구 간에 컨텍스트를 전환해야 하면 방해가 될 수 있고 비효율적일 수 있습니다. 이전에 특정 유형의 프로젝트의 경우 브라우저를 벗어나지 않고 워크스페이스를 사용하여 Chrome DevTools 내에서 직접 코드를 디버그하고 작성하는 방법을 설명했습니다.

전체 Git 워크플로도 가능합니다. Workspace에서 작성한 후 git diff를 실행할 때 유용합니다.

Dmitry Filimonov의 DevTools 터미널은 이 스토리를 완성하여 동일한 창 내에서 코딩, 디버그, 빌드할 수 있도록 합니다. 탭, Ctrl, 심지어 Git 색상까지 사용할 수 있으므로 일상적인 워크플로에서 사용했던 터미널과 유사한 느낌을 받을 수 있습니다.

워크플로

git 클론, yeoman 또는 터미널을 통해 액세스할 수 있는 기타 도구로 새 프로젝트를 시작합니다.

이제 Chrome에서 작성하는 개인 워크플로는 다음과 같습니다.

• DevTools 터미널을 사용하여 GitHub 저장소를 git clone하거나, 새 파일을 touch하거나, yo (yeoman)를 실행하여 앱을 만들 수 있습니다. 원하는 경우 새 서버를 실행하여 앱을 미리 볼 수도 있습니다.
• 워크스페이스: Chrome 내에서 웹 앱을 수정하고 디버그합니다. 이전에 서버를 실행했다면 로컬 프로젝트를 네트워크 파일에 매핑할 수 있습니다. Sass 또는 Less를 사용하고 CSS 전처리기 변경사항을 CSS 파일에 다시 매핑할 수 있습니다.
• DevTools 터미널: 이제 소스 제어에 커밋하거나, 패키지 관리자 (npm, bower)를 사용하여 종속 항목을 가져오거나, 빌드 프로세스 (grunt, make)를 실행하여 동일한 앱의 최적화된 버전을 생성할 수 있습니다.
• 창 배열에 익숙해지는 데는 다소 시간이 걸릴 수 있지만 브라우저 내에서 필요한 작업 대부분을 할 수 있어 좋습니다.

ls를 사용하여 현재 작업 디렉터리의 파일 이름을 나열합니다. Workspace 외부의 디렉터리를 시각화하는 데 유용합니다.

설치

DevTools 터미널은 Chrome 웹 스토어에서 설치할 수 있습니다. Mac 또는 Linux 사용자인 경우 Chrome에 추가한 후 '요소 검사' 또는 Ctrl + Shift + I를 클릭하여 DevTools를 열면 새 '터미널' 탭을 통해 액세스할 수 있습니다. Windows 사용자는 Node.js 프록시를 사용하여 확장 프로그램을 시스템 터미널에 연결해야 합니다. 이 설정을 사용하려면 npm에서 devtools-terminal 모듈을 설치합니다. npm install -g devtools-terminal

그런 다음 새 명령줄 창을 열고 devtools-terminal를 실행합니다. 그런 다음 DevTools를 열고 '터미널' 탭에서 기본 구성 옵션을 사용하여 서버에 연결합니다. 필요한 경우 포트와 주소를 추가로 맞춤설정할 수 있습니다.

제한사항

DevTools 터미널에는 몇 가지 유의해야 할 제한사항이 있습니다. Mac의 Terminal.app 또는 iTerm2와 달리 아직 탭, 여러 창 또는 기록 재생을 지원하지 않습니다. 하지만 Chrome의 새 탭을 원하는 만큼 열 수 있으며, 각 탭에는 자체 DevTools 터미널 인스턴스가 있을 수 있습니다. Chrome 앱 화면에서 다음과 같이 할 수 있습니다.

현재 확장 프로그램은 기본 밝은 테마와 어두운 테마를 모두 지원합니다.

이 확장 프로그램은 현재 NPAPI를 사용하며, 내년부터는 Native Messaging API로 대체될 예정입니다. DevTools 터미널 작성자 Dmitry Fillimonov는 가까운 시일 내에 NPAPI를 지원 중단하고 이 API 또는 Native Client API를 지원할 계획입니다.

결론

DevTools 터미널 (및 Auxilio와 같은 유사한 확장 프로그램)을 사용하면 개발 중에 편집기, 브라우저, 명령줄 간에 전환할 필요가 없습니다. 브라우저 내 터미널이 모든 사용자에게 적합하지는 않지만 확장 프로그램이 워크플로를 보완하는 데 유용할 수 있습니다. 사용해 보고 마음에 드는지 확인해 보세요.