it-source

안드로이드에서 자바스크립트를 디버그하려면 어떻게 해야 합니까?

criticalcode 2023. 8. 29. 20:42
반응형

안드로이드에서 자바스크립트를 디버그하려면 어떻게 해야 합니까?

저는 라파엘로와 관련된 프로젝트를 진행하고 있습니다.Android에서는 작동하지 않습니다.그것은 아이폰에서 합니다.

안드로이드 브라우저에서 디버깅하려면 어떻게 해야 합니까?그것은 WebKit인데, 만약 내가 그 버전을 안다면, 그 WebKit의 전체 버전에서 그것을 디버깅하면 같은 결과가 나올까요?

업데이트: 원격 디버깅

이전에는 Android에서 JavaScript를 디버깅할 때 콘솔 로깅이 가장 좋은 옵션이었습니다.요즘은 Chrome for Android 원격 디버깅을 통해 Android에서 Chrome for Desktop Developer Tools의 모든 장점을 활용할 수 있습니다.더 많은 정보를 위해 https://developers.google.com/chrome-developer-tools/docs/remote-debugging 을 확인하세요.


업데이트: JavaScript 콘솔

URL 표시줄에서 about:debug로 이동하여 최신 Android 장치로 디버그 메뉴 및 JavaScript 오류 콘솔을 활성화할 수도 있습니다.브라우저 상단에 'JAVASCript Console 표시'가 표시됩니다.

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


원답

기본 제공 기능을 사용할 수 있습니다.console를 할 수 할 수 .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)위치 표시줄에 웹킷 버전이 나열되어 있습니다.

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 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

N.B.

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

시도:

  1. 디버그할 페이지 열기
  2. 이 페이지에서 Android 브라우저의 주소 표시줄에 다음을 입력합니다.

    about:debug 
    

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

제가 시도한 장치에서 작동합니다.Android 브라우저에 대한 자세한 내용:디버그, 이러한 설정은 어떤 기능을 합니까?

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

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 )은 웹 페이지의 내용에 액세스하는 데 사용할 수 있는 좋은 방법을 제공합니다.

저는 아파치 코르도바의 일부인 와인을 사용합니다.

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

하지만 실제 자바스크립트 코드를 보거나 단계적으로 진행하는 것은 불가능하다고 생각합니다.그래서 Weinre와 로그 메시지를 결합합니다.

(JConsole에 대해서는 잘 모르지만, JConsole에서는 자바스크립트 명령어와 로깅(?)만으로 HTML과 CSS 검사가 불가능한 것 같습니다.)

jsHybugger를 보세요.이를 통해 다음에 대한 JS 코드를 원격으로 디버그할 수 있습니다.

  • Android 하이브리드 앱(웹 보기, 폰갭, 워크라이트)
  • 기본 안드로이드 브라우저에서 실행되는 웹 페이지(Chrome이 아님, 이 도구 없이 ADB 확장을 지원함)

이 작업 방식(프로젝트 사이트에 대한 자세한 내용과 대안, 이것이 가장 좋은 방법임을 알게 되었습니다.)

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

Android에서 Chrome을 사용하면 jsHybugger 없이 ADB 확장을 사용할 수 있습니다.저는 이것이 이미 이 질문에 대한 수용된 답변에 기술되었다고 생각합니다.

참고로 라파엘이 왜JS가 안드로이드에서 작동하지 않는 것은 (iPhone 웹킷과 달리) 현재 안드로이드 웹킷이 SVG를 지원하지 않는다는 것입니다.구글은 최근에야 SVG가 안드로이드를 지원하는 것이 좋은 생각이라는 결론을 내렸고, 그래서 한동안은 아직 사용할 수 없을 것입니다.

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

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

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

Chrome은 실제 Android Chrome 컨텐츠(검사 등 포함)를 PC 화면으로 간단하게 이동할 수 있는 훌륭한 기능을 가지고 있습니다...

  • 합니다. 디버깅을 통해 한 번 해야 할 수도 .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브라우저에서 아무것도 표시되지 않음)

줄에 소 주에입력인라▁put력을 입력합니다.chrome://about가능한 모든 개발 페이지에 대한 링크가 표시됩니다.

라파엘은 3.0 이전 안드로이드 브라우저에서 지원되지 않습니다. 이것이 바로 당신의 문제입니다.SVG 그래픽을 지원하지 않습니다.하지만 캔버스를 지원합니다.애니메이션이 필요 없는 경우 캔버스로 그래픽을 렌더링할 수 있습니다.

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

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

about:debug(또는)chrome:\\debug다 수 되지만 Samsung 에탭서 Android KitKat4. 4.4.2에서 합니다).

장치에 대한 루트 권한이 있는 경우 장치에서 직접 콘솔 메시지를 볼 수 있습니다.CatLog와 같은 앱을 사용하여 로그 출력을 봅니다. https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en 이렇게 하면 모든 로그캣 활동을 볼 수 있습니다.

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

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

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

  • 로그 및 오류를 검색합니다.
  • 개체 편집기.

사용 방법:

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

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

chrome://inspect/#devices

원격 대상 목록이 표시됩니다.목표를 찾아 '검사' 링크를 클릭합니다.

(주식 브라우저용) 솔루션은 다음과 같습니다.

  • 스톡 브라우저
  • "consolo.log"를 JS 소스 코드에 입력합니다.
  • 디버그 USB 사용
  • 안드로이드 SDK
  • Android SDK에서 : 모니터.박쥐
  • 합니다.enter image description here

모바일 웹 사이트/앱을 위한 자체 디버깅 도구를 추가하는 리릴리/에루다에 대해서는 아무도 언급하지 않았습니다.

페이지에 추가:

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

콘솔을 여는 부동 아이콘을 페이지에 추가합니다.

"Kiwi 브라우저"는 데스크톱 크롬 브라우저와 동일한 도구를 가지고 있으며 usb 없이 안드로이드에서 로컬로 디버그할 수 있습니다.html 파일을 로드하고 메뉴에서 "개발자 도구"를 선택합니다.디버깅을 다시 시작해야 하는 경우 html을 다시 로드합니다.

Android 스튜디오는 console.log 등을 볼 수 있는 모든 것을 제공합니다.logcat에서 "/Web Console"로 필터링하기만 하면 js 로그가 표시됩니다...

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

원격이 아닌 옵션을 찾는 경우:

루트가 없는 이전 젤리빈 릴리스에서는 안드로이드일 경우 로그캣 뷰어를 사용할 수 있습니다.허가.READL_LOGs는 adb를 통해 한 번 부여됩니다.

파이어폭스에는 모든 앱 로그를 읽고 표시하는 콘솔 애드온이 있으며 파이어버그 라이트도 있습니다.

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

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

또한 "https://javascript-compiler-deva.herokuapp.com/ "에서 개최됩니다.

로컬 디버깅/정보:config...2020+ 크롬/오프/.. 옵션은 작동하지 않는 것 같습니다.브라우저를 더 이상 사용할 수 없습니다.

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

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

당신은 https://github.com/fullpipe/screen-log 을 사용해 볼 수 있습니다.깨끗하고 단순하게 만들려고 노력했습니다.

"vconsole"을 사용해 보십시오. 도움이 될 수 있습니다.

언급URL : https://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android

반응형