相見恨晚的前端開發利器 PageSpy

今天介紹一個非常有用的前端開發工具。

做前端開發的你，一定有過以下經歷：

我這裏是好的啊，你截個圖給我看看
不會吧，你打開 f12，控制檯截個圖給我看看
錄個屏給我看看你是怎麼操作的
...

還有，我們在開發 h5 的時候，一般爲了調試方便，可能會在開發環境和測試環境實例化一個 vConsole，遇到問題看一下大概就能定位到錯誤。

可是如果測試小姐姐在遠程呢？如果是線上環境呢？如果有這麼一個工具，能讓我坐在工位上就能調 (窺) 試(探)用戶的操作，那豈不是美滋滋。

你可能會說，這不就是埋點嗎，先別急，今天介紹的這個工具和埋點有着本質區別。

不囉嗦了，有請主角**「PageSpy」**登場。

PageSpy 是什麼？

PageSpy[1] 是由貨拉拉大前端開源的一款用於調試 H5 、或者遠程 Web 項目的工具。是一個強大的開源前端遠程調試平臺，它可以顯著提高我們在面對前端問題時的效率。

有什麼作用？

一眼查看客戶端信息能識別客戶端運行環境，支持 Linux/Mac/Window/IOS/Android
實時查看輸出可以實時輸出客戶端的Element,Console,Network,Storage
網絡請求監控可以捕獲和顯示頁面的網絡請求
遠程控制檯支持遠程調試客戶機上的 js 代碼

如何使用？

查看官方文檔 [2]

安裝 npm 包

yarn global add @huolala-tech/page-spy-api

# 如果你使用 npm

npm install -g @huolala-tech/page-spy-api

啓動服務

直接在命令行執行page-spy-api，部署完成後瀏覽器訪問<host>:6752，頁面頂部會出現接入SDK菜單，點擊菜單查看如何在業務項目中配置並集成。命令行執行後出現這個界面表示服務啓動成功了，然後訪問我自己的 ip + 端口，再點擊頂部接入SDK去創建一個測試項目，建一個最簡單的index.html，按照文檔接入 SDK，然後在瀏覽器訪問這個頁面左下角出現Pagepy的 logo 說明引入成功了。

此時點擊頂部菜單房間列表點擊調試，就可以看到這個項目的一些實時調試信息，但是還沒加什麼代碼。現在改一下我們的代碼，加一些輸出信息。Console 控制檯的信息直接輸出用戶端代碼變量的實時的值加個定時器試試，也是實時輸出的再來看看 Storage 信息 Element 信息調個接口試試

好了，今天的介紹就到這裏，這麼牛叉的工具，是不是有種相見恨晚的感覺，感興趣的小夥伴快去試試吧！

Reference

[1]

PageSpy: https://huolalatech.github.io/page-spy-web

[2]

官方文檔: https://github.com/HuolalaTech/page-spy-web/blob/main/README_ZH.md

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/RvvVDHbfkdELN4H3sspkgw

PageSpy 是什麼？

有什麼作用？

如何使用？

Reference

猜你喜歡