小程序之調試技巧

2021-01-20 碼代碼的豬

Console的使用

對於小程序來說，最常用的方式就是console。在關鍵地方觀察數據和執行。

那麼當運行在真機上時怎麼看console呢？

有兩種辦法：

真機調試：點擊真機調試，然後使用手機操作，同時在PC上彈出的窗口中觀察。

手機上查看Console：在手機上查看Console有兩種方式，第一種適用於debug版本的小程序。

點擊右上方的菜單按鈕，在彈出的頁面中點擊打開調試。

第二種方式是在app.js(app.wpy)中使用代碼進行控制

在vConsole中可以查看console等信息。

使用IDE查看信息

小程序的IDE中提供了很多跟瀏覽器類似的調試工具，可用於查看程序在運行中的反應。具體如下：

2.1 使用IDE查看代碼

2.2 使用IDE查看網絡請求

2.3 使用IDE查看appData

查看當前頁面棧中的頁面中的data對象中的屬性值。

2.4 使用IDE查看wxml元素

與瀏覽器中查看html元素一致。

2.5 使用IDE查看當前小程序存儲

自定義編譯

小程序IDE提供了自定義編譯功能，可用該功能模擬很多場景，如從不同頁面進入小程序，帶參數進入小程序，不同場景值下進入小程序等等。

這個技巧非常重要，常用於模擬掃碼進入、從外部應用進入等不方便操作的功能調試。

這是我自己使用的一些自定義編譯配置：

自定義編譯可以自定義以下幾項：

模式名稱啟動頁面（app.json中聲明的一致）啟動參數進入場景（從下拉列表中選擇）模擬更新（會調用upgrade方法）巧用數據緩存

在IDE中提供了清緩存功能。

我們可以利用這個功能模擬未授權場景，token異常場景等跟數據有關的場景，幫助程序更好的應對異常情況。

體驗評分

體驗評分是一項給小程序的體驗好壞打分的功能，它會在小程序運行過程中實時檢查，分析出一些可能導致體驗不好的地方，並且定位出哪裡有問題，以及給出一些優化建議。

運行環境要求

下載並安裝 1.02.1808300 或以上版本的開發者工具，下載地址。基礎庫需要切到 2.2.0 或以上版本。使用流程

打開開發者工具，在詳情裡切換基礎庫到 2.2.0 或以上版本在調試器區域切換到 Audits 面板點擊左上角」開始「按鈕（見下圖），然後自行操作小程序界面，運行過的頁面就會被「體驗評分」檢測到點擊 「Stop" 停止分析，就會看到一份分析報告，之後便可根據分析報告進行相關優化

參考資料

1.官方調試指導https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html

2. 體驗評分

https://developers.weixin.qq.com/miniprogram/dev/devtools/audits.html

相關焦點

  • 編程｜程序調試之調試窗口
    程序寫出來後，總是有這樣那樣的錯誤，調試技巧就顯得很重要了。另外，對於一些理解一些複雜的算法，在關鍵的一些代碼段通過單步調試，便能加深理解。所以說，調試對於編程來說，不但必不可少而且還很重要。調試的一個很重要的方面，就是知道如何在一些調試窗口中查看自己想要了解的內容。
  • 經驗分享:C++編程中的四個調試小技巧
    經驗分享：C++編程中的四個調試小技巧 本文介紹的是C++中的一些編程的小技巧，希望對你有幫助，一起來看。作者：佚名來源：網際網路|2011-07-12 13:41 下面介紹C++編程的四個小技巧
  • 11個強大的Visual Studio調試小技巧
    調試是軟體開發周期中很重要的一部分。它具有挑戰性，同時也很讓人疑惑和煩惱。總的來說，對於稍大一點的程序，調試是不可避免的。最近幾年，調試工具的發展讓很多調試任務變的越來越簡單和省時。這篇文章總結了可能節省你大量時間的11個Visual studio的調試技巧和方法。
  • 關於Scrapy爬蟲項目運行和調試的小技巧(下篇)
    前幾天給大家分享了關於Scrapy爬蟲項目運行和調試的小技巧上篇，沒來得及上車的小夥伴可以戳超連結看一下。今天小編繼續沿著上篇的思路往下延伸，給大家分享更為實用的Scrapy項目調試技巧。
  • iOS 真機調試微信小程序
    平時開發小程序可以在開發者工具中進行調試，開發者工具提供了類似Chrome DevTools的調試面板，對於前端開發者來說入門門檻比較低。小程序開發完成之後，我們需要在真機上進行測試，真機調試方面小程序開發者工具有預覽、遠程調試和設置體驗版本三大部分功能。
  • 分享一個python調試程序BUG的技巧，有誰會不出BUG呢
    今天就分享一個調試python程序的小技巧：用input中斷程序用print輸出可疑的變量學過Matlab的同學應該很容易理解我的意思，Matlab中有一個功能是專門用來調試程序的，可以讓程序在特定的位置中斷。
  • 使用Eclipse調試Java程序的10個技巧
    假設我每天花費1小時在調試我的應用程式上的話，那累積起來的話也是很大量的時間。由於這個原因，用這些時間來重視並了解所有使我們調試更方便的功能。那能為你省下一些時間，也將會使你的生活更安逸、輕鬆。同時也表明其它關於此主題的帖子也是很有價值的。第1條：不要調試太多一個關於調試的瘋狂聲明作為開頭。但它必須是要說的！
  • gdb實用的調試技巧：啟動方式、堆棧信息、單步調試
    對於很多開發者來說，開發過程中難免會遇到各種各樣的bug, 所以，每個開發者應該考慮如何快速高效定位問題原因，而gdb是linux上很實用的調試工具，熟練掌握其調試技巧，將有助於提高解決問題的效率，也是開發者應該掌握的基本技能。
  • gdb實用的調試技巧:啟動方式、堆棧信息、單步調試
    對於很多開發者來說，開發過程中難免會遇到各種各樣的bug, 所以，每個開發者應該考慮的如何快速高效定位問題原因，而gdb是linux上很實用的調試工具，熟練掌握其調試技巧，將有助於提高解決問題的效率，也是開發者應該掌握的基本技能。
  • 小技巧｜在 Android Studio 調試應用
    正因如此，最近我們找機會了解了 android Studio 團隊在提升調試速度方面使用的一些技巧。接下來，我們會為您一一呈現那些我們認為最好的、節省您時間的、且方便與您的調試流程整合的小技巧。雖然您的應用可能與本文假想中的示例應用大相逕庭，但是本文所介紹的小竅門可以用在任何應用的開發上。Log 的過濾與摺疊我們從經典調試法 —— printf 語句的一個小竅門說起。
  • 這些調試技巧都不會,不要說會VBA編程
    程序調試是編程過程的重要組成部分，程序調試可以讓我們修正程序的語法錯誤和邏輯錯誤，並能儘可能地減少程序中的bug。Excel的VBE也提供了豐富的調試工具，如斷點調試，立即窗口和監視窗口等。下面將介紹幾個常用的VBA編程調試技巧。
  • 物聯網開發筆記——嵌入式開發之Linux系統中C程序的編譯與調試
    所以就先做小的系統，例如構建一整套智能家居系統，從硬體到軟體全系列。下面就開始這套智能家居系統是如何在物聯網基礎上構建。在這裡你可以0開始，然後到1質變，僅僅需要一起跟我學物聯網系列的開發筆記的文章。第一節物聯網開發筆記——嵌入式開發之Linux系統環境搭建搭建主要講解了在Windows系統下，用虛擬機的方法搭建環境。
  • Javascript之實用debug調試技巧分享
    見過太多同學調試Javascript只會用簡單的 console.log甚至 alert，看著真為他們捉雞。。因為大多數同學追求優雅而高效地寫代碼，卻忽略了如何優雅而高效地調試代碼，不得不說是有點「偏科」了。
  • IDEA調試技巧，簡直爽到爆
    軟體調試技能是很好的區分程式設計師水平高低的一桿秤。下面為大家介紹幾個用起來爽到爆的調試技巧。0x01 條件斷點調試過程中，循環語句經常用到的一個技巧，比如：遍歷一個比較大的List的過程，想讓斷點停在某個特定值。如果你還停留在循環中間設置斷點，然後不停地下一步，下一步......那麼，請繼續看下去！
  • Visual Studio 調試技巧之即時窗口的妙用
    默認會在你啟動調試時在 VS 編輯器中彈出來。下面總結幾個即時窗口的實用技巧。然後在即時窗口編寫調用代碼，它會直接使用當前上下文進行調試。不需要中斷 VS 調試再重新啟動。直接列印是這樣的：結束本文分享的這幾個即時窗口的技巧，在調試時很實用，在工作中我經常使用，希望它也可以幫助你提高開發效率。
  • 自己開發的小程序線上出bug,怎麼調試呢
    我自己開發的小程序血玉鑽在推廣的時候，用戶突然增加，發現有個嚴重的bug，然後發現這個怎麼在開發環境解決呢。有下面幾種方式：生產版本的小程序如果出現問題，可以調試一下正式版看看，調試方式如下：1.設置是否打開調試開關。此開關對正式版也能生效。
  • 遠程調試Java程序
    一、概述Java的遠程debug，可以在本地打斷點，調試遠程程序方法是修改JAVA_OPTS參數，使用Eclipse或IDEA等工具調試。遠程調試有兩種方式：主動連接調試：服務端配監控埠，IDE連接遠程埠。被動連接調試：IDE設置監聽埠，等遠程連接本地埠。
  • eclipse怎麼調試程序 調試代碼的方法介紹
    1、設置斷點 　　在程序裡面放置一個斷點，也就是雙擊需要放置斷點的程序左邊的欄目上。 　　2、調試 　　(1)點擊"打開透視圖"按鈕，選擇調試透視圖，則打開調試透視圖界面，然後先設置斷點，按調試按鈕則可以調試程序。 　　(2)或者直接點擊調試按鈕，那個蟲子樣子的按鈕，然後就會進入調試透視圖的界面。前提你需要是要在程序中設置好斷點。
  • 12個Visual Studio調試效率技巧
    F9 在當前行設置斷點F10 運行到下一個斷點處F5 從被調試的已停止程序恢復執行F11 步進到函數內（如果當前程序指針指向一個函數）F10然而，Visual Studio調試工具提供了更多的功能。下面是一系列Visual Studio調試效率技巧。注意，這些提示和快捷方式已經在的Visual studio 2019 16.6 EN-US版本中進行了驗證，驗證時Visual studio沒有安裝擴展。
  • 騰訊研發部公開：小程序開發常用API技巧，讓你的小程序飛起來
    前言已經好久沒動過微信小程序了，周五的時候，有一個朋友說有一個外快，問我幹不幹，幾個朋友一起搞一下，我想了一下，正好周末也沒啥事，女朋友回家了，就答應下來了，幾個朋友聚到一起整了兩天整完了，因為本身程序要求就不是很高，好久也沒寫什麼技術文了，就順手也整理了一篇微信小程序常用的API開發技巧，想做小程序的朋友可以看一下