在 Windows 笔记本上调试运行在 iOS 设备上的前端应用

2021 年 12 月 03 日
本文字数：3041 字
阅读完需：约 10 分钟

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作，比如 iOS 设备和 Android 设备。我用的工作笔记本电脑又是 Lenovo 的，安装的是 Windows 操作系统。

有的时候一个开发好的前端应用，在 Android 设备上正常工作，但是在 iOS 平板上测试却发现问题（相当广大前端开发者都曾经遇到过类似问题）。顺手就想调试一下找到原因。那么一个前端应用运行在 iOS 设备上，程序员如何在安装了 Windows 系统的笔记本上进行调试呢？

假设我的前端应用是这个 url：https://jerrylist.cfapps.eu10.hana.ondemand.com/ui5/。

在 IPAD 上打开界面如下：

1. 在 Windows 笔记本电脑上安装 iTunes： https://www.apple.com/cn/itunes/download/

安装后，您的 Windows 笔记本电脑才能成功和 iOS 设备连接并成功识别它。

2. 到 iOS 设备上，菜单 iPad->Settings->Safari->Advanced，打开“Web Inspector” 选项。

3. 从 github 网站下载 ios-webkit-debug-proxy-win32：

https://github.com/artygus/ios-webkit-debug-proxy-win32

将 zip 解压到一个文件夹里，然后把这个文件夹加到 Path 环境变量里。

4. 在 Windows 系统的 CMD 里，敲入下面的命令行：

ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html

收到 Windows 成功监听 iOS 设备事件的消息：

Listing devices on: 9221

Connected: 9222 to Jerry's iPad

在浏览器里访问：http://localhost:9221

从结果列表里就看到我的 iOS 设备了。

点 localhost:9222 的超链接，然后就可以看到另一个超链接，代表了我的 IPad 的 Safari 当前打开的网页：

点这个超链接，Windows 笔记本电脑上的 Chrome 开发者工具就自动打开了。在 IPad 上会弹出一个询问您是否允许调试的对话框。点“Approve”按钮，就可以开始在 Windows 电脑上调试远端连接的 iOS 设备上的前端应用啦！

Web SQL 数据库 API 是一个独立的规范，在浏览器层面提供了本地对结构化数据的存储，已经被很多现代浏览器支持了。

我们通过一个简单的例子来了解下如何使用 Web SQL API 在浏览器端创建数据库表并存储数据。

<!doctype html><html>
<head>    <script>    var end;
    function setupDB() {
        return this.createDatabase().then(createTable).then(insertEntry).then(readEntry).then(printResult);
    }
    function createTable() {
        return new Promise(function(resovle, reject) {
            console.log("prepare to create table..." + Date.now());
            this._db.transaction(function(query) {
                query.executeSql('create table if not exists user(id unique, user, passwd)');
            });
            setTimeout(_createTableOK.bind(this, resovle), 1000);
        });
    }
    function _createTableOK(resovle) {
        console.log("table created successfully..." + Date.now());
        resovle();
    }
    function createDatabase() {
        return new Promise(function(resovle, reject) {
            console.log("prepare to create database..." + Date.now());
            this._db = openDatabase('mydb', '1.0', 'JerryTestdb', 1024);
            setTimeout(_createDatabaseOK.bind(this, resovle), 1000);
        });
    }
    function _createDatabaseOK(resovle) {
        console.log("database created successfully..." + Date.now());
        resovle(this._db);
    }
    function insertEntry() {
        return new Promise(function(resolve, reject) {
            this._db.transaction(function(query) {
                query.executeSql("insert into user values (1,'Jerry','1234')");
            });
            setTimeout(_insertEntryOK.bind(this, resolve), 1000);
        });
    }
    function _insertEntryOK(resolve) {
        console.log("entry inserted to table successfully..." + Date.now());
        resolve();
    }
    function readEntry() {
        return new Promise(function(resolve, reject) {
            this._db.transaction(function(query) {
                    query.executeSql('select * from user', [], function(u, results) {
                        setTimeout(_readEntryOK.bind(this, resolve, results), 1000);
                    }); // end of query.executeSql
                } // end of function(query)
            ); // end of this._db.transaction
        });
    }
    function _readEntryOK(resolve, oResult) {
        console.log("entry readed from DB successfully..." + Date.now());
        resolve(oResult);
    }
    function printResult(oResults) {
        for (var i = 0; i < oResults.rows.length; i++) {
            document.writeln('id: ' + oResults.rows[i].id);
            document.writeln('user: ' + oResults.rows[i].user);
            document.writeln('passwd: ' + oResults.rows[i].passwd);
        }
        end = true;
    }
    function work() {
        if (end) {
            clearInterval(handle);
        } else {
            console.log(" working..." + Date.now());
        }
    }
    setupDB();
    var handle = setInterval(work, 200);    </script></head>
</html>

复制代码

在浏览器里执行这个应用，会创建一个名叫 mydb 的数据库，里面一张名为“user”的数据库表，并且插入一条记录进去，然后从数据库表中读取中来，打印在浏览器上。

下面就来分析下这 90 行代码。

程序的入口是 setupDB 这个函数，下面的 setInterval 起了 1 个间隔为 200 毫秒的周期执行函数，为了模拟当前浏览器除了进行 Web SQL 数据库外，还有其他的任务再执行。

setupDB

用 promise 实现了一个链式调用，第九行代码从语义上来说很容易理解：首先创建数据库(createDatabase)，然后创建数据库表(createTable)，然后插入一条记录到数据库表里(insertEntry), 然后马上把刚才插入表里的记录读出来(readEntry)。最后打印到浏览器上。

大家看我第 16 行的_createDatabaseOK 的函数延时 1 秒执行，仅仅是为了演示 WebSQL API 异步调用的最佳实践。

createDatabase 函数的第 15 行，调用了 Web SQL API 的 openDatabase，创建了一个名为 mydb 的数据库。openDatabase 会返回一个数据库句柄，我们保存在属性_db 里以便后续使用。