碼上快樂

相關內容    簡體    繁體

微信小程序~調試

本文轉載自   查看原文   2019-06-30 17:05   892 

小程序調試面板

 

模擬器

模擬器模擬微信小程序在客戶端真實的邏輯表現，對於絕大部分的 API 均能夠在模擬器上呈現出正確的狀態。

emulat

自定義編譯

點擊工具欄中的編譯按鈕或者使用快捷鍵 Ctrl(⌘) + B，可以編譯當前代碼，並自動刷新模擬器。

同時為了幫助開發者調試從不同場景值進入具體的頁面，開發者可以添加或選擇已有的自定義編譯條件進行編譯和代碼預覽（如圖）。

注：編譯條件跟項目相關，每個項目可以保存自己相關的編譯條件

wxml

編譯異常信息

在預覽或上傳的過程中，可能會出現編譯異常信息。

忽略上傳的文件：在項目文件夾下，某些文件可能不是小程序運行所需的，例如 readme 文檔、.gitignore 文件等。為了優化大小，在預覽和上傳的過程中，這些文件將不會被打包。

體積過大的文件：如果勾選了 ES6 轉 ES5 或代碼壓縮的選項，為了優化編譯速度，對於某些體積很大的 JS 文件，工具會跳過對這些文件的處理。

自定義預處理

projectsetting

在項目設置頁卡，我們提供了以下幾個默認的預處理，可以解決大部分的代碼文件預處理的問題

  1. ES6 轉 ES5（可以應用於編譯、預覽、上傳），使用 "babel-core": "^6.26.0"
  2. 上傳代碼時樣式自動補全，使用 "postcss": "^6.0.1"
  3. 上傳代碼時自動壓縮，使用 "uglify-js": "3.0.27"

對於高級開發者來說，完全可以自己編寫自動化構建腳本對代碼文件進行預處理，所以我們提供了 啟用自定義處理命令 選項 開發者可以指定 編譯前/預覽前/上傳前 需要預處理的命令 開發者工具使用 shell 的方式運行指定的命令，並在控制台中輸出命令的執行日志

預處理命令的執行順序

  1. 自定義預處理命令
  2. 默認預處理命令
  3. 編譯/預覽/上傳

注：

  1. 編譯前預處理命令，需要手動點擊 "編譯" 按鈕，或者使用快捷鍵編譯才能觸發。文件修改無法觸發該命令。
  2. Mac 版本的開發者工具無法復用 bash 中的 Path 環境變量。可能需要手動設置系統的 Path 環境變量，才能正常執行命令。

前后台切換

工具欄中前后台切換幫助開發者模擬一些客戶端的環境操作。例如當用戶從小程序中回到聊天窗口，會觸發一個小程序被設置為后台的回調。

5

調試工具

調試工具分為 7 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

Wxml panel

Wxml panel 用於幫助開發者開發 wxml 轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的 wxss 屬性，同時可以通過修改對應 wxss 屬性，在模擬器中實時看到修改的情況（僅為實時預覽，無法保存到文件）。通過調試模塊左上角的選擇器，還可以快速定位頁面中組件對應的 wxml 代碼。

wxml

Sources panel

Sources panel 用於顯示當前項目的腳本文件，同瀏覽器開發不同，微信小程序框架會對腳本文件進行編譯的工作，所以在 Sources panel 中開發者看到的文件是經過處理之后的腳本文件，開發者的代碼都會被包裹在 define 函數中，並且對於 Page 代碼，在尾部會有 require 的主動調用。

sources

注：當代碼運行到斷點的時候，整個小程序都停止了，所以模擬器會出現白屏或者無法操作的情況

AppData panel

AppData panel 用於顯示當前項目運行時小程序 AppData 具體數據，實時地反映項目數據情況，可以在此處編輯數據，並及時地反饋到界面上。

appdata

Storage panel

Storage panel 用於顯示當前項目使用 wx.setStorage 或者 wx.setStorageSync 后的數據存儲情況。

可以直接在 Storage panel 上對數據進行刪除（按 delete 鍵）、新增、修改

storage

Network panel

Network Panel 用於觀察和顯示 request 和 socket 的請求情況

network

注：uploadFile 和 downloadFile 暫時不支持在 Network Panel 中查看

Console panel

Console panel 有兩大功能：

  • 開發者可以在此輸入和調試代碼

    console

  • 小程序的錯誤輸出，會顯示在此處

    4

  • 在控制台中可以輸入以下命令

build: 編譯小程序

preview: 預覽

upload: 上傳代碼

openVendor: 打開基礎庫所在目錄

openToolsLog: 打開工具日志目錄

checkProxy(url): 檢查指定 url 的代理使用情況

Sensor panel

Sensor panel 有兩大功能：

  • 開發者可以在這里選擇模擬地理位置

    location

  • 開發可以在這里模擬移動設備表現，用於調試重力感應 API

    4

自定義數據上報

開發者工具上可以編輯和調試自定義分析的數據上報功能，點擊菜單欄中的 “工具 - 自定義分析” 即可彈窗打開自定義分析：

8

在頁面中可以新建、查看或修改事件，在修改事件的頁面中編輯完畢后，點擊底部的保存並測試按鈕將保存當前配置，同時工具將在調試器上提示收到最新配置，並展示配置信息，展示的內容包括事件的 ID 和名稱，以及每個動作的觸發條件和上報數據：

910

接着可以在模擬器中操作和觸發事件。在模擬器中刷新小程序也將獲取該測試配置，除非窗口被關閉。窗口關閉后模擬器不會再收到配置。當事件被觸發上報時，工具上會展示上報信息，包括事件 ID、觸發頁面、觸發方式、觸發時動作、以及上報的字段值和數據：

11

同時可以在窗口中點擊 “同步結果” 會同步顯示上報的數據： 12

關閉窗口后，配置將全部失效，模擬器不再收到配置並不再觸發上報（小程序中使用 wx.reportAnalytics API 進行的數據上報仍會在工具中輸出）。 測試成功后，可到小程序后台發布事件配置，即可正式生效收集所定義的事件數據。

自動預覽

自動預覽可以實現編寫小程序時快速預覽，免去了每次查看小程序效果時都要掃碼或者使用小程序助手的麻煩。只需按下快捷鍵，保持前台運行的微信即可自動喚出或刷新小程序。

要使用自動預覽功能，需要配合 6.6.7 及以上的微信客戶端版本。

13

要開始使用 “自動預覽” 功能，可以在打開預覽二維碼的時候，點擊 “自動預覽” 標簽以切換到自動預覽模式。切換到自動預覽模式后，只需按下預覽快捷鍵，或者點擊浮窗上的 “編譯並預覽” 按鈕，即可觸發自動預覽。此時工具會上傳代碼，保持前台運行的微信客戶端會自動刷新當前開發的小程序。

當自動預覽成功時，工具欄上的預覽圖標會顯示為一個綠勾。如果預覽出錯，則會顯示為一個紅色驚嘆號，可以點擊查看詳情。

注意，自動預覽功能僅限與登陸開發者工具的同帳號微信使用。如需換回普通預覽模式，只需要點擊 “掃描二維碼預覽” 標簽即可。

用戶可以在快捷鍵設置里自定義預覽快捷鍵。

13

Source Map

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

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

在開發者工具中開啟 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. line sourcemap 不計入代碼包大小計算。
  3. 開發版代碼包中由於包含了 .map 文件，實際代碼包大小會比體驗版和正式版大。

 

 

 

vConsole

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

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

 

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 及以上版本，支持展示所有類型的數據。基礎庫會對日志內容進行一次轉換，經過轉換的內容會使用<>包裹。如:

    • <Function: func>
    • <Undefined>
    • <Infinity>
    • <Map: size=0>
    • <ArrayBuffer: byteLength=10>
    • ...

  • 2.2.3 ~ 2.3.0 版本中，可以展示 ArrayBuffer 和 Function 類型，undefined 會被打印為字符串 'undefined'

注：盡量避免在非調試情景下打印結構過於復雜或內容過長的日志內容（如游戲引擎中的精靈或材質對象等），可能會帶來額外耗時。

Source Map

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

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

在開發者工具中開啟 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 文件，實際代碼包大小會比體驗版和正式版大。

真機調試

真機遠程調試功能可以實現直接利用開發者工具，通過網絡連接，對手機上運行的小程序進行調試，幫助開發者更好的定位和查找在手機上出現的問題。詳見開發工具文檔 真機調試

 

 

 

 

 

.


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序 - debug（調試） 微信小程序 真機調試 微信小程序調試 Webview 【taro】 如何編輯調試微信小程序 微信小程序開發系列教程三：微信小程序的調試方法 CocosCreator上的游戲（調試）發布到微信小程序 微信小程序真機調試報錯代碼50005 微信小程序開發調試階段不校驗請求域名 微信小程序真機調試echarts 微信小程序如何進行本地調試
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM