민트앱
  • 안녕하세요
  • 시작하기
    • 1.프로젝트 생성
    • 2.프로젝트 설정
    • 3.스토어 정보
    • 4.고객요청
  • 민트앱의 특징
  • 민트앱 사용법
    • 0.콘솔 출력(디버깅)
    • 1.프로젝트 시작하기
    • 2.앱 테스트하기
      • ios
      • 안드로이드
    • 연장하기
    • 결제 방법
    • 유지보수
  • Code
    • user-agent
    • frame
    • html
    • javascript
    • 애니스포츠 javascript
    • nawiz javascript
  • Push API
    • 인증
    • 개인 전송
    • 그룹전송(JSON)
    • 그룹전송(CSV)
    • 토픽전송
  • Data API
    • 토픽 CRUD
    • 인증
    • 딥링크 생성
    • 토픽 구독
    • 토픽 구독 해제
    • 전체 토픽 구독 해제
  • 딥링크
    • firebase dynamic 딥링크
    • URI Scheme 딥링크
  • 소셜로그인
    • 애플로 로그인
    • 소셜로그인 사용법
    • 구글 로그인 설정
    • 카카오 로그인 설정
    • 네이버 로그인
    • 페이스북 로그인
  • 토픽
  • 카테고리
    • ios
    • 안드로이드
  • Conents
    • Release Note
    • 이용약관
    • 개인정보처리방침
  • 파일
    • 스플래쉬 mp4,gif,lottie
    • 스플래쉬
    • 앱아이콘
    • 애플 스크린샷 샘플
    • 안드로이드 스크린샷 샘플
    • 스크린샷 샘플
  • 스플래쉬 동작원리
  • 공지사항
  • 플러그인
    • 그누보드 매뉴얼
  • 상담
  • 인증서
Powered by GitBook
On this page
  • 웹뷰와 디버깅
  • Chrome DevTools

Was this helpful?

  1. 민트앱 사용법

0.콘솔 출력(디버깅)

Previous민트앱 사용법Next1.프로젝트 시작하기

Last updated 2 years ago

Was this helpful?

웹뷰와 디버깅

오늘은 회사에서 새로 알게 된 크롬의 디벨로퍼 기능을 정리해둘 겸 블로깅하려 한다.

웹뷰를 가지고 작업을 하다 보면, 디버깅이 쉽지 않다.

웹개발이라면 일반 크롬 창에서 개발자 툴로 디버깅을 할 수 있을 것이고,

안드로이드 네이티브 화면이라면 ide의 디버깅 툴을 사용하거나 로깅할 수 있겠지만,

웹뷰는 안드로이드 에뮬레이터에서 돌아가면서도 내용을 직접 확인하거나 건드리기가 어렵다.

Chrome DevTools

Chrome DevTools의 기능을 사용하면 연결된 디바이스의 웹뷰를 마치 PC 크롬 브라우저에서 관찰하듯 관찰할 수 있다.

기능의 사용 방법 또한 무척 간단하다.

1. 연결된 디바이스에서 웹뷰를 띄운다.(usb로 연결후 앱을 오픈한다.)

2. PC에서 크롬을 열고, 주소창에 chrome://inspect 를 입력해 DevTools에 접속한다.

1번과 2번을 완료했다면, 접속 이후 수 초 안에 아래 이미지처럼 Remote Target에 실행된 디바이스가 나타날 것이다.

3. 원하는 디바이스에 대해 inspect를 클릭해 인스펙트 화면에 접속한다.

이렇게 하면 웹뷰에서 일어나는 일들을 한층 더 꼼꼼하게 디버깅할 수 있다.

쉬워도 너무 쉽다. 여태까지 몰랐던 게 한스러울 정도 ㅠㅠ

꿀기능 알려주신 선배 팀원분 감사합니다.