Android 휴대 전화의 Chrome에서 개발자 도구 콘솔을 열 수 있습니까?

165

AngularJS 응용 프로그램은 데스크톱에서 제대로 작동하지만 모바일에서는 제대로 렌더링되지 않습니다 (실제 코드 표시). 이것은 안드로이드 폰에 있습니다.

콘솔에 어떤 오류가 표시되는지 확인하고 싶습니다.

모바일의 Chrome 앱에서 JS 콘솔을 열 수 있습니까 (데스크톱에있는 것처럼)?

google-chrome-devtools mobile-chrome

— tim_xyz
소스

134

원격 디버깅을 사용하여 수행 할 수 있습니다 . 공식 문서 는 다음과 같습니다 . 기본 과정 :

당신의 안드로이드 장치를 연결
장치 선택 : 추가 도구> *pc / mac의 개발 도구에서 장치 검사
휴대 기기에서 승인합니다.
행복한 디버깅 !!

* 이것은 이제 "원격 장치"입니다.

— 슈도 아지
소스

2

자세한 설명은 문서 링크

— PseudoAj

59

외부 컴퓨터없이이 작업을 수행 할 수 있습니까?

— 에릭 리드

59

Android 휴대 전화의 Chrome에서 열린 개발자 도구 콘솔을 묻는 질문이 있습니까? 당신의 영혼은 별도의 디버깅 머신이 필요합니다. 귀하의 답변에 디버깅은 전화 자체에 없습니다

— Fennekin

5

@fennekin을 알고있는 다른 방법은 없습니다. 더 좋은 방법이 있다고 생각되면 언제든지 업데이트하십시오.

— PseudoAj

5

2019 년 1 월 현재 추가 도구에서 Inspect 기기를 찾을 수 없었습니다. 마침내 chrome : // inspect에서 찾았습니다. 휴대 전화에서 USB 디버깅을 허용해야합니다

— Abhinav Singh

53

PC가없는 경우 모바일 브라우저를위한 devtools 인 Eruda를 사용할 수 있습니다. https://github.com/liriliri/eruda 포함
가능한 자바 스크립트와 북마크릿 (크롬에 북마크를 붙여 넣으면 자바 스크립트 : 접두사이므로 직접 입력해야합니다)

— 흙손
소스

1

고독한 모바일 장치에서의 개발을 현실화하는 Termux와 같은 도구와 매우 잘 어울립니다! 이미 eruda-webpack-plugin하나의 프로젝트에 통합 했습니다 npm i eruba-webpack-plugin --save-optional.

— vintproykt

콘솔에있는 것을 얻는 가장 쉬운 방법

— makwana.a

멋진 해결책. CDN으로 제공됩니다.

— netishix

이것은 나를 위해 작동하지 않는 것 같습니다. 주소 표시 줄에 붙여 넣은 다음 'javascript :'를 읽는 것은 아무것도하지 않는 것 같습니다.

— BT

@BT 일부 웹 사이트는 나열된 허용 도메인에서 스크립트를로드하는 것으로 제한합니다. 다른 웹 사이트에서 사용해보십시오.

— trogper

10

콘솔에 인쇄 된 내용 만보고 싶을 때 HTML의 어딘가에 "인쇄 된"부분을 추가하여 웹 페이지에 표시되도록 할 수 있습니다. 직접 할 수는 있지만 이것을 수행하는 자바 스크립트 파일이 있습니다. 여기에서 읽을 수 있습니다.

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

코드는 Github에서 구할 수 있습니다 . 당신은 그것을 다운로드하여 javascipt 파일에 붙여 넣고 HTML에 추가 할 수 있습니다

— 존 발빈 아리아스
소스

참고 : 콘솔이 표시되지 않는 상황이 발생할 수 있습니다. 공식 홈페이지 끝 부분의 대화를 바탕으로 명시 적으로 대화를 시도 할 수 있습니다 mobileConsole.init(). 그 트릭은 내 경우에 도움이됩니다. YMMV.

— RayLuo

1

해당 링크는 여전히 작동하지만로드하는 데 시간이 오래 걸립니다. 그럼에도 불구하고 본인과 그 lib 소유자 간의 대화가 기본 페이지의 메모 섹션에 다음 정보를 추가 한 것으로 요약 할 수 있습니다. override로 자동 실행을 실행하거나 페이지에 다음 스크립트를 추가하십시오. if (!mobileConsole.status.initialized) { mobileConsole.init(); } "

— RayLuo

7

자신에게 호의를 베풀고 쉬운 버튼을 누르십시오.

Play 스토어에서 Web Inspector (오픈 소스) 를 다운로드 하십시오 .

주의 사항 : ATTOW, 콘솔 출력은 나머지 매개 변수를 허용하지 않습니다! 즉, 다음과 같은 것이 있다면

console.log('one', 'two', 'three');

당신은 볼 수 있습니다

하나

콘솔에 기록했습니다. 다음과 같이 매개 변수를 Array에 수동으로 래핑하고 조인해야합니다.

console.log([ 'one', 'two', 'three' ].join(' '));

예상 출력을 확인하십시오.

그러나 응용 프로그램은 오픈 소스입니다 ! 패치 가 임박했습니다 ! 패처도 당신 이 될 수 있습니다!

— 선생님 제임스
소스

3

Kiwi Browser는 모바일 Chromium이며 확장 프로그램을 설치할 수 있습니다 . Kiwi를 설치 한 다음 "Mini JS console"Chrome 확장 프로그램을 설치하십시오 (Google에서 검색하고 Chrome 확장 프로그램 웹 사이트에서 설치하면 uBlock도 작동합니다). 하단의 키위 메뉴에서 사용할 수 있으며 현재 페이지의 콘솔 출력을 보여줍니다.

— 파웰
소스

-1

Gear Browser를 사용해보십시오. 모바일에서 요소를 검사하고 웹 사이트를 디버깅 할 수 있습니다.

https://gear4.app

— 앙골라 오
소스

5

이 앱은 iPhone 전용입니다. 질문은 Android를 지정했습니다.

— Pete