天要講的這個技術方案，能用到人會覺得真有用，用不到的人會覺得真沒用。這個方案就是采用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證書、使用安全的認證機制等方式來提高手機網站的安全性。

問題八：社交媒體集成手機用戶普遍喜歡使用社交媒體，因此在設計手機網站時可以考慮集成社交媒體功能，方便用戶分享網站內容，增加網站的曝光和傳播。

問題九：分析和監控分析和監控是優化手機網站的重要手段。可以通過使用工具來收集用戶訪問數據，了解訪問習慣和行為，再根據這些數據進行網站調整和優化。

問題十：盈利模式手機網站的盈利模式也是設計時需要考慮的問題。可以通過廣告投放、售賣商品或服務等方式來實現盈利。

總結：搭建手機網站有很多常見問題需要解決，包括響應式設計和移動優先策略的選擇、導航和布局設計、加載速度和頁面性能優化、搜索引擎優化、多設備兼容性、用戶體驗、安全性、社交媒體集成、分析和監控、盈利模式等方面。解決這些問題需要深入理解用戶需求和行為習慣，靈活運用技術手段，不斷優化和改進。