WeChat 개발자 도구 - 모바일 디버깅의 간단한 사용
현재는 주로 PC 쪽 프로젝트를 진행하고 있지만 가끔 모바일 요구사항이 있어서 일부는 네이티브 APP, 일부는 WeChat 및 브라우저에서 진행하고 있는데 지금까지 이 세 가지만 접해봤습니다. 모바일 단말기에 대한 시나리오는 그다지 깊지 않습니다. 이 기사의 소개도 응용 프로그램에 편향되어 있습니다. 부족한 점이 있으면 양해해 주시기 바랍니다.
1. 모바일 페이지 개발 도구
①모바일 브라우저 페이지
여기서 정적 페이지를 개발하는 방법은 일반 PC 페이지 개발과 동일합니다. 개발 및 디버깅에는 Chrome 브라우저를 사용하지만 차이점은 PC 개발 모드를 모바일 개발 모드로 전환한다는 것입니다. (PC 디버깅 모드를 모바일 터미널로 전환하고 그림에서 ②를 클릭하면 그림의 ①이 다른 모바일을 시뮬레이션할 수 있습니다. 터미널 장치, 장치를 직접 추가할 수 있음) 효과는 다음과 같습니다.
이 방법은 직접 디버깅할 수 있습니다.
②APP에 포함된 모바일 페이지
사용자별 활동을 포함하는 일부 일반적인 앱의 경우 H5 페이지 삽입에 대한 수요가 많습니다. 이렇게 하면 개발 비용이 절감되고 기본 APP의 반복 속도가 줄어들며 사용자 친화적이 되기 때문입니다.
네이티브 APP를 개발하고 삽입하는 방법은 기본적으로 첫 번째 방법과 동일합니다. 첫 번째 방법과 유일한 차이점은 h5 페이지와 네이티브 APP 사이에 일부 상호 작용이 있는 경우(js가 필요함)입니다. 기본 APP 데이터에 의해 다시 포함된 콘텐츠 가져오기), 위 방법은 특정 기본 APP가 아닌 브라우저 APP 아래에 배치되므로 이 방법을 달성할 수 없습니다.
해결 방법:
먼저 네이티브 APP 개발 동료와 인터페이스에 대해 논의하고 방법 1을 사용하여 정적 페이지를 개발한 다음(여기서 일반 논리를 작성해야 함) 백엔드와 논의합니다. 동료 인터페이스를 공동으로 디버깅한 후 테스트를 보낼 수 없습니다. 마지막으로 기본 개발 동료와 함께 테스트 환경을 공동으로 디버깅했습니다. 과정이 복잡해 보이지만 기본 인터페이스에 문제가 없다면 대개 빠르게 완료할 수 있습니다. 단점은 네이티브와 공동 디버깅 시 문제가 발생하면 해결이 어렵다는 점이다. (좋은 방법이 있는지 모르겠지만 조언 부탁드립니다!)
③위챗 페이지 개발
사실 이 부분은 언급하면 안 되는데, 위챗 페이지는 "동일"이므로 WeChat에서 웹을 탐색하는 것은 QQ 브라우저를 사용하여 탐색하는 것과 동일하다고 생각할 수 있습니다. 그래서 자세한 내용은 다루지 않겠습니다.
요약: 모바일 개발은 여전히 f12의 "큰 방법"이며 모바일 디버깅으로 전환합니다.
2. 모바일 디버깅을 위한 WeChat 개발자 도구 사용
f12로 작은 페이지를 개발하는 것은 문제가 없지만 WeChat을 기반으로 한 프로젝트라면 다소 그 이상일 것입니다. 능력. 따라서 WeChat용으로 개발된 대부분의 프로젝트는 기본적으로 WeChat 개발자 도구를 사용할 수 있습니다.
WeChat용 개발자 도구는 WeChat 프로젝트 개발의 효율성을 크게 높여줍니다.
다음은 지방 개인 세금 계산기입니다(사실 콘솔 조작은 기본적으로 브라우저 f12와 동일해서 이 일을 프론트엔드에 있는 동료들은 보통 바로 시작합니다):
그러나 이 개발자 도구는 WeChat의 공식 개발 도구이지만 결국 에뮬레이터이므로 실제 상황이 복잡하여 일부 스타일이 호환되지 않을 수 있습니다. 예를 들어 vivo의 WeChat 클라이언트 디스플레이는 항상 엉망입니다(테스트 동료가 발견한 문제입니다. 그녀의 휴대폰은 장면을 복원할 수 있지만 내 휴대폰은 정상입니다). 따라서 우리는 이를 어떻게 실제 전화기에서 디버깅해야 합니까? 다음은 실제 머신 디버깅을 위해 WeChat 개발자 도구를 사용하는 방법에 대한 간략한 소개입니다.
iOS 모바일 디버깅과 비교하면 Android 모바일 디버깅이 더 풍부하므로 Android를 예로 들면 iOS 디버깅 방법은 Android 디버깅의 '일반 디버깅'과 동일합니다.
①일반 디버깅
일반 디버깅 단계는 다음과 같습니다.
단계 설명:
1단계: 무선 네트워크 카드 선택 주소, 기본값입니다. 도구가 자동으로 무선 네트워크 카드 IP v4 주소를 쿼리합니다.
2단계: 이는 휴대폰이 연결된 네트워크가 IP와 동일한 네트워크 세그먼트에 있어야 함을 의미합니다. 첫 번째 단계에서 얻은 v4(네트워크 세그먼트란 무엇입니까? 여기를 참조하세요). 간단한 방법은 휴대폰 네트워크와 컴퓨터 네트워크를 동일한 소스로 설정하는 것입니다(동일한 무선 네트워크에 연결)
3단계: 이 단계는 매우 명확하며 " 도구 모음을 아래로 당기고 무선 연결 아이콘을 길게 누르세요." 그러면 후속 작업을 위해 무선 목록을 직접 입력할 수 있습니다.
iOS 작업은 다음과 같습니다.
iOS: 설정 - 무선 LAN - 네트워크 선택 - HTTP 프록시 수동
4단계: 위 단계를 설정한 후 WeChat을 다시 시작하면 됩니다. 재시작 현재 네트워크 상태를 감지한 다음 디버깅하려는 페이지를 엽니다(디버깅을 시작하기 전에 먼저 디버깅하려는 페이지를 열어야 합니다)
5단계: 이것은 위에 설명이 있지만 설명이 필요합니다. 디버깅 웹 페이지를 연 후 아래 디버깅 시작 버튼을 클릭하세요!
올바르게 작동하면 팝업 상자는 다음과 같습니다.
현재 WeChat에서 디버깅 페이지를 열지 않았거나 열린 로컬 페이지 주소가 잘못된 경우 실패합니다:
p>
로컬로 개발된 페이지를 디버깅하려면 웹 서비스를 활성화하고 작업을 사용하여 네트워크 요청을 확인해야 하는데 이는 매우 편리합니다.
②X5 깜박임 커널 디버깅
X5 깜박임 디버깅 단계는 다음과 같습니다.
먼저 개발자 도구는 휴대폰이 디버깅 기능을 지원하는지 확인해야 합니다. 먼저 확인을 선택하고 아래 단계를 따르세요.
위의 세 단계를 완료한 후 디버깅 시작 버튼을 직접 클릭하면 도구에서 휴대전화 정보를 감지할 수 있는 팝업 상자가 표시되지만, 다른 건 없습니다.
그 이유는 - WeChat이 아직 디버깅할 수 있는 페이지를 열지 않았기 때문입니다! ! !
마찬가지로 디버깅할 수 있는 페이지를 열면 "화이트보드"가 변경됩니다.
참고: 프로세스 중에 "USB를 허용하시겠습니까?"라는 메시지가 표시됩니다. 디버깅?", 동의를 선택하세요.
그런 다음 화살표가 가리키는 "검사"를 클릭하면 익숙한 화면이 다시 나타납니다! ! !
좋아, 이제 실제 머신 인터페이스를 즐겁게 디버깅할 수 있습니다!
이 기사는 응용 프로그램에 중점을 두고 있으며, 부족한 점을 용서해 주시기 바랍니다.
별 같은 마음을 갖는 것은 아름다움인가 죄악인가?