모 바 일 컴퓨터 디 버 깅 기반 그림 튜 토리 얼(공유)

최근 웹 페이지 를 분석 하려 면 안 드 로 이 드 와 ios 의 성능 차 이 를 분석 해 야 한다.운영 체제 자체 가 다른 것 을 제외 하고 더 많은 것 을 탐구 해 야 한다.첫 번 째 단 계 는 실제 컴퓨터 에서 분석 하 는 것 이다.그 러 니까 몇 가지 방법 을 정리 해 봐.
1.Mac+iPhone+Lightning+Safari 브 라 우 저
단계:
1)사용:Lighting 선 으로 mac 를 아이 폰 과 연결
2)아이 폰 웹 검사 기 켜 기(설정->Safari->고급->웹 검사 기)
3)아이 폰 은 사 파리 로 분석 할 페이지 를 연다
4)mac 에서 safari 브 라 우 저(메뉴->개발->대응 하 는 핸드폰 이름->디 버 깅 할 페이지)를 열 고 클릭 하면 Safari Developer Tools 에 들 어 갑 니 다.

5)볼 수 있 는 디 버 깅 창 은 이렇다

단점:웹 뷰 의 페이지 를 디 버 깅 할 수 없습니다.
2.안 드 로 이 드 폰+안 드 로 이 드 데이터 라인+컴퓨터
단계:
1)데이터 라인 으로 휴대폰 과 컴퓨터 연결
2)핸드폰 으로 use 디 버 깅 을 켜 기(안 드 로 이 드 는 기종 에 따라 켜 는 절차 가 다 르 고 모 르 는 바 이 두 를 켜 기)
3)크롬 을 열 고 입력chrome://inspect/#devices,선택 Discover USB devices
4)디 버 깅 할 웹 페이지 를 핸드폰 chrome 으로 엽 니 다.
5)디 버 깅 할 페이지 를 선택 하여 들 어가 기

6)이런 디 버 깅 창 을 볼 수 있다

단점:직접 측정,mac 에서 디 버 깅 인터페이스 와 샤 오미 6 핸드폰 의 인터페이스 가 자주 일치 하지 않 고 조작 이 매우 불편 합 니 다.다행히 콘 솔 은 정상적으로 물건 을 볼 수 있 습 니 다.
3.weinre
단계:
1)npm install 이 모듈 을 직접 설치 한 후 시작 하여 관리 인터페이스 를 열 면 됩 니 다.
2)whistle 을 직접 설치 하여 weinre 를 가 져 왔 습 니 다.또한 서로 다른 환경 을 대리 할 수 있 습 니 다.구체 적 인 튜 토리 얼 은 다음 과 같 습 니 다.https://avwo.github.io/whistle/rules/weinre.html

단점:미니 멀리 즘 이 라 고 할 수 있 습 니 다.절차 가 간단 하고 디 버 깅 이 간단 하 며 조절 할 수 있 는 것 도 간단 합 니 다.
이상 의 모 바 일 컴퓨터 디 버 깅 을 바탕 으로 하 는 그림 과 글 튜 토리 얼(공유)은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.