홈페이지 » 툴킷 » 원격 디버깅을 위해 Chrome DevTools 앱을 사용하는 방법

    원격 디버깅을 위해 Chrome DevTools 앱을 사용하는 방법

    Chrome DevTools App은 Kenneth Auchenberg가 devtools를 브라우저 (이 경우 Chrome 브라우저 외부)에서 가져 오기 위해 만들어졌습니다. 이 응용 프로그램은 NW.js를 기반으로하며 Mac OS X 및 Linux 및 Windows에서 실행할 수 있습니다..

    제조업체가이 기능을 만들도록 유도하는 데는 여러 가지 이유가 있지만 개발자의 편의를 개발자에게 제공하는 것이 그의 비전입니다. 모두 동일한 통합 플랫폼 (app)의 여러 브라우저에서 원격 디버깅. 이 아이디어는 다양한 이유 (그리고 그의 블로그에서 읽을 수있는 저항) 때문에 붙잡고 실현하는 데 시간이 걸릴 것입니다..

    Chrome DevTools App에 대해 간단히 살펴보고 Google에서 개발자에게 제공해야 할 내용을 살펴 보겠습니다..

    Hongkiat에 대한 추가 정보 :

    • Chrome 개발자 도구 시작하기
    • 5 (기타) 개발자를위한 유용한 Chrome DevTools 팁
    • Google Chrome DevTools 테마를 맞춤 설정하는 방법

    설치

    Chrome-Devtools.app.zip을 다운로드하고 압축을 풉니 다. 더블 클릭하여 실행하십시오. Chrome 브라우저를 시작하고 원격 디버깅 사용.

    Mac에서이 작업을 수행하려면 터미널을 열고 아래 명령을 실행하십시오.

    sudo / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222

    창을 실행하는 경우 명령 프롬프트를 열고 다음 명령을 사용하십시오.

    chrome.exe를 시작합니다. -remote-debugging-port = 9222

    사용하는 방법

    Chrome이 이미 열려 있고 원격 디버깅 기능이 활성화되어 있으면 이제 어느 사이트 로든지 이동할 수 있습니다. 예를 들어이 연습을 위해 Hongkiat.com을 열었습니다. 다음으로 Chrome DevTools 앱 창으로 넘어갑니다. 이 목록 새로 고침 (버튼은 오른쪽 하단에 있음).

    이제 Hongkiat.com 링크가 표시됩니다 (아래 그림 참조)..

    지금 '이동'버튼을 클릭하십시오.. 새 창이 열릴 것입니다. 그게 전부 야. Chrome DevTools 앱이 이미 실행되고 있습니다. 여기서 볼 수있는 것은 Chrome 브라우저에서 '요소 검사'를 할 때와 동일합니다..

    여기에서 Chrome에서 DevTools를 기본적으로 사용하는 것과 마찬가지로 Chrome DevTools 앱을 사용할 수 있습니다. DOM 요소를 검사하고 자바 스크립트를 디버깅하며 콘솔로 작업 할 수 있습니다..

    무엇 향후 계획?

    이 응용 프로그램은 여전히 ​​매우 실험적입니다. 그러나 현재 DevTool을 Chrome에서 없애는 아이디어를 통해 개발자는 앱을 기능 편집기로 취급하고 node.js 및 iOS와 같은 다른 런타임에서 작업 할 수 있습니다. 더 많은 가능성을 찾으려면 Auchenberg의 사고 방식을 여기에서 확인하십시오..