微信小程序 調(diào)試

調(diào)試

vConsole

在真機(jī)上，如果想要查看 console API 輸出的日志內(nèi)容和額外的調(diào)試信息，需要在點(diǎn)擊屏幕右上角的按鈕打開的菜單里選擇「打開調(diào)試」。此時(shí)小程序/小游戲會(huì)退出，重新打開后會(huì)右下角會(huì)出現(xiàn)一個(gè) vConsole 按鈕。點(diǎn)擊 vConsole 按鈕可以打開日志面板。

小程序和小游戲的 vConsole 展示內(nèi)容會(huì)有一定差別，下圖左邊是小程序 vConsole，右邊是小游戲 vConsole

vConsole 使用說明

由于實(shí)現(xiàn)機(jī)制的限制，開發(fā)者調(diào)用 console API 打印的日志內(nèi)容，是轉(zhuǎn)換成 JSON 字符串后傳輸給 vConsole 的，導(dǎo)致 vConsole 中展示的內(nèi)容會(huì)有一些限制：

• 除了 Number、String、Boolean、null 外，其他類型都會(huì)被作為 Object 處理展示，打印對(duì)象及原型鏈中的 Enumerable 屬性。
• Infinity 和 NaN 會(huì)顯示為 null。
• undefined、ArrayBuffer、Function 類型無法顯示
• 無法打印存在循環(huán)引用的對(duì)象
  

  let a = {}
  a.b = a
  console.log(a) // 2.3.2 以下版本，會(huì)打印 `An object width circular reference can't be logged`
  

針對(duì)上述問題，小程序/小游戲在使用 vConsole 時(shí)做了一些處理

• 2.3.2 及以上版本，支持打印循環(huán)引用對(duì)象。循環(huán)引用的對(duì)象屬性會(huì)顯示引用路徑，@表示對(duì)象本身。
  

  const circular = { x: {}, c: {} }
  circular.x = [{ promise: Promise.resolve() }]
  circular.a = circular
  circular.c.x0 = circular.x[0]
  
  console.log(circular)
  // "{a: '<Circular: @>', c: {x0: '<Circular: @.x[0]>'}, x: [{promise: '<Promise>'}]}"
  

• 2.3.1 及以上版本，支持展示所有類型的數(shù)據(jù)?；A(chǔ)庫(kù)會(huì)對(duì)日志內(nèi)容進(jìn)行一次轉(zhuǎn)換，經(jīng)過轉(zhuǎn)換的內(nèi)容會(huì)使用<>包裹。如：
  • <Function: func>
  • <Undefined>
  • <Infinity>
  • <Map: size=0>
  • <ArrayBuffer: byteLength=10>
  • ...
• 2.2.3 ~ 2.3.0 版本中，可以展示 ArrayBuffer 和 Function 類型，undefined 會(huì)被打印為字符串 'undefined'

注：盡量避免在非調(diào)試情景下打印結(jié)構(gòu)過于復(fù)雜或內(nèi)容過長(zhǎng)的日志內(nèi)容（如游戲引擎中的精靈或材質(zhì)對(duì)象等），可能會(huì)帶來額外耗時(shí)。為了防止異常發(fā)生，日志內(nèi)容超過一定長(zhǎng)度會(huì)被替換為<LOG_EXCEED_MAX_LENGTH>，此時(shí)需要開發(fā)者裁剪日志內(nèi)容。

Source Map

目前只在 iOS 6.7.2 及以上版本支持

小程序/小游戲在打包時(shí)，會(huì)將所有 js 代碼打包成一個(gè)文件，為了便于開發(fā)者在手機(jī)上調(diào)試時(shí)定位錯(cuò)誤位置，小程序/小游戲提供了 Source Map 支持。

在開發(fā)者工具中開啟 ES6 轉(zhuǎn) ES5、代碼壓縮時(shí)，會(huì)生成 Source Map 的 .map 文件。開發(fā)版小程序中，基礎(chǔ)庫(kù)會(huì)使用代碼包中的 .map 文件，對(duì) vConsole 中展示的錯(cuò)誤信息堆棧進(jìn)行重新映射（只對(duì)開發(fā)者代碼文件進(jìn)行）。

如果使用外部的編譯腳本對(duì)源文件進(jìn)行處理，只需將對(duì)應(yīng)生成的 Source Map 文件放置在源文件的相同目錄下

如：

pages/index.js

pages/index.js.map

app.js

app.js.map

開發(fā)者工具會(huì)讀取、解析 Source Map 文件，并進(jìn)行將其上傳

后續(xù)可以在小程序后臺(tái)的運(yùn)營(yíng)中心可以利用上傳的 Source Map 文件進(jìn)行錯(cuò)誤分析

1. Source Map 文件不計(jì)入代碼包大小計(jì)算。
2. 開發(fā)版代碼包中由于包含了 .map 文件，實(shí)際代碼包大小會(huì)比體驗(yàn)版和正式版大。

真機(jī)調(diào)試

真機(jī)遠(yuǎn)程調(diào)試功能可以實(shí)現(xiàn)直接利用開發(fā)者工具，通過網(wǎng)絡(luò)連接，對(duì)手機(jī)上運(yùn)行的小程序進(jìn)行調(diào)試，幫助開發(fā)者更好的定位和查找在手機(jī)上出現(xiàn)的問題。