Android에서 자바 스크립트를 어떻게 디버깅 할 수 있습니까?

Raphaeljs와 관련된 프로젝트를 진행 중입니다. Android에서는 작동하지 않습니다. 그것은 아이폰에서 않습니다 .

안드로이드 브라우저에서 디버깅하는 방법은 무엇입니까? 내가 버전을 알고있는 경우의 웹킷은, 그래서, 그것을 디버깅 할 것이다 전체 웹킷이 같은 결과를의 버전?

업데이트 : 원격 디버깅

이전에는 콘솔 로깅이 Android에서 JavaScript를 디버깅하는 데 가장 적합한 옵션이었습니다. 요즘에는 Chrome for Android 원격 디버깅을 통해 Android 용 Chrome for Desktop 개발자 도구의 모든 장점을 활용할 수 있습니다. 자세한 내용은 https://developers.google.com/chrome-developer-tools/docs/remote-debugging 을 확인 하십시오.

업데이트 : JavaScript 콘솔

URL 막대에서 about : debug로 이동하여 최신 Android 장치에서 디버그 메뉴 및 JavaScript 오류 콘솔을 활성화 할 수 있습니다. 브라우저 상단에 SHOW JAVASCRIPT CONSOLE이 표시되어야합니다.

현재 Android 4.0.3 (Ice Cream Sandwich)에서 logcat은 브라우저 채널로 출력됩니다. 를 사용하여 필터링 할 수 있습니다 adb logcat browser:* *:S.

원래 답변

내장 consoleJavaScript 객체를 사용하여로 검토 할 수있는 로그 메시지를 인쇄 할 수 있습니다 adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

이 출력을 생성합니다.

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

WebKit 버전 확인

javascript:alert(navigator.userAgent)위치 표시 줄에 입력 하면 WebKit 버전이 표시됩니다.

Chrome에서 : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Android 에뮬레이터에서 Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Safari 릴리스의 일부가 아닌 WebKit 버전은 버전 번호 뒤에 +가 있으며 버전 번호는 일반적으로 최신 릴리스 버전의 WebKit보다 높습니다. 예를 들어 528+는 WebKit의 비공식 빌드로 Safari 3.1.2의 일부로 제공된 525.x 버전보다 최신입니다.

시험:

1. 디버깅하려는 페이지를 엽니 다

2. 해당 페이지에서 주식 Android 브라우저의 주소 표시 줄에 다음을 입력하십시오.

   about:debug 

   (아무것도 일어나지 않지만 일부 새로운 옵션이 활성화되었습니다.)

내가 시도한 장치에서 작동합니다. Android 브라우저에서 : debug에 대해 자세히 읽어보십시오 . 해당 설정의 기능은 무엇입니까?

편집 : 줄 번호와 같은 추가 정보를 검색하는 데 도움이되는 것은이 코드를 스크립트에 추가하는 것입니다.

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) 당신의 웹 페이지 콘텐츠에 액세스하는 데 사용할 수있는 좋은 방법을 제공합니다.

나는 Apache Cordova의 일부인 Weinre를 사용한다 .

Weinre를 사용하면 데스크톱 브라우저에 Chrome의 디버그 콘솔이 있으며 Android를 해당 디버그 콘솔에 연결하고 HTML 및 CSS를 디버깅 할 수 있습니다. 콘솔에서 Javascript 명령을 실행할 수 있으며 Android 브라우저의 웹 페이지에 영향을줍니다. Android의 로그 메시지가 데스크탑 디버그 콘솔에 나타납니다.

그러나 실제 Javascript 코드를 보거나 단계별로 볼 수는 없다고 생각합니다. 그래서 Weinre와 로그 메시지를 결합했습니다.

( JConsole에 대해서는 많이 알지 못하지만 JConsole로는 HTML 및 CSS 검사가 불가능하고 Javascript 명령 및 로깅 (?) 만 가능합니다.)

jsHybugger를 살펴 보십시오 . 다음을 위해 js 코드를 원격으로 디버깅 할 수 있습니다.

• Android 하이브리드 앱 (웹뷰, phonegap, 작업 등)
• 기본 Android 브라우저 에서 실행되는 웹 페이지 (Chrome이 아닌이 도구없이 ADB 확장을 지원함)

이것이 작동하는 방법 (프로젝트 사이트의 자세한 내용과 대안, 이것이 내가 가장 좋은 방법이라고 생각했습니다).

1. 기기에 jsHybugger APK 설치
2. 장치에서 USB 디버깅을 활성화하십시오.
3. USB를 통해 Android 기기를 데스크톱 컴퓨터에 연결
4. Android 기기에서 앱 실행 ( 'jsHybugger')
5. 앱에 대상 URL과 페이지를 입력하십시오. 서비스 시작을 누르고 마지막으로 브라우저 열기
   • 설치된 브라우저 목록이 표시되면 하나를 선택하십시오.
   • 브라우저가 시작됩니다.
6. 데스크톱 컴퓨터로 돌아가서 Chrome을 chrome : // inspect /
7. Chrome 기기 디버깅 도구가 Android 기기의 페이지에 연결된 관리자 창이 나타납니다.
8. 디버그!

다시 Android의 Chrome에서는 jsHybugger없이 ADB 확장을 사용합니다. 나는 이것이 이미이 질문에 대한 대답에 설명되어 있다고 생각합니다.

참고로 RaphaelJS가 안드로이드에서 작동하지 않는 이유는 안드로이드 웹킷 (iPhone 웹킷과 달리)이 현재 SVG를 지원하지 않기 때문입니다. 구글은 최근 SVG가 안드로이드를 지원한다는 것이 좋은 아이디어라는 결론에 도달했다. 그래서 아직은 사용할 수 없을 것이다.

Android 5.1.1의 Galaxy S6에서 Android 기본 브라우저의 전체 Chrome 원격 디버깅 :

1. 휴대 전화에서 USB 디버깅 사용 (설정, 정보, 빌드 번호 빠르게 탭, 개발자 설정, USB 디버깅)
2. "인터넷"열기
3. 'about : debug'로 이동합니다 (오류가 표시됨)
4. 추가 메뉴> 설정> 디버그> 원격 디버깅
5. USB 케이블로 컴퓨터에 전화 연결
6. 전화의 인터넷 웹 브라우저에서 디버깅하려는 사이트를 엽니 다.
7. 컴퓨터에서 Chrome을 엽니 다.
8. 'chrome : // inspect'로 이동
9. 검사하려는 브라우저 탭에서 검사를 클릭하십시오.

Galaxy S5 기기는 Chrome에 표시되지만 탭은 다시 시작한 후에 만 ​​표시됩니다. 다시 시작하고 연결을 시도하면 모바일 브라우저가 충돌합니다.

Raphael은 3.0 이전 버전의 Android 브라우저에서 지원되지 않으므로 문제가 있습니다. SVG 그래픽을 지원하지 않습니다. 그래도 캔버스를 지원합니다. 애니메이션을 적용 할 필요가 없으면 canvg를 사용하여 그래픽을 렌더링 할 수 있습니다.

http://code.google.com/p/canvg/

이것이 기본 안드로이드 브라우저에서 SVG 아이콘을 렌더링하기 위해이 문제를 해결 한 방법입니다.

about:debug(또는 chrome:\\debug둘 다 페이지를 찾을 수 없습니다 말하지만, 설정에서 디버그 메뉴를 활성화) 삼성 탭에 안드로이드 킷캣 4.4.2에 크롬이나 오페라에 시도 할 때

장치에 대한 루트 권한이 있으면 장치에서 직접 콘솔 메시지를 볼 수 있습니다. - 로그 출력을 볼 수 CatLog 같은 응용 프로그램을 사용 https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en 이 모든 로그 캣 활동을 볼 수있게됩니다.

Android KitKat / 4.4.2에서 브라우저 콘솔은 Chromium 채널로 출력됩니다. "Chromium"으로 필터링하여 모든 브라우저 활동 (브라우저의 내부 활동 포함)을 가져 오거나 "콘솔"로 필터링하여 브라우저 콘솔 로그 만 볼 수 있습니다.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

주소란에 입력하십시오 chrome://about. 가능한 모든 개발자 페이지에 대한 링크가 표시됩니다.

js 내장 콘솔 인 YConsole 을 사용해 볼 수 있습니다 . 가볍고 사용하기 쉽습니다.

• 캐치 로그 및 오류.
• 개체 편집기.

사용하는 방법 :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Android 에뮬레이터를 실행할 때 Google Chrome 브라우저를 열고 '주소 필드'에 다음을 입력하십시오.

chrome://inspect/#devices

원격 대상 목록이 표시됩니다. 목표를 찾고 '검사'링크를 클릭하십시오.

Chrome에는 실제 Android Chrome 콘텐츠 (검사 등 포함)를 PC 화면으로 가져 오는 멋진 기능이 있습니다.

• 기기에서 USB 디버깅을 사용 adb devices하도록 설정하면 휴대 기기에서 "...와의 통신 허용 ..."대화 상자를 트리거 하기 위해 한 번 연결해야 할 수도 있습니다 .
• Android 기기를 PC에 연결하고
• 둘 다에서 Chrome을 시작하고
• 그런 다음 chrome://inspect/#devicesPC 를 탐색 하십시오.
• 여기에는 휴대 전화 Chrome의 탭이 나열되어 있으며 검사 할 수 있습니다.

인터넷에 자세한 매뉴얼이 있습니다 : https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(후에 adb logcat브라우저에서 아무것도 보이지 않았다는 것을 알았습니다 )

내 솔루션은 (주식 브라우저)입니다.

• 주식 브라우저
• JS 소스 코드에 "consolo.log"
• USB 디버그 가능
• 안드로이드 SDK
• Android SDK에서 : monitor.bat
• 첨부 된 이미지로 모니터 필터

Android 스튜디오는 console.log 및 기타를 보는 데 필요한 모든 것을 제공합니다. logcat에서 "/ Web Console"로 필터링하면 js 로그가 표시됩니다 ...

문제가 발생하면이 플러그인을 추가 할 수 있습니다 : https://github.com/apache/cordova-plugin-console

비 원격 옵션을 찾는 경우 :

초기 및 비 루트 Jellybean 릴리스에서 adb를 통해 android.permission.READL_LOGS가 한 번 부여되면 logcat 뷰어를 사용할 수 있습니다.

firefox 에는 모든 앱 로그를 읽고 표시 하는 콘솔 애드온 이 있으며 firebug lite도 있습니다.

"npm install javascript-compiler-deva"명령을 실행 한 다음 "node compiler.js"를 사용하여 compiler.is를 실행하여 npm 라이브러리에서 "javascript-compiler-deva"를 시도 할 수 있습니다.

포트 8888에 서버를 생성합니다. 그런 다음 " http : // localhost : 8888 "을 누르고 JavaScript 코드를 입력하면 전화 브라우저 자체에서 "console.log"를 포함한 JavaScript 코드의 결과를 볼 수 있습니다.

또한 " https://javascript-compiler-deva.herokuapp.com/ " 에서 호스팅됩니다

로컬 디버깅 / about : config ... 옵션이 2020+ chrome / ff / .. 브라우저에서 더 이상 작동하지 않는 것 같습니다.

원격이 아닌 js 콘솔이있는 또 다른 브라우저는 DevBrowser입니다.

또는 WebInspector (파일 선택기가 작동하지 않음)