vorlon.js 원격 디버깅 단말기 사용하기

vorlon.js 소개

공식 페이지
http://vorlonjs.com/

Microsoft Build가 2015년 발표한
웹 응용프로그램을 위한 원격 디버거 도구
인터넷에서 사용할 수 있는 크롬 개발자 도구 같은 것.
설치하다.
NodeJS가 설치되어 있어야 합니다.

npm install --save-dev vorlon

그리하여
node_modules라는 디렉터리에서'.bin'과'volon'이라고 할 수 있습니다.
설정
이 설정은 프록시 서버를 통해 디버깅을 하거나
localhost가 아닌 호스트에서 디버깅 결과를 보고 싶을 때.
미리 설정하면 편리해요.
node_modules/vorlon/Server/config.json

{
    "baseURL": "",
    "useSSLAzure":false,
    "useSSL": false,
    "SSLkey": "../cert/server.key",
    "SSLcert": "../cert/server.crt",
    "includeSocketIO": true,
    "activateAuth": false,
    "username": "",
    "password": "",
    "plugins": [
        { "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername": "interactiveConsole", "enabled": true },
        { "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername": "domExplorer", "enabled": true },
        { "id": "MODERNIZR", "name": "Modernizr", "panel": "bottom", "foldername": "modernizrReport", "enabled": true },
        { "id": "OBJEXPLORER", "name": "Obj. Explorer", "panel": "top", "foldername": "objectExplorer", "enabled": true },
        { "id": "XHRPANEL", "name": "XHR", "panel": "top", "foldername": "xhrPanel", "enabled": true },
        { "id": "NGINSPECTOR", "name": "Ng. Inspector", "panel": "top", "foldername": "ngInspector", "enabled": false },
        { "id": "NETWORK", "name": "Network Monitor", "panel": "top", "foldername": "networkMonitor", "enabled": true },
        { "id": "RESOURCES", "name": "Resources Explorer", "panel": "top", "foldername": "resourcesExplorer", "enabled": true },
        { "id": "DEVICE", "name": "My Device", "panel": "top", "foldername": "device", "enabled": true },
        { "id": "UNITTEST", "name": "Unit Test", "panel": "top", "foldername": "unitTestRunner", "enabled": true },
        { "id": "BABYLONINSPECTOR", "name": "Babylon Inspector", "panel": "top", "foldername": "babylonInspector", "enabled": false },
        { "id": "WEBSTANDARDS", "name": "Best practices", "panel": "top", "foldername": "webstandards", "enabled": true }
    ],
    "port": 1337,
    "enableWebproxy" : true,
    "baseProxyURL": "",
    "proxyPort" : 5050,
    "proxyEnvPort": false,
    "vorlonServerURL": "http://[ホスト名]:1337",
    "vorlonProxyURL": "http://[ホスト名]:5050"
}

부팅

node ./node_modules/.bin/vorlon &

이렇게 시험적으로 사용하는volon 서버를 조정하면 시작합니다.
사용법
두 가지 디버깅 방법이 있어요!
1 . proxy를 거쳐 진행됩니다.
서버를 시작하여 다음 페이지로 이동합니다.
http:/[호스트 이름]:1337/httpproxy
이렇게 나왔습니다.

입력 형식에 디버깅할 페이지를 넣을 URL
"Inspect with VORLON.JS"를 누릅니다.
proxy를 통해 보고 싶은 디버깅 화면과
크롬에서 본 화면이 나왔어요.

이렇게 하면 디버깅을 할 수 있다.
2 . 디버깅할 페이지에 디버깅할 스크립트를 추가합니다.

<script src="http://[ホスト名]:1337/vorlon.js"></script>

가끔 이 방법이 더 효율적이다.
1 상술한 방법은 때때로 터미널에서 실행할 수 없다.
"Inspect with VORLON.JS"를 눌러도 proxy 화면이 표시되지 않는 경우가 있습니다.
위 스크립트 포함 후
브라우저에 디버깅하고 싶은 페이지를 표시하면 디버깅 상태로 들어갈 수 있습니다.
예를 들어서 뭘 할 수 있는지.
자세한 내용은 공식 플러그인의 기록을 보십시오.
http://vorlonjs.com/plugins/
참고로 사례를 기재했다.
이미지는 Android 에뮬레이터에서 디버깅하는 예입니다.

층의 확인

HTML을 덮어쓸 수도 있습니다.

js console

alert 이외에 콘솔도 있습니다.로고도 가능합니다.

최후
어떠한 브라우저 환경에서도 어느 정도의 디버깅을 할 수 있어서 매우 좋다.
사파리와 크롬의
Web Inspector 기사를 안 쓰면...