天要讲的这个技术方案，能用到人会觉得真有用，用不到的人会觉得真没用。这个方案就是采用python实现将安卓手机屏幕上的部分内容转为文字。效果如下：

就算是包含公式或者表格也可以识别：

有类似需求的人，自然能看到商机。比如采集APP排名，或者自动做题等等。不过，今天我仅仅从技术上说是如何实现的。

要想实现这个功能，首先要获得屏幕上的内容。那么，我们肯定想到的是截屏。现在智能手机基本上都有一个截屏功能。比如在华为手机上，敲击两下屏幕就能取得当前图像。

如果用代码去实现，只需一行命令，手机系统截屏也是这样做的：

adb shell screencap -p /sdcard/screenshot.png

这行命令实现了截取手机当前屏幕，并将图片保存，文件名为screenshot.png。而python调用命令的代码更简单，仅仅就是os.system("命令语句")。

不过，想要执行adb命令，需要一些工具支持。因此得去如下地址下载platform-tools这套工具：

https://developer.android.google.cn/tools/releases/platform-tools?hl=zh-cn

打开页面之后，选择适合自己系统的内容下载。

下载解压之后，可以先测试一下。将安卓手机插上数据线，打开允许USB调试模式。然后进入解压目录，我的是放在C盘根目录下，运行adb devices就可以看到已连接的手机情况。

上面的情况表示有一部设备已连接。

有了这个环境，那么我们通过python代码就可以轻松获取截图了。

# 执行截屏并保存命令
os.system("C:/platform-tools/adb shell screencap -p /sdcard/screenshot.png")
# 将保存的截图从手机复制到电脑中
os.system("C:/platform-tools/adb pull /sdcard/screenshot.png "+img_path)

两句代码，一句是截屏保存，另一个句是拷贝截图到电脑。img_path是电脑的存放图片的路径。我设置的是在项目根目录下的img文件夹下，文件名为时间戳。

目前获得的图片是手机的全屏，当然这个也能识别。但是，现实中我们希望能再次编辑。比如仅仅识别某一部分。

因此，我们需要用python的tkinter写一个界面操作。当鼠标按下时记录起点，鼠标移动时绘制路径，鼠标抬起时记录终点并裁剪图片。

以下是界面主框架代码：

if __name__=='__main__':
    
    # 鼠标左键按下时x, y坐标
    left_mouse_down_x, left_mouse_down_y=0, 0
    sole_rectangle=None # 画出的矩形
    target=f"{BASE_DIR}{os.sep}img"
    w_flag=True
    clip_img_path=""

    while w_flag:

        win=tk.Tk()
        win.title("手机截屏转文字") 
        frame=tk.Frame()
        frame.pack()

        button=tk.Button(frame, text="截屏", command=win.destroy)
        button.pack(side="left", padx=10, pady=8)

        button=tk.Button(frame, text="识别", command=ocr)
        button.pack(side="left", padx=10, pady=8)

        button=tk.Button(frame, text="退出", command=exit)
        button.pack(side="left", padx=50, pady=8)

        image=Image.open(img_path)
        image_x, image_y=image.size
        img=ImageTk.PhotoImage(image)
        
        canvas=tk.Canvas(win, width=image_x, height=image_y, bg='white')
        i=canvas.create_image(0, 0, anchor='nw', image=img)
        canvas.pack(padx=10, pady=10)
        
        canvas.bind('<Button-1>', left_mouse_down) # 鼠标左键按下
        canvas.bind('<ButtonRelease-1>', left_mouse_up) # 鼠标左键释放
        canvas.bind('<Button-3>', right_mouse_down) # 鼠标右键按下
        canvas.bind('<ButtonRelease-3>', right_mouse_up) # 鼠标右键释放
        canvas.bind('<B1-Motion>', moving_mouse) # 鼠标左键按下并移动

        win.mainloop()

下面是鼠标的各类操作：

# 鼠标左键按下事件
def left_mouse_down(event):
    global left_mouse_down_x, left_mouse_down_y
    # 记录按下的坐标，赋值给全局变量
    left_mouse_down_x=event.x
    left_mouse_down_y=event.y

# 鼠标左键按下并移动
def moving_mouse(event):
    global sole_rectangle # 绘制的矩形
    # 鼠标按下的x,y
    global left_mouse_down_x, left_mouse_down_y
    moving_mouse_x=event.x
    moving_mouse_y=event.y
    # 如果原来画过矩形，删除前一个矩形，绘制出新的
    if sole_rectangle is not None:
        canvas.delete(sole_rectangle) 
    sole_rectangle=canvas.create_rectangle(left_mouse_down_x, left_mouse_down_y, moving_mouse_x,moving_mouse_y, outline='red')

# 鼠标左键抬起事件
def left_mouse_up(event):
    global clip_img_path

    # 记录抬起时的坐标，鼠标左键抬起时x,y坐标
    left_mouse_up_x=event.x
    left_mouse_up_y=event.y
    # 通过抬起的点减去按下的点，比划矩形，计算出宽和高
    width=left_mouse_up_x - left_mouse_down_x
    height=left_mouse_up_y - left_mouse_down_y
    # 如果宽高太小，有可能是点击了一下，或者想放弃这次操作
    if width < 20 or height < 20:
        print("size is to small")
        return
    # 保存文件
    corp_image=image.crop((left_mouse_down_x, left_mouse_down_y, left_mouse_up_x, left_mouse_up_y))
    corp_image.save(clip_img_path)

这样我们就实现了一个从截屏上画图裁剪的功能：

下一步要做的，就是将裁剪选取的小图片交给OCR服务去识别。

这OCR该如何选型呢？是该自研还是调用第三方？

需要看需求！如果我们的OCR识别在一百个字符以内，而且自己拥有数据，建议自研。因此这类小场景，自研的话成本不高，而且准确率会比用第三方还要高。就比如LED数字屏幕的识别，或者水表、电表仪器的识别，这类适合自己做。

但是，如果你想要识别大场景，就比如汉字识别。这里面涉及众多标点符号、繁简字体，它会有上万个字符。这时我们很难凑足那么多数据。而且近似字符很多，需要做矫正，也有技术难度。因此，选用第三方的服务，反而成本更低。

我们这次要识别的内容，不但包含中英文、甚至还有公式。那这必须要使用第三方。第三方OCR服务多了去了，基本上每家都有，我们随便选一家就好。就比如阿里的OCR。

选哪一个场景也看你的需求。有通用的识别，也有专用的识别。因为我有识别文字和公式的需求，因此选择教育场景里的题目识别。

关于题目识别的介绍如下：

https://duguang.aliyun.com/experience?type=edu&subtype=question_ocr#intro

阿里的文档还是挺好的，提供了多种对接方式。不过，还是需要先开通服务才行。每个月有200次免费额度。

我开通了。

然后创建AccessKey。

拿着AccessKey就可以调用服务了。关于调用的代码，官方也提供了详细的文档和示例：

https://next.api.aliyun.com/api/ocr-api/2021-07-07/RecognizeEduQuestionOcr?sdkStyle=dara&tab=DEMO&lang=PYTHON

我们只需要将key换成自己的就行。调用后，接口会返回识别到的内容。拿到识别的内容，显示出来就可以了。

总结起来，就两步。第一步截屏保存，第二步识别显示。

至于作用嘛，就是开头说的。用到的会说有用，用不到的确实没用。因为这点功能，是很多扫描软件附带的能力。

如果咱们只是偶尔用几次，那么随便找一个软件更合适。但是如果我们经常用，又有个性化需求，需要批量操作，或者后续操作想自动化，那么自己开发会有更多可控制的地方。

最后再看一下综合效果。

对通知公告类的识别

对课程直播类的识别

前端的日常开发工作中，我们负责页面的构建和维护，对于逻辑复杂的页面，调试是不可或缺的一环，pc端拥有强大的chrome开发者调试工具，调试页面会变得非常简单、得心应手。

强大的chrome调试工具

但内嵌页的调试经常让开发者感到头疼，在之前，遇到疑难杂症时，我们只能添加alert调试代码，一遍又一遍的发布到测试环境，查看打印结果，试着找到一些与问题有关的蛛丝马迹，这样不仅费时费力，如果真的出现了紧急的线上问题，又没有及时得到解决，可能会造成不可估量的损失，而且，随着webkit alert不符合UI规范，客户端将alert函数禁用，我们也失去了最后一根救命稻草。

然而，不必担心！我们可以探索替代方案和新工具，以克服内嵌页调试的困境，提升开发效率。

一、Charles：将本地开发地址mock到app内

Charles是Mac平台上一款优秀的抓包工具，具体的介绍以及使用方法可以参考站内的这篇文章：抓包工具Charles的使用教程-戴旭峰。

我们可以使用Charles抓包工具，将前端本地的页面地址mock到app内，这样我们本地的页面就拥有了端内的环境，可以与客户端进行交互。具体操作方法：

1.首先确定一个含有入口跳转的接口，我们这里以七猫免费小说my-center接口为例，打开app，跳转到我的页面，在Charles抓包结果中找到my-center接口，点击右键，点击Save Reponse选项，将接口返回数据以json的格式保存在本地。

保存需要mock的接口的响应数据

2. 修改刚才保存的本地数据，将跳转地址修改为前端本地的页面地址

修改响应数据

3.本地数据映射

选择Charles菜单栏，tools -> Map Local... -> Enable Map Local，添加映射数据

映射到本地文件

4.重新刷新我的页面，就可以看到页面的入口【阅读历史】已被修改成前端本地地址【福利中心】，这时候我们在本地的改动都会及时更新到客户端内的页面里。

app内访问前端本地页面

二、Chrome DevTools远程调试Webview

Chrome DevTools远程调试WebView是一种常用的调试技术，可以帮助开发者在WebView中调试H5页面，但是它有一些使用前提：

① 科学上网（需要连接Google服务）

② 仅限安卓设备（安卓版本4.4以上）

③ 可以传输数据的数据线

虽然它的使用门槛有一点高，但它的功能却异常强大，是我平常使用最多的一种调试方法。

具体使用方法：

1.设置WebView为可调试模式

要想将WebView设为可调试模式，需要调用WebView类的静态方法，这就需要客户端小伙伴们的支持，你只需要甩给他们一个参考链接，剩下的他们会帮你搞定一切。(免费小说现在的debug包会默认开启调试模式，给客户端点赞)

一个靠谱的客户端！

2. 手机通过usb连接到电脑

将手机以数据线的方式连接到电脑，这里需要在手机设置里的开发者模式中打开USB调试功能。

3. 访问Chrome DevTools

在Chrome浏览器里输入地址：chrome://inspect/#devices，我们可以在 Remote Target一栏看到已经连接的设备以及在webview中打开的页面，选择想要调试的页面，点击inspect，即可开始调试

已连接的设备列表以及在webview中打开的h5页面

4.调试页面

Chrome Dev Tools会将手机中的操作界面实时同步到pc端

调试页面

手机端与pc端同步

有了Chrome DevTools的调试能力，普通的控制台输出，网络请求都不在话下，我们甚至可以执行断点调试，这是其它调试方法都没有的功能。

断点调试

三、Chrome DevTools + Charles Map Remote

在方法一中，我们只能够调试本地的页面，往往在测试环境中遇到问题时，需要自己mock测试环境中的数据，再进行调试，如此往复，效率还是有点低下。

在方法二中，我们虽然能够直接调试测试环境中的页面，但往往遇到问题时，还是需要修改代码，执行流水线发布到测试环境之后才能再继续调试。

那有没有可以直接使用测试环境中的数据，既能在本地调试，又不需要发版的方法呢？答案是肯定的，我们可以利用Charles 中的Map Remote功能，来实现将指定的网络请求重定向到本地服务器，然后再结合Chrome DevTools的调试功能，可以直接调试，这样可以大大提高调试的效率。

以福利中心为例，将福利中心的地址请求映射到本地服务器。

打开Charles，选择Tools -> Map Remote -> 勾选 enable Map Remote，并新增规则，将需要重定向的地址以及需要重定向到的地址的相关信息按如下格式填写。

配置 map remote

重新打开福利中心，这个时候请求的接口是测试环境的接口，但访问的页面却是本地的页面，我们可以直接修改本地的代码来调试。

极其方便的本地调试

四、Mac: Safari

使用Chrome DevTools调试，虽然功能强大，但是只适用于安卓设备，接下来给大家分享如何使用Safari调试ios设备；

1.Safari 浏览器的设置

打开Safari偏好设置，点击菜单 “高级“ ，在页面最下方选中「在菜单中显示“开发”菜单」的复选框

在Safari菜单中显示“开发”菜单

2.在 iPhone 手机上 设置

打开手机设置->Safari->高级（最下面）->将 JavaScript 、Web检查器的开关都打开

开启网页检查器

3.将iPhone通过数据线的方式连接到mac上，打开Safari浏览器，先运行手机app里面的web页面，再在菜单 “开发” 中选择已连接的手机，找到调试的网页，就能在Safari里面调试了 。

调试入口

手机中的效果：

手机中的效果

具体调试效果如下图所示：

Safari 调试界面

Safari 调试效果

通过Safari调试，我们可以很方便地查看到页面的Dom结构，元素的样式效果；在控制台查看各种 JavaScript 输出；通过网络监控也可以查看网页加载时的网络请求和响应，包括请求头、响应状态、传输大小等，这对于分析性能问题和调试网络请求非常有帮助。

五、iOS: Web Inspector

web inspector是一款在ios端就可实现调试的safari插件，它的优势是不需要连接任何代理，随时随地都可以调试h5页面，它可以查看、检查、编辑和搜索构成网页DOM的元素，查看网页节点和样式的详细信息，可以在控制台查看日志、错误和警告，也可以在控制台中输入js来调试、修改和获取有关网页的信息，可以查看网络请求和响应列表，也可以查看存储的数据的详细信息，例如cookies、本地存储和会话存储。具体使用方式如下：

1.安装插件

打开苹果App Store，搜索web inspector，点击获取，完成安装

App Store 下载

2.完成设置

首次使用需要完成配置，打开设置-> Safari浏览器 -> 拓展，找到web inspector，并允许拓展

允许 web inspector 拓展

3.调试页面

接下来我们只需要在safari浏览器中打开想要调试的页面，点开web inspector插件，就可以进行页面调试了。

选择web inspector插件，即可调试网页

六、vConsole

上面的调试方法都是基于外部工具来实现调试，我们也可以直接将调试工具注入到前端代码里，只要能访问网站，就可以调试。

vConsole就是这样一个轻量、可拓展、针对手机网页的前端开发者调试面板，它提供了以下功能和用途：

1. 错误日志和调试信息：vConsole可以捕获和显示应用程序中的错误日志和调试信息。可以在控制台中查看详细的错误堆栈跟踪，帮助我们快速定位和修复问题。
2. 网络请求监控：vConsole可以拦截并显示应用程序发出的网络请求。可以查看请求的详细信息，包括URL、请求方法、请求头和响应内容等。这对于调试网络请求问题和监控接口调用非常有用。
3. 性能监控：vConsole提供了一些性能指标，如页面加载时间、资源加载时间和内存占用等。这些指标可以帮助我们评估应用程序的性能，并找出可能的性能瓶颈。
4. 实时修改和调试：vConsole允许我们在控制台中实时编辑和调试JavaScript和CSS代码，无需重新加载整个页面。这使得快速迭代和实验变得更加便捷。
5. 移动端调试：vConsole专注于移动端开发和调试，提供了一套移动设备友好的界面和功能。我们可以在手机浏览器中启用vConsole，实时查看和调试移动应用程序的问题。
6. 自定义插件：vConsole支持自定义插件，可以根据需要添加自己的扩展功能。这使得vConsole可以根据项目的具体需求进行定制和扩展。

使用方法：

在项目目录下打开终端，运行以下命令安装 vConsole：
npm install vconsole

在你的代码文件中引入 vConsole：
import VConsole from 'vconsole';

// 创建 vConsole 实例
const vConsole=new VConsole();

配置选项：根据需要配置 vConsole 的不同选项。
const vConsole=new VConsole({
  defaultPlugins: ['system', 'network', 'element'], // 默认展示的面板
  maxLogNumber: 1000, // 最大日志数量
  onReady: function() {
    console.log('vConsole is ready.');
  },
  onClearLog: function() {
    console.log('Logs are cleared.');
  }
});

1234567891011121314151617181920

实际效果：

Vconsole演示效果

vConsole的出现，不仅提高了前端人员的开发效率，也可以帮助测试人员分析接口调用的情况，验证数据传输的正确性。

总结：

H5页面调试是移动端开发过程中不可或缺的一环，综合运用这些工具，我们可以快速定位问题、优化页面性能，并提升用户体验，随着移动端技术的发展，H5调试技术也会持续进步。我们可以期待更加智能化的调试工具，以及更加全面的性能分析功能。

作者:尹涛

出处:https://tech.qimao.com/hye-diao-shi-da-quan/

建手机网站是现代化互联网建设中的一个重要环节，常见问题很多，下面将列举一些常见的问题，供大家参考。

问题一：响应式设计和移动优先策略的选择移动设备的普及，使得访问网站的终端不再只是电脑，在设计手机网站时，一个重要的决策就是选择响应式设计还是移动优先策略。响应式设计是一种利用CSS媒体查询和流式布局来使网站能够适应不同尺寸的屏幕，而移动优先策略是在设计时优先考虑移动设备的特性和限制。选择哪种策略，需要考虑用户群体、访问习惯等因素。

问题二：导航和布局设计手机屏幕相对较小，因此在设计手机网站时，导航和布局的设计非常重要。导航需要简洁明了，保证用户可以轻松找到所需的内容。布局需要考虑手机屏幕的纵向滚动特性，合理安排不同组件的排列顺序和比例。

问题三：加载速度和页面性能优化手机网站的加载速度和性能优化是用户体验的关键因素。手机网速相对较慢，因此需要通过优化网站代码、减少资源文件的大小、使用缓存等方式来提高加载速度和性能。

问题四：搜索引擎优化手机网站的搜索引擎优化和桌面网站有些不同。搜索引擎喜欢简洁、快速的网页，因此在设计手机网站时需要注意页面结构、HTML标签的使用、关键词的选取等因素，以提高网站在搜索引擎的排名。

问题五：多设备兼容性不同型号的手机在屏幕尺寸、操作系统等方面存在差异，因此在设计手机网站时需要考虑多设备的兼容性。可以通过使用流式布局、媒体查询等技术来实现多设备兼容。

问题六：用户体验用户体验是设计手机网站时需要重点关注的问题。手机网站需要关注页面内容的排列、字体的大小、按钮的大小等因素，以提供良好的用户体验。

问题七：安全性移动设备的使用时常伴随着网络安全问题，手机网站也需要考虑安全性。可以通过使用SSL证书、使用安全的认证机制等方式来提高手机网站的安全性。

问题八：社交媒体集成手机用户普遍喜欢使用社交媒体，因此在设计手机网站时可以考虑集成社交媒体功能，方便用户分享网站内容，增加网站的曝光和传播。

问题九：分析和监控分析和监控是优化手机网站的重要手段。可以通过使用工具来收集用户访问数据，了解访问习惯和行为，再根据这些数据进行网站调整和优化。

问题十：盈利模式手机网站的盈利模式也是设计时需要考虑的问题。可以通过广告投放、售卖商品或服务等方式来实现盈利。

总结：搭建手机网站有很多常见问题需要解决，包括响应式设计和移动优先策略的选择、导航和布局设计、加载速度和页面性能优化、搜索引擎优化、多设备兼容性、用户体验、安全性、社交媒体集成、分析和监控、盈利模式等方面。解决这些问题需要深入理解用户需求和行为习惯，灵活运用技术手段，不断优化和改进。