chrome://inspect - 크롬 개발자 도구로 모바일 웹 디버깅 하기 (with Flutter)

개요 : chrome://inspect 란?

크롬 브라우저에서 제공되는 디버깅 도구이다.

이 도구를 사용하면 크롬에서 실행 중인 웹 페이지나 웹 애플리케이션을 디버깅할 수 있다.

웹 개발자에게는 익숙한 단축키 'F12' 또한 같은 크롬 개발자 도구이다.

웹앱으로 구성된 하이브리드앱에서의 웹 페이지 또한 개발자 도구를 이용하여 디버깅할 수 있다.

이번 포스팅에서는 모바일 앱에서 웹뷰를 통해 보이는 웹 페이지(하이브리드 앱)를 디버깅하는 방법을 다룬다.

모바일 환경은 안드로이드 가상 에뮬레이터로 진행합니다.
테스트를 위한 간단한 앱을 개발하기 위해서 Flutter를 사용합니다.

포스팅에서 다루는 플러터 프로젝트는 아래의 깃허브 링크에서 다운로드 가능합니다.

https://github.com/luvris2/flutter-example/tree/main/flutter_webview_devtools_test

Flutter

사전 확인 요소

플러터 개발 환경이 구성되어 있다는 전제하에 진행합니다.

플러터 개발 환경이 구성되어 있지 않은 경우는 아래의 링크를 참고해 주세요.

Flutter - 설치 및 다운로드, 환경 변수 추가, 환경 구축 (+VS code, Android Studio)

앱에서 웹 페이지를 보여주기 위해서 웹뷰를 통해 웹 페이지를 모바일로 보여줄 수 있도록 합니다.

InAppWebView의 자세한 사용 방법이 필요하면 아래의 링크를 참고해 주세요.

웹앱 구성을 위한 웹뷰 설치

이 포스팅에서 웹뷰는 InAppWebView 패키지를 활용한다.

터미널에서 아래의 명령어를 입력하여 인앱웹뷰를 설치하자.

flutter pub add flutter_inappwebview

웹 페이지를 보여주기 위한 앱에 웹뷰 탑재

앱에 웹뷰 위젯을 추가하여 웹 페이지를 보여줄 수 있도록 한다.

웹 페이지는 인앱웹뷰의 'InitialData' 속성을 이용하여 간단히 코드 내에서 html 문서를 구성한다.

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: WebviewPage(),
      ),
    ),
  );
}

class WebviewPage extends StatelessWidget {
  const WebviewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      // 웹뷰
      child: InAppWebView(
        // 초기 페이지 구성
        initialData: InAppWebViewInitialData(
          data: """
<center style="font-size:100px;">
Hello World!
""",
        ),
      ),
    );
  }
}

실행 화면

위의 코드는 간단히 웹 페이지에 'Hello World!'를 출력하였다.

웹 페이지

웹 페이지 구성 (HTML+ JavaScript)

버튼을 누르면 합을 구해 사용자에게 알럿(alert)시켜주는 페이지를 구성해 보자.

함수의 합을 구할 값은 a=1, b=2이다.
합은 변수 c를 통해 a와 b를 더한 값을 저장한다.
합을 구한 c의 변수는 alert를 통해 사용자에게 보여주도록 한다.

* 아래의 HTML 소스를 Flutter 코드에서 InAppWebview 위젯의 InitialData 속성의 값에 넣어준다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InAppWebView Initial Page</title>
    <script>
        function sum() {
            let a = 1;
            let b = 2;
            let c = a+b;
            alert(a+"와 "+b+"의 값은 "+c+"입니다.");
        }
    </script>
</head>
<body>
    <center style="font-size:30pt;"> Hello World!
    <p>
    <input type="button" value="sum 함수 호출" onclick="sum()">
</body>
</html>

전체 소스 코드 (Flutter)

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: WebviewPage(),
      ),
    ),
  );
}

class WebviewPage extends StatelessWidget {
  const WebviewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      // 웹뷰
      child: InAppWebView(
        // 초기 페이지 구성
        initialData: InAppWebViewInitialData(
          data: """
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InAppWebView Initial Page</title>
    <script>
        function sum() {
            let a = 1;
            let b = 2;
            let c = a+b;
            alert(a+"와 "+b+"의 값은 "+c+"입니다.");
        }
    </script>
</head>
<body>
    <center style="font-size:30pt;"> Hello World!
    <p>
    <input type="button" value="sum 함수 호출" onclick="sum()">
</body>
</html>
""",
        ),
      ),
    );
  }
}