DevTools 터미널

Addy Osmani

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

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

Network 패널에서 Copy as cURL(cURL로 복사)을 사용한 후에는 전체 명령어를 DevTools 터미널에 쉽게 붙여넣고 실행할 수 있습니다.

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

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

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

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

완전한 Git 워크플로도 가능합니다. Workspace에서 작성한 후 git diff에 좋습니다.

DevTools 터미널 (Dmitry Filimonov)이 이 과정을 완성하여, 동일한 창 내에서 코딩, 디버그, 빌드를 수행할 수 있도록 해 줍니다. Tab, Ctrl, Git 색상에 액세스할 수 있어 일상 워크플로에서 사용하는 터미널에 친숙하게 느껴집니다.

워크플로

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

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

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

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

설치

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 터미널 인스턴스가 있을 수 있습니다. 이 작업은 Chrome 앱 화면에서 수행할 수 있습니다.

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

현재 이 확장 프로그램은 Native Messaging API를 위해 내년에 단계적으로 지원이 중단되는 NPAPI를 사용하고 있습니다. DevTools 터미널 작성자인 드미트리 필리모노프는 조만간 NPAPI에서 벗어나 이 API 또는 Native Client API로 전환할 계획입니다.

결론

DevTools 터미널 및 이와 유사한 확장 프로그램 (예: Auxilio)을 사용하면 개발 중에 편집기, 브라우저, 명령줄 간에 전환할 필요가 없습니다. 누구나 브라우저 내 터미널을 사용하기는 쉽지 않을 수 있지만, 확장 프로그램이 워크플로를 보완하는 데 도움이 된다는 사실을 알고 계실 것입니다. 사용해 보시고 얼마나 마음에 드는지 직접 확인해 보시기 바랍니다!