search

beecomci / today_i_learned

0 stars 0 forks source link

웹앱 디버깅 가이드 #4

Open beecomci opened 3 years ago

beecomci commented 3 years ago

디버깅 가이드

가이드는 Mac OS 기준으로 작성되었습니다.

라인 앱

디버깅 방법

이슈 종류 및 발생 환경에 따라 디버깅 방법을 달리 할 수 있다.

1. 웹 프리뷰 URL

  1. 개발자도구 > Sources 탭 > Overrides > Select folder for overrides 클릭 후 오버라이딩을 위한 폴더 생성 및 지정 (액세스 요청 알림창 허용) lsa_debugging1_2

  2. Network 탭 > 변경하고자 하는 파일 오른쪽 클릭 > Save for overrides 클릭
    or Elements 탭 > 원하는 이미지 or 파일 오른쪽 클릭 > Reveal in Sources panel 클릭 lsa_debugging1_3

  3. 1번에서 지정한 경로에 파일이 생성되며 파일을 수정해서 디버깅한다. 노출 화면의 우측 하단에 VConsole 버튼과 Console에서 [Local File Mapping] Test!!!가 추가된 것을 확인 할 수 있다.
    이후 크롬에서는 서버에 있는 파일을 바라보지 않고, 로컬 파일을 바라본다. lsa_debugging1_4

2. 앱 및 특정 단말

1. [OS 공통] 통검 - D 버튼

2. [OS 공통] Charles

3. [Android] Chrome Webviews 디버깅

4. [iOS] simulator에 앱 설치 후 웹뷰 디버깅

5. [OS 공통] vConsole

// 1. npm install
$ npm install vconsole

// 2. use vconsole
import VConsole from 'vconsole';

const vConsole = new VConsole();