[iOS] WebView 에서 디버깅 하는 방법 (Safari - 개발자용 툴 사용)

이 글에서 설명하는 것

1. iOS 에서 웹뷰 디버깅 하는 방법
PC 웹 브라우저에서는 F12 로 개발자도구를 열어 디버깅을 한다. 
Android 는 Chrome://inspect 를 사용해 웹뷰 디버깅을 한다면,
iOS 는 Safari 에서 제공하는 개발자용을 사용한다.

2. iOS 에서 웹뷰 새로고침 하는 방법
2.1. 서버에서 코드 수정을 했는데, 새로고침 하는 방법
2.2. 서버에서 코드 수정을 했는데, 강력 새로고침을 하는 방법

 

 

1. iOS 에서 웹뷰 디버깅 하는 방법

(테스트 페이지는 https://www.google.com 으로 했다.)

1.1. 시뮬레이터/단말기를 연결하고 Xcode 에서 command + R 을 눌러 런한다.

 

1.2. 앱이 뜨고 웹뷰 창이 뜨면 Safari 를 눌러 상단의 개발자용을 클릭한다.

 

1.3. 시뮬레이터의 경우, 개발자용 > 시뮬레이터 > 디버깅할 주소

 

1.4. 웹 속성 창이 뜨면 소스 창에서

1.4.1. 라인 넘버를 체크해서 브레이크 포인트를 체크한다.

1.4.2. 좌측 상단의 파랑색 화살표 체크 표시로 브레이크 포인트를 활성화/비활성화 할 수 있다.

1.4.3. 그 옆에 플레이/일시정지 버튼이 뜰텐데, 브레이크 포인트가 여러 개 있으면 플레이 버튼을 눌러 다음 브레이크 포인트로 이동한다.

1.4.4. 우측 상단의 + 에 확인할 변수들을 넣어 값을 확인할 수 있다.

 

 

2. iOS 에서 웹뷰 새로고침 하는 방법

2. 서버에서 수정한 코드가 웹뷰에 반영이 되지 않는 경우,

2.1. 웬만해서 html 같은 경우는 좌측 상단의 새로고침 버튼을 누르면 된다.

 

2.2. 근데 이게 안 먹히는 경우라면,, (나 같은 경우는 js 에서 수정한 코드가 반영이 되지 않았다. 브라우저에서 개발자 도구를 열어 확인하면 수정된 코드가 반영이 되었는데, 웹 속성 창에서는 반영이 안 되었다..)

콘솔 창을 열어 window.location.reload(); 하면 강력 새로고침이 된다.

웹 속성 하단에 콘솔창이 있거나, 상단에서 콘솔 탭을 찾아 입력할 수 있다.