小程序調試新方案——使用WeConsole監控console/network/api/component/storage

時間  2021-08-12
標籤 javascript html 前端 java git github typescript npm json 小程序 欄目 系統網絡 简体版
原文   原文鏈接

1、背景與簡介

在傳統的 PC Web 前端開發中，瀏覽器爲開發者提供了體驗良好、功能豐富且強大的開發調試工具，好比常見的 Chrome devtools 等，這些調試工具極大的方便了開發者，它們廣泛提供查看頁面結構、監聽網絡請求、管理本地數據存儲、debugger 代碼、使用 Console 快速顯示數據等功能。javascript

可是在近幾年興起的微信小程序的前端開發中，卻少有相似的體驗和功能對標的開發調試工具出現。固然微信小程序的官方也提供了相似的工具，那就是 vConsole，可是相比 PC 端提供的工具來講確實不管是功能和體驗都有所欠缺，因此咱們開發了 weconsole 來提供更加全面的功能和更好的體驗。html

基於上述背景，咱們想開發一款運行在微信小程序環境上，不管在用戶體驗仍是功能等方面都能媲美 PC 端的前端開發調試工具，固然某些（如 debugger 代碼等）受限於技術在當前時期沒法實現的功能咱們暫且忽略。前端

咱們將這款工具命名爲Weimob Console，簡寫爲WeConsole。java

該項目屬於微盟前端開源項目之一，項目主頁：github.com/weimobGroup…git

2、安裝與使用

一、經過 npm 安裝

npm i weconsole -S
複製代碼

二、普通方式安裝

可將 npm 包下載到本地，而後將其中的dist/full文件夾拷貝至項目目錄中；github

三、引用

WeConsole 分爲核心和組件兩部分，使用時須要所有引用後方可以使用，核心負責重寫系統變量或方法，以達到全局監控的目的；組件負責將監控的數據顯示出來。typescript

在app.js文件中引用核心：npm

// NPM方式引用
import 'weconsole/init';

// 普通方式引用
import 'xxx/weconsole/init';
複製代碼

引入weconsole/init後，就是默認將 App、Page、Component、Api、Console 所有重寫監控！若是想按需重寫，可使用以下方式進行：json

import { replace, restore, showWeConsole, hideWeConsole } from 'weconsole'; // scope可選值：App/Page/Component/Console/Api
// 按需替換系統變量或函數以達到監控
replace(scope); // 可還原
restore(scope);

// 經過show/hide方法控制顯示入口圖標
showWeConsole();
複製代碼

若是沒有顯式調用過showWeConsole/hideWeConsole方法，組件第一次初始化時，會根據小程序是否開啓調試模式來決定入口圖標的顯示性。小程序

在須要的地方引用組件，須要先將組件註冊進app/page/component.json中：

// NPM方式引用
"usingComponents": {
    "weconsole": "weconsole/components/main/index"
}

// 普通方式引用
"usingComponents": {
    "weconsole": "xxx/weconsole/components/main/index"
}
複製代碼

而後在wxml中使用<weconsole>標籤進行初始化：

<!-- page/component.wxml -->
<weconsole />
複製代碼

<weconsole>標籤支持傳入如下屬性：

properties: {
    // 組件全屏化後，距離窗口頂部距離
    fullTop: String,
    // 劉海屏機型（如iphone12等）下組件全屏化後，距離窗口頂部距離
    adapFullTop: String,
}
複製代碼

四、建議

若是不想將 weconsole 放置在主包中，建議將組件放在分包內使用，利用小程序的 分包異步化 的特性，減小主包大小

3、功能

一、Console

  • 界面如圖 1
  • 實時顯示console.log/info/warn/error記錄；
  • Filter框輸入關鍵字已進行記錄篩選；
  • 使用分類標籤All, Mark, Log, Errors, Warnings...等進行記錄分類顯示，分類列表中All, Mark, Log, Errors, Warnings爲固定項，其餘可由配置項consoleCategoryGetter產生
  • 點擊🚫按鈕清空記錄（不會清除留存的記錄）
  • 長按記錄可彈出操做項（如圖 2）：
    • 複製：將記錄數據執行復制操做，具體形式可以使用配置項copyPolicy指定，未指定時，將使用JSON.stringify序列化數據，將其複製到剪切板
    • 取消置頂/置頂顯示：將記錄取消置頂/置頂顯示，最多可置頂三條（置頂無非是想快速找到重要的數據，當重要的數據過多時，就不宜用置頂了，可使用標記功能，而後在使用篩選欄中的Mark分類進行篩選顯示）
    • 取消留存/留存：留存是指將記錄保留下來，使其不受清除，即點擊🚫按鈕不被清除
    • 取消所有留存：取消全部留存的記錄
    • 取消標記/標記：標記就是將數據添加一個Mark的分類，能夠經過篩選欄快速分類顯示
    • 取消所有標記：取消全部標記的記錄

Console選項卡界面

圖 1

Console條目長按操做可選項

圖 2

二、Api

  • 界面如圖 3
  • 實時顯示wx對象下的相關 api 執行記錄
  • Filter框輸入關鍵字已進行記錄篩選
  • 使用分類標籤All, Mark, Cloud, xhr...等進行記錄分類顯示，分類列表由配置項apiCategoryList與apiCategoryGetter產生
  • 點擊🚫按鈕清空記錄（不會清除留存的記錄）
  • 長按記錄可彈出操做項（如圖 4）：
    • 複製：將記錄數據執行復制操做，具體形式可以使用配置項copyPolicy置頂，未指定時，將使用系統默認方式序列化數據（具體看實際效果），將其複製到剪切板
    • 其餘操做項含義與Console功能相似
  • 點擊條目可展現詳情，如圖 5

Api選項卡界面

圖 3

Api條目長按操做可選項

圖 4

Api條目詳情

圖 5

三、Component

  • 界面如圖 6
  • 樹結構顯示組件實例列表
    • 根是App
    • 二級固定爲getCurrentPages返回的頁面實例
    • 三級及更深經過this.selectOwnerComponent()進行父實例定位，進而肯定層級
  • 點擊節點名稱（帶有下劃虛線），可顯示組件實例詳情，以 JSON 樹的方式查看組件的全部數據，如圖 7

Component選項卡界面

圖 6

Component實例詳情

圖 7

四、Storage

  • 界面如圖 8
  • 顯示 Storage 記錄
  • Filter框輸入關鍵字已進行記錄篩選
  • 點擊🚫按鈕清空記錄（不會清除留存的記錄）
  • 長按操做項含義與Console功能相似
  • 點擊條目後，再點擊❌按鈕可將其刪除
  • 點擊Filter框左側的刷新按鈕可刷新所有數據
  • 點擊條目顯示詳情，如圖 9

Storage選項卡界面

圖 8

Storage詳情

圖 9

五、其餘

  • 界面如圖 10
  • 默認顯示 系統信息
  • 可經過customActions配置項進行界面功能快速定製，也可經過addCustomAction/removeCustomAction添加/刪除定製項目
  • 幾個簡單的定製案例以下，效果如圖 11：
import { setUIRunConfig } from 'xxx/weconsole/index.js';

setUIRunConfig({
    customActions: [
        {
            id: 'test1',
            title: '顯示文本',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return '測試文本';
                    }
                },
                {
                    id: 'show2',
                    button: '查看2',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return '測試文本2';
                    }
                }
            ]
        },
        {
            id: 'test2',
            title: '顯示JSON',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.json,
                    handler() {
                        return wx;
                    }
                }
            ]
        },
        {
            id: 'test3',
            title: '顯示錶格',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.grid,
                    handler(): WcCustomActionGrid {
                        return {
                            cols: [
                                {
                                    title: 'Id',
                                    field: 'id',
                                    width: 30
                                },
                                {
                                    title: 'Name',
                                    field: 'name',
                                    width: 70
                                }
                            ],
                            data: [
                                {
                                    id: 1,
                                    name: 'Tom'
                                },
                                {
                                    id: 2,
                                    name: 'Alice'
                                }
                            ]
                        };
                    }
                }
            ]
        }
    ]
});
複製代碼

Other選項卡界面

圖 10

Other 定製化案例

圖 10

4、API

經過如下方式使用 API

import { showWeConsole, ... } from 'weconsole';
showWeConsole();
複製代碼

replace(scope:'App'|'Page'|'Component'|'Api'|'Console')

替換系統變量或函數以達到監控，底層控制全局僅替換一次

restore(scope:'App'|'Page'|'Component'|'Api'|'Console')

還原被替換的系統變量或函數，還原後界面將不在顯示相關數據

showWeConsole()

顯示WeConsole入口圖標

hideWeConsole()

隱藏WeConsole入口圖標

setUIConfig(config: Partial)

設置WeConsole組件內的相關配置，可接受的配置項及含義以下：

interface MpUIConfig {
    /**監控小程序API數據後，使用該選項進行該數據的分類值計算，計算後的結果顯示在界面上 */
    apiCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;
    /**監控Console數據後，使用該選項進行該數據的分類值計算，計算後的結果顯示在界面上 */
    consoleCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;
    /**API選項卡下顯示的數據分類列表，all、mark、other 分類固定存在 */
    apiCategoryList?: Array<string | MpNameValue<string>>;
    /**複製策略，傳入複製數據，可經過數據的type字段判斷數據哪一種類型，好比api/console */
    copyPolicy?: MpProductCopyPolicy;
    /**定製化列表 */
    customActions?: WcCustomAction[];
}

/**取數據的category字段值對應的prop */
interface MpProductCategoryMap {
    [prop: string]: string | MpProductCategoryGetter;
}
interface MpProductCategoryGetter {
    (product: Partial<MpProduct>): string | string[];
}
interface MpProductCopyPolicy {
    (product: Partial<MpProduct>);
}
/**定製化 */
interface WcCustomAction {
    /**標識，須要保持惟一 */
    id: string;
    /**標題 */
    title: string;
    /**默認執行哪一個case？ */
    autoCase?: string;
    /**該定製化有哪些狀況 */
    cases: WcCustomActionCase[];
}

const enum WcCustomActionShowMode {
    /**顯示JSON樹 */
    json = 'json',
    /**顯示數據表格 */
    grid = 'grid',
    /** 固定顯示<weconsole-customer>組件，該組件須要在app.json中註冊，同時須要支持傳入data屬性，屬性值就是case handler執行後的結果 */
    component = 'component',
    /**顯示一段文本 */
    text = 'text',
    /**什麼都不作 */
    none = 'none'
}

interface WcCustomActionCase {
    id: string;
    /**按鈕文案 */
    button?: string;
    /**執行邏輯 */
    handler: Function;
    /**顯示方式 */
    showMode?: WcCustomActionShowMode;
}

interface WcCustomActionGrid {
    cols: DataGridCol[];
    data: any;
}
複製代碼

addCustomAction(action: WcCustomAction)

添加一個定製化項目；當你添加的項目中須要顯示你本身的組件時：

  • 請將 case 的showMode值設置爲component
  • 在app.json中註冊名稱爲weconsole-customer的組件
  • 定製化項目的 case 被執行時，會將執行結果傳遞給weconsole-customer的data屬性
  • 開發者根據data屬性中的數據自行判斷內部顯示邏輯

removeCustomAction(actionId: string)

根據 ID 刪除一個定製化項目

getWcControlMpViewInstances():any[]

獲取小程序內 weconsole 已經監控到的全部的 App/Page/Component 實例

log(type = "log", ...args)

由於 console 被重寫，當你想使用最原始的 console 方法時，能夠經過該方式，type 就是 console 的方法名

on/once/off/emit

提供一個事件總線功能，全局事件及相關函數定義以下：

const enum WeConsoleEvents {
    /**UIConfig對象發生變化時 */
    WcUIConfigChange = 'WcUIConfigChange',
    /**入口圖標顯示性發生變化時 */
    WcVisableChange = 'WcVisableChange',
    /**CanvasContext準備好時，CanvasContext用於JSON樹組件的界面文字寬度計算 */
    WcCanvasContextReady = 'WcCanvasContextReady',
    /**CanvasContext銷燬時 */
    WcCanvasContextDestory = 'WcCanvasContextDestory',
    /**主組件的寬高發生變化時 */
    WcMainComponentSizeChange = 'WcMainComponentSizeChange'
}

interface IEventEmitter<T = any> {
    on(type: string, handler: EventHandler<T>);
    once(type: string, handler: EventHandler<T>);
    off(type: string, handler?: EventHandler<T>);
    emit(type: string, data?: T);
}
複製代碼

5、後續規劃

  • 優化包大小
  • 單元測試
  • 體驗優化
  • 定製化升級
  • 基於網絡通訊的界面化 weconsole
  • 標準化
  • 支持 H5
  • 支持其餘小程序平臺（支付寶/百度/字節跳動）

6、License

WeConsole 使用 MIT 協議.

7、聲明

生產環境請謹慎使用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程