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에 표시되지만 탭은 다시 시작한 후에 만 ​​표시됩니다. 다시 시작하고 연결을 시도하면 모바일 브라우저가 충돌합니다.