uniapp을 디버깅하는 방법은 무엇입니까? 팁 공유-uni-app-php.cn

uniapp을 디버깅하는 방법은 무엇입니까? 팁 공유

PHPz

풀어 주다： 2023-04-20 14:25:19

원래의

2535명이 탐색했습니다.

모바일 애플리케이션의 인기로 인해 개발자가 애플리케이션을 구축하는 데 사용하는 프레임워크가 점차 더 풍부해졌습니다. 일반적으로 사용되는 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크 중 하나는 UniApp입니다. UniApp은 Vue.js 아키텍처를 기반으로 하는 크로스 플랫폼 개발 프레임워크로, 이를 사용하여 동시에 여러 모바일 플랫폼(Android, iOS 등)을 지원하는 애플리케이션을 쉽게 구축할 수 있습니다. 애플리케이션을 개발하는 과정에서 필연적으로 몇 가지 문제에 직면하게 되며, 이때 디버깅 방법이 특히 중요해집니다. 그래서 이 글에서는 몇 가지 UniApp 디버깅 기술을 소개하겠습니다.

1. HBuilderX 디버깅

HBuilderX는 UniApp 사용에 있어 중요한 부분입니다. 이를 통해 Vue 플러그인을 사용하여 보다 편리하게 애플리케이션을 개발하고 코딩 과정에서 인터페이스 효과를 실시간으로 미리 볼 수 있습니다. 디버깅하는 동안 HBuilderX에는 로그 출력 및 포트 매핑과 같이 문제를 신속하게 해결하는 데 도움이 되는 몇 가지 도구도 있습니다.

로그 출력

HBuilderX IDE에서는 console.log()를 사용하여 관련 정보를 출력할 수 있습니다. 애플리케이션이 실행 중이면 관련 출력 정보가 콘솔에 표시되므로 애플리케이션 문제를 빠르게 찾는 데 도움이 됩니다. 또한 console.error()를 사용하여 오류 정보를 출력하면 애플리케이션에서 문제를 더 빨리 찾을 수 있습니다.

포트 매핑

UniApp은 작동 중에 로컬로 http 서버를 생성하고 서버는 포트 번호 8080에서 수신 대기합니다. 개발 과정에서 테스트를 위해 컴퓨터에서 실행 중인 UniApp 페이지를 모바일 장치에 넣어야 하는 경우 HBuilderX에서 제공하는 포트 매핑 기능을 사용하여 이를 달성할 수 있습니다. 구체적인 작업은 HBuilderX에서 메뉴를 열고 실행->포트 자동 동기화를 선택한 다음 모바일 장치에서 http://localIP:7397에 액세스하여 UniApp 애플리케이션을 봐야 한다는 것입니다. 여기서 7397은 UniApp의 기본 포트입니다. . 필요에 따라 수정할 수 있습니다.

2. Chrome 디버깅

휴대폰을 컴퓨터에 연결

디버깅 프로세스 중에는 먼저 휴대폰을 컴퓨터에 연결해야 합니다. 여기서는 모든 사람이 연결을 완료했다고 가정합니다.

개발자 옵션 열기

휴대폰을 컴퓨터에 연결한 후 애플리케이션을 디버그하려면 휴대폰의 개발자 옵션을 열어야 합니다. 휴대폰 설정에서 버전 번호를 반복해서(약 7회) 클릭하면 "설정" 하단에 "개발자 옵션"이 보입니다. 개발자 옵션을 입력하고 USB 디버깅을 활성화합니다.

포트 전달 설정

Android 장치를 디버깅할 때 애플리케이션을 디버깅하기 전에 ADB 도구를 사용하여 서비스 포트를 매핑해야 합니다. 먼저 컴퓨터에 ADB 도구를 설치해야 합니다. 그런 다음 adb 전달 tcp:8080 tcp:8080 명령을 실행합니다. 이렇게 하면 Chrome에서 디버깅할 수 있습니다.