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

調(diào)試

vConsole

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

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

vConsole 使用說明

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

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

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

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

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

  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ǔ)庫會對日志內(nèi)容進行一次轉(zhuǎn)換，經(jīng)過轉(zhuǎn)換的內(nèi)容會使用<>包裹。如：
  • <Function: func>
  • <Undefined>
  • <Infinity>
  • <Map: size=0>
  • <ArrayBuffer: byteLength=10>
  • ...
• 2.2.3 ~ 2.3.0 版本中，可以展示 ArrayBuffer 和 Function 類型，undefined 會被打印為字符串 'undefined'

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

Source Map

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

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

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

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

如：

pages/index.js

pages/index.js.map

app.js

app.js.map

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

后續(xù)可以在小程序后臺的運營中心可以利用上傳的 Source Map 文件進行錯誤分析

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

真機調(diào)試

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