WeChat 웹 개발자 도구를 사용하여 WeChat 기업 계정 페이지(프런트 엔드 페이지) 디버깅

며칠 전에 Fiddler를 사용하여 WeChat 페이지를 디버깅하는 방법에 대한 기사를 작성했습니다. 그러다가 한 블로거가 Fiddler를 사용하는 것이 너무 번거롭다고 언급하면서 WeChat 웹 개발자 도구를 사용하여 WeChat 페이지를 디버깅해 봤습니다. 지난 이틀 동안 매우 흥미로웠습니다. 이 글은 단지 기록일 뿐입니다. 향후 이용 시 참고하시기 바랍니다. 잘못된 점이 있으면 비판하고 수정해 주시기 바랍니다. 공식 WeChat 웹 개발자 도구 다운로드 링크와 문서 설명 https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html을 삽입합니다. 이 문서를 참조하여 몇 가지 세부 사항을 추가했습니다. 다운로드 후 바로 설치하시면 됩니다.

1. 다운로드하고 설치하면 인터페이스는 다음과 같습니다.

2. 로그인을 클릭하면 QR 코드 스캔 페이지가 나타납니다. 본인의 위챗으로 스캔하여 로그인하세요.

3. 로그인 후 WeChat 기업 계정 페이지를 디버깅할 수 있습니다. 주의하세요! ! ! 현재 기업 계정 페이지를 디버그하려면 로그인하는 WeChat ID가 이 기업 계정의 관리자여야 합니다. (이 내용은 WeChat 개발자 도구 설명서에 명시되어 있습니다.) 그렇지 않은 경우 기업 계정에서 개발하세요. WeChat 계정을 관리자로 사용합니다. 그렇지 않으면 그림과 같이 개발자 도구에 다음 페이지가 나타납니다

관리자 설정 인터페이스는 아래와 같습니다.

기업 계정 관리 페이지를 추가하면 휴대폰 WeChat에 알림이 표시됩니다. 알림에 따라 개발자 도구에 대한 로그인 비밀번호를 설정하지 않으면 로그인할 수 없습니다. , 그림과 같이 디스플레이:

비밀번호를 설정한 후 로그인을 클릭했는데 그림과 같이 여전히 로그인할 수 없는 것을 확인했습니다.

그림과 같이 클릭 후:

2. 위의 모든 설정이 완료되면 개발 도구에 로그인하여 마음대로 공개 계정 페이지를 열고 링크를 복사하여 개발 도구의 주소 표시줄에 넣습니다. 이제 기본적으로 디버깅을 할 수 있습니다. 컴퓨터. 페이지는 사진과 같습니다. (모바일 디버깅에 주의하세요)

3. 이 도구에는 더욱 강력한 기능이 있습니다! 창에서 모바일 디버깅을 클릭합니다.

3-1. 그림과 같이 먼저 Android 디바이스 디버깅 - 일반 디버깅을 선택하고,

그런 다음 그의 지시를 따르기만 하면 됩니다. 휴대폰 프록시 설정은 그림과 같습니다.

휴대폰에 프록시를 설정한 후 개발자 도구 페이지에서 디버깅 시작을 클릭하면 우리가 선택한 페이지 부분이 휴대폰에 실시간으로 표시됩니다. (직접 경험해 보세요.)

3-2. 그림과 같이 먼저 Android 기기 디버깅을 선택합니다. X5 Blink 커널 디버깅은 이 기능이 더욱 강력합니다!

이 부분은 공식 홈페이지의 문서를 꼭 읽어보시길 적극 권장합니다. 복사해서 여기에 먼저 올려 놓겠습니다.

모바일 디버깅

모바일 웹페이지의 성능은 일반적으로 스타일 표현, 스크립트 로직 등을 포함하여 데스크톱 브라우저의 성능과 다르기 때문에 개발자에게 특정 문제를 일으킬 수 있습니다. 이제 WeChat Android 클라이언트 웹뷰가 X5 Blink 커널로 완전히 업그레이드되기 시작했습니다. 새로운 커널은 렌더링 기능, API 지원 및 개발 지원 측면에서 큰 발전을 이루었습니다. WeChat 웹 개발자 도구의 원격 디버깅 기능을 통해 휴대폰 화면을 WeChat 웹 개발자 도구에 실시간 매핑하면 개발자가 X5 Blink 핵심 웹 페이지를 보다 효율적으로 디버깅하는 데 도움이 됩니다.

(1) 준비

1. 버전 0.5.0 이상의 WeChat 웹 개발자 도구를 설치합니다.

2. 모바일 기기가 원격 디버깅 기능을 지원하는지 확인

WeChat 웹 개발자 도구를 열고 "모바일 디버깅" 탭을 선택한 후 클릭하여 모바일 장치가 이를 지원하는지 확인하세요. 그런 다음 모바일 장치를 사용하여 팝업 QR 코드를 스캔하면 장치에 대한 지원 정보를 얻을 수 있습니다.

3. 모바일 기기에서 USB 디버깅 기능을 켜주세요

1. 모바일 장치를 열고 "설정"-> "개발자 옵션"으로 이동합니다.

2. "USB 디버깅 기능" 확인

Android 4.2 이후 기기의 경우 개발자 옵션이 기본적으로 숨겨져 있으며 다음 단계에 따라 열 수 있습니다.

1. 모바일 기기를 열고 '설정' -> '휴대전화 정보'로 이동하세요.

2. "빌드 번호"를 찾아 7번 클릭하세요.

4. 모바일 기기 USB 드라이버 설치

일반적으로 개발자는 모바일 장치 제조업체의 공식 웹사이트에서 관련 드라이버를 다운로드하거나 Tencent Mobile Manager를 사용하여 장치 드라이버를 설치할 수 있습니다.

5. X5 Blink 커널의 검사기 기능을 엽니다

WeChat 웹 개발자 도구를 열고 '모바일 디버깅' 탭을 선택한 후 기기를 사용하여 '디버깅 단계'에서 QR 코드를 스캔하세요.

아래와 같이 "TBS 커널 인스펙터 디버깅 기능을 켤지 여부"를 체크하고 위챗을 재시작합니다.

(2) 디버깅 시작

USB 데이터 케이블을 사용하여 모바일 기기를 PC 또는 Mac에 연결한 후 WeChat 웹 개발자 도구의 '모바일 디버깅' 탭을 클릭하여 열고 X5 Blink 디버깅 기능을 선택하면 새 창이 열립니다. 웹 페이지에서 디버깅을 시작할 수 있습니다. X5 Blink 코어에 대한 자세한 내용은 공식 홈페이지 소개에서 확인할 수 있습니다.

모든 준비가 완료되면 현재 기기의 기본 정보를 창에서 확인할 수 있습니다:

새 창을 열려면 페이지에서 '검사'를 클릭하세요. 그러면 개발자에게 친숙한 디버깅 인터페이스가 표시됩니다.

위 그림의 오른쪽 상단에 있는 "모바일" 아이콘을 클릭하면 화면 매핑 기능을 활성화할 수 있습니다.

아래에 추가하겠습니다.

3-2-1. 휴대폰 디버깅 USB 디버깅 기능을 켭니다. 제 휴대폰은 삼성 S7입니다. (안드로이드 상위 버전에서는 이렇게 하는 것 같습니다. 작동하지 않으면 Du Niang에게 문의하세요.) 오랫동안 찾고 있었는데 두니앙에게 물어보니 알게 되었어요. . . . 기록을 쓰다

그림과 같이 드롭다운 알림 표시줄에서 설정을 선택하세요.

버전 번호를 몇 번 더 클릭하면 페이지에 알림이 표시됩니다. 개발자 옵션을 연 후 클릭하면 개발자 옵션이 나타납니다. USB 디버깅을 켜세요. 괜찮습니다.

추가 콘텐츠----개발자 옵션을 끄는 방법은 무엇입니까? ? ? 사진과 같이

    

3-2-2 X5 Blink 커널 인스펙터 기능 켜기

WeChat 웹 개발자 도구를 열고 '모바일 디버깅' 탭을 선택한 다음 기기를 사용하여 '디버깅 단계'에서 QR 코드를 스캔하세요. 아래와 같이 "TBS 커널 검사기 디버깅 기능을 켤지 여부"를 체크하고 위챗을 다시 시작하세요.

3-2-3 디버깅 시작

위의 설정을 완료한 후 페이지에서 디버깅 시작 버튼을 클릭하면 그림과 같이 전화기에 다음 페이지가 나타납니다.

그러면 디버깅 도구에서 다음 페이지가 나타납니다.

이제 기본적으로 휴대폰에서 디버깅하려는 WeChat 공식 계정의 페이지를 무작위로 열 수 있습니다. 사진과 같이

열고 나면 사진과 같이 왼쪽은 디버깅 도구 페이지, 오른쪽은 휴대폰에 표시되는 페이지죠. 하하하하,

                                                                     

그림과 같이 디버깅 도구 페이지의 오른쪽 상단에 있는 휴대폰 아이콘을 클릭하여 휴대폰 페이지를 디버깅 도구에 매핑합니다.