[flutter] webview_flutter를 사용한 flutter 프로젝트에서 웹 뷰 디버깅 하기

webview_flutter를 사용한 flutter 프로젝트에서 웹 뷰 디버깅 하기

1. 사용하는 웹뷰

webview_flutter: ^4.13.0

 

2. 웹뷰가 바라보는 것은 react, vite으로 개발한 후 퍼블리싱한 웹이다.

해당 웹을 로컬에서 3000 으로 여는 설정이 되어있다.

"scripts": {
    "dev": "vite --port 3000",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

 

3. 포트를 열 때 네트워크 설정을 함께 하기 위해 명령어 뒤에 -- --host를 추가하여 터미널에 입력한다.

npm run dev -- --host

 

4. flutter에서 url을 로컬을 의미하는 10.0.2.2로 설정한다.

final String _initialUrl = 'http://10.0.2.2:3000';

 

5. 안드로이드의 에뮬레이터를 사용하기 위해 AndroidManifest.xml을 수정한다.

usesCleartextTraffic="true"로 설정하여 http로 시작하는 url도 열 수 있게 하는 것이 중요하다.

<application
        android:label="${serviceName}"
        android:name="${applicationName}"
        android:usesCleartextTraffic="true"
        android:icon="@mipmap/ic_launcher">

 

6. 에뮬레이터를 실행해 웹뷰가 잘 나오는지 확인한다.

 

7. 웹뷰는 flutter에서도 오류가 발생할 수 있고, 로컬에서 실행한 내부의 리엑트 코드에서 오류가 발생할 수도 있다.

에뮬레이터로 실행한 후의 오류는 로그캣으로 확인한다.

리엑트 코드에서 발생하는 오류는 크롬에서 다음 주소를 입력한 후 Inspect에서 확인할 수 있다.

chrome://inspect/#devices