## 調試
### [](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html#vConsole)vConsole
在真機上,如果想要查看?console?API 輸出的日志內容和額外的調試信息,需要在點擊屏幕右上角的按鈕打開的菜單里選擇「打開調試」。此時小程序/小游戲會退出,重新打開后會右下角會出現一個?vConsole?按鈕。點擊?vConsole?按鈕可以打開日志面板。
小程序和小游戲的 vConsole 展示內容會有一定差別,下圖左邊是小程序 vConsole,右邊是小游戲 vConsole
?
#### [](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html#vConsole-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)vConsole 使用說明
由于實現機制的限制,開發者調用?console?API 打印的日志內容,是轉換成?JSON?字符串后傳輸給?vConsole?的,導致?vConsole?中展示的內容會有一些限制:
* 除了?Number、String、Boolean、null?外,其他類型都會被作為?Object?處理展示,打印對象及原型鏈中的 Enumerable 屬性。
* Infinity?和?NaN?會顯示為?null。
* undefined、ArrayBuffer、Function?類型無法顯示
* 無法打印存在循環引用的對象
~~~
let a = {}
a.b = a
console.log(a) // 2.3.2 以下版本,會打印 `An object width circular reference can't be logged`
~~~
針對上述問題,小程序/小游戲在使用 vConsole 時做了一些處理
* 2.3.2 及以上版本,支持打印循環引用對象。循環引用的對象屬性會顯示引用路徑,@表示對象本身。
~~~
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 及以上版本,支持展示所有類型的數據。基礎庫會對日志內容進行一次轉換,經過轉換的內容會使用<>包裹。如:
*
*
*
*
*
* ...
* 2.2.3 ~ 2.3.0 版本中,可以展示?ArrayBuffer?和?Function?類型,undefined?會被打印為字符串?'undefined'
**注:盡量避免在非調試情景下打印結構過于復雜或內容過長的日志內容(如游戲引擎中的精靈或材質對象等),可能會帶來額外耗時。為了防止異常發生,日志內容超過一定長度會被替換為,此時需要開發者裁剪日志內容。**
### [](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html#Source-Map)Source Map
> 目前只在 iOS 6.7.2 及以上版本支持
小程序/小游戲在打包時,會將所有 js 代碼打包成一個文件,為了便于開發者在手機上調試時定位錯誤位置,小程序/小游戲提供了?[Source Map](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit)?支持。
在開發者工具中開啟 ES6 轉 ES5、代碼壓縮時,會生成 Source Map 的?.map?文件。開發版小程序中,基礎庫會使用代碼包中的?.map?文件,對 vConsole 中展示的錯誤信息堆棧進行重新映射(只對開發者代碼文件進行)。

如果使用外部的編譯腳本對源文件進行處理,只需將對應生成的 Source Map 文件放置在源文件的相同目錄下
如:
> pages/index.js
> pages/index.js.map
> app.js
> app.js.map
開發者工具會讀取、解析 Source Map 文件,并進行將其上傳
后續可以在小程序后臺的運營中心可以利用上傳的 Source Map 文件進行錯誤分析
1. **Source Map 文件不計入代碼包大小計算。**
2. **開發版代碼包中由于包含了?.map?文件,實際代碼包大小會比體驗版和正式版大。**
### [](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html#%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95)真機調試
真機遠程調試功能可以實現直接利用開發者工具,通過網絡連接,對手機上運行的小程序進行調試,幫助開發者更好的定位和查找在手機上出現的問題。
- 惠惠軟件-開發自助學習系統
- 一.微信公眾號(服務號)申請流程
- 二.申請所需提前準備資料
- 三.認證微信公眾號:申請微信小程序流程
- 四.微信小程序安裝和開發環境
- 五.微信小程序如何上傳、提交審核、發布操作
- 六.微信小程序開發教程手冊
- 0.1微信小程序 小程序簡介
- 0.2微信小程序 開始第一步
- 0.3微信小程序 小程序代碼構成
- 0.4微信小程序 小程序宿主環境
- 0.5微信小程序 小程序協同工作和發布
- 0.6微信小程序 目錄結構
- 0.7微信小程序 全局配置
- 0.8微信小程序 頁面配置
- 0.9微信小程序 sitemap配置
- 0.10微信小程序 場景值
- 0.11微信小程序 注冊小程序
- 0.12微信小程序 注冊頁面
- 0.13微信小程序 頁面生命周期
- 0.14微信小程序 頁面路由
- 0.15微信小程序 模塊化
- 0.16微信小程序 API
- 0.17微信小程序 運行環境
- 0.18微信小程序 JavaScript支持情況
- 0.19微信小程序 運行機制
- 0.20微信小程序 更新機制
- 0.21微信小程序 廣告·Banner 廣告
- 0.22微信小程序 安全指引·開發原則與注意事項
- 0.23微信小程序 調試
- 0.24微信小程序 啟動性能
- 0.25微信小程序 運行時性能
- 0.26微信小程序 性能分析工具
- 0.27微信小程序 體驗評分
- 八.小程序的美工
- 8.1圖片大小
- 8.2顏色代碼
- 8.3小程序的美工技巧
- 九.微信小程序-定制開發
- 十.微信支付申請流程
- 十一.小程序支付對接流程
- 十二.微信小程序使用中常見問題匯總
- 十二.小程序開發中遇到的問題—匯總
- 十四.小程序問題及解決
- 十五.網站開發定制
- 1.開發定制流程
- 2.搭建網站的過程
- 3.做網站基本費用
- 4.服務器選什么系統更好?
- 十六.常用工具、軟件網站推薦