DevTools 터미널

애디 오스마니

트위터 GitHub

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

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

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

브라우저에서 터미널을 사용하는 이유

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

브라우저를 나가지 않고도 Grunt로 빌드 작업 실행

개발 중에 도구 간에 컨텍스트를 전환해야 하는 경우 집중력이 분산되고 효율성이 떨어질 수 있습니다. 이전에 특정 유형의 프로젝트의 경우, 브라우저를 나가지 않고 작업공간을 사용하여 Chrome DevTools 내에서 직접 코드를 디버그하고 작성할 수 있는 방법에 대해 알아봤습니다.

완전한 git 워크플로도 가능합니다. 작업공간에서 작성한 후 git diff에 적합합니다.

(Dmitry Filimonov의) DevTools Terminal이 이러한 과정을 완성하므로, 동일한 창 내에서 코딩, 디버그, 빌드가 가능합니다. 탭, Ctrl, 심지어 Git 색상에 액세스할 수 있어 일상 워크플로에서 사용하던 터미널에 익숙할 수 있습니다.

워크플로

git clone, yeoman 또는 터미널을 통해 액세스할 수 있는 다른 도구를 사용하여 새 프로젝트를 시작합니다.

이제 Chrome에서 작성을 위한 개인 워크플로가 다음과 같이 표시됩니다.

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

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

설치

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

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

제한사항

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

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

이 확장 프로그램은 현재 NPAPI를 사용하며, Native Messaging API를 사용하기 위해 내년에 단계적으로 폐지될 예정입니다. DevTools 터미널 제작자인 Dmitry Fillimonov는 가까운 시일 내에 NPAPI 또는 Native Client API를 사용하기 위해 NPAPI 사용을 중단할 계획입니다.

결론

DevTools 터미널 및 이와 유사한 확장 프로그램 (예: Auxilio)을 사용하면 개발 중에 편집기, 브라우저, 명령줄 간에 전환하지 않아도 됩니다. 브라우저 내장 단말기가 모든 사람에게 적합하지는 않을 수도 있지만, 이 확장 프로그램이 워크플로를 보완해줄 유용한 확장 프로그램이라 할 수 있습니다. 사용해 보시고 마음에 드는지 직접 확인해 보시기 바랍니다.