Flutter WebView调试插件webkit_inspection_protocol的使用

插件简介

webkit_inspection_protocol 包是 Chrome DevTools 协议（以前称为 Webkit Inspection Protocol）的客户端。它用于与基于 Chrome DevTools 的调试器进行通信。

更多关于协议的信息，请参阅 Chrome DevTools Protocol。

注意： 这不是官方的 Google 产品。

使用方法

添加依赖

在 pubspec.yaml 文件中添加 webkit_inspection_protocol 依赖：

dependencies:
  webkit_inspection_protocol: ^0.1.0

然后运行 flutter pub get 来安装依赖。

示例代码

下面是一个完整的示例，展示如何在 Flutter 中使用 webkit_inspection_protocol 调试 WebView。

1. 创建一个简单的 WebView 应用

首先，创建一个新的 Flutter 项目，并确保你已经安装了 webview_flutter 和 webkit_inspection_protocol 两个包。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0
  webkit_inspection_protocol: ^0.1.0

2. 编写主页面代码

接下来，在 lib/main.dart 中编写以下代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webkit_inspection_protocol/webkit_inspection_protocol.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Debugging',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;
  late WebKitInspectionProtocol _wip;

  @override
  void initState() {
    super.initState();
    if (WebView.platform == null && defaultTargetPlatform == TargetPlatform.android) {
      WebView.platform = SurfaceAndroidWebView();
    }

    // Initialize WebKitInspectionProtocol
    _wip = WebKitInspectionProtocol('ws://localhost:9222/devtools/page/ABCDEF');
    _wip.connect().then((_) {
      print('Connected to the debugger');
      _wip.onEvent.listen((event) {
        print('Received event: $event');
      });
    }).catchError((error) {
      print('Failed to connect to the debugger: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Debugging'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }

  @override
  void dispose() {
    _wip.disconnect();
    super.dispose();
  }
}

解释

• 初始化 WebView：我们使用 webview_flutter 包来创建一个 WebView，并加载一个网页。
• 连接调试协议：通过 WebKitInspectionProtocol 类连接到 Chrome DevTools 协议的 WebSocket 端点。你需要将 ws://localhost:9222/devtools/page/ABCDEF 替换为实际的 WebSocket URL。
• 监听事件：连接成功后，我们可以监听来自浏览器的事件并打印出来。
• 清理资源：在页面销毁时断开与调试协议的连接。

注意事项

• 确保你的设备或模拟器上已经启用了 Chrome 浏览器的远程调试功能。
• WebSocket URL 可以通过启动 Chrome 并访问 chrome://inspect 获取。
• 如果你在真机上测试，请确保设备和电脑在同一网络下，并且 WebSocket URL 是可访问的。

通过以上步骤，你就可以在 Flutter 应用中使用 webkit_inspection_protocol 来调试 WebView 了。希望这个示例能帮助你更好地理解和使用这个插件。