1. 事前準備
本程式碼研究室將說明如何在 Android Studio 中使用偵錯工具,檢查 Dice Roller 應用程式在執行階段中發生什麼事情。
偵錯工具是一項重要的工具,可針對支援 Android 應用程式的程式碼檢查相關執行情況,以便您修正其中的所有錯誤。透過偵錯工具,您可以指定程式碼暫停執行的時間點,以手動的方式與程式碼的變數、方法和其他層面互動。
必要條件
- Android Studio 基本知識
- 可在 Android Studio 中建立及執行基本的 Jetpack Compose 應用程式
- 完成「建立互動式的 Dice Roller 應用程式」程式碼研究室
課程內容
- 如何將偵錯工具附加到 Android 應用程式。
- 如何啟動已附加偵錯工具的應用程式。
- 如何使用偵錯工具的部分基本功能。
- 瞭解偵錯工具的一般常見用途。
軟硬體需求
- 已安裝 Android Studio 的電腦
- Compose 中 Dice Roller 應用程式的解決方案程式碼
2. 觀看程式設計示範影片 (可略過)
如果您想觀看課程老師示範完成此程式碼研究室,請觀看以下影片。
建議您在全螢幕模式下觀看影片 (點選影片右下角的 圖示),以便清楚看見 Android Studio 和程式碼。
您可以跳過這個步驟,也可以不觀看這段影片,立即開始進行程式碼研究室的操作步驟。
3. 取得範例程式碼
如要開始,請先下載程式碼:
或者,您也可以複製 GitHub 存放區的程式碼:
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git $ cd basic-android-kotlin-compose-training-dice-roller
您可以瀏覽 GitHub 存放區中的程式碼。
4. 執行偵錯工具
使用應用程式時,執行偵錯工具的方式有兩種:
- 於已經在裝置或模擬器上執行的現有應用程式處理程序中,附加偵錯工具。
- 執行已附加偵錯工具的應用程式
這兩種方法在一定程度上都能達成相同目標。熟悉這兩種做法後,您可以選擇您偏好的方式,或視需要擇一使用。
將偵錯工具附加到應用程式的處理程序中
如果您的應用程式已在執行,您可以附加偵錯工具。
如要將偵錯工具附加到應用程式的處理程序中,請按照下列步驟操作:
- 按一下「Attach debugger to Android process」圖示 。
系統會開啟「Choose Process」對話方塊,讓您選擇要附加偵錯工具的處理程序。
- 選取
com.example.diceroller
,然後按一下「OK」。
Android Studio 底部會顯示「Debug」窗格,其中有一則訊息指出偵錯工具已附加至目標裝置或模擬器。
您已將偵錯工具附加到您的應用程式!如果您不知道這是什麼意思,或可以用偵錯工具做什麼,請別擔心,因為我們稍後會在這個程式碼研究室中說明。接下來,我們來瞭解如何啟動已附加偵錯工具的應用程式。
執行已附加偵錯工具的應用程式
如果您從一開始就確定要使用偵錯工具,可以先將偵錯工具附加到應用程式,這樣執行起來比較節省時間。此外,如果您想偵錯的範圍限定在應用程式啟動時才會執行的程式碼,也必須事先將偵錯工具附加到應用程式後,再啟動應用程式,才能達到這個目標。
如要執行已附加偵錯工具的應用程式,請按照下列步驟操作:
- 在「Debug」窗格中,按一下「Stop」圖示 ,然後關閉裝置或模擬器上的應用程式。
- 按一下「Debug 'app'」圖示 。
Android Studio 底部會顯示同樣的「Debug」窗格,顯示部分主控台輸出內容。
現在您已經瞭解如何啟動偵錯工具!接下來,我們來瞭解這項工具的使用方式。
5. 使用偵錯工具
「Debug」 窗格
您可能會發現「Debug」窗格頂端有幾個按鈕,但這些按鈕目前還派不上用場,而且大多都會顯示為灰色且無法點選。這一節將說明偵錯工具中最常用的功能。我們也會在適當時機透過這個程式碼研究室說明其他按鈕的功能。
首次啟動偵錯工具時,會在「Debug」窗格中看到許多按鈕。「Debug」窗格頂端會顯示「Debugger」和「Console」按鈕。
「Console」按鈕會顯示應用程式的 Logcat 輸出內容。如果程式碼中有任何記錄陳述式,輸出內容會在該程式碼執行時顯示。
「Debugger」按鈕則顯示三個不同窗格,由於您目前並未使用偵錯工具,因此這些窗格沒有任何內容:
- 「Frames」顯示
- 評估和觀察運算式項目
- 「Variables」窗格
使用常見的偵錯工具功能
設定中斷點
偵錯工具的主要功能之一,就是透過中斷點讓程式碼在特定的行上停止執行。
如要在 Android Studio 中設定中斷點,您必須前往特定一行程式碼,然後按一下行數旁的空白邊。如要取消設定中斷點,則必須按一下空白邊中的現有中斷點 (中斷點會隨即消失)。
- 如要自行嘗試,請在設有
imageResource
變數的位置設定中斷點。
使用「Resume Program」按鈕
在上一節中,您在設有 imageResource
變數的位置設定了中斷點。這個中斷點會導致執行作業在接到該指令時暫停。程式碼因偵錯工具而暫停執行時,您可能需要繼續處理執行作業,應用程式才能持續運作。最直接的方法就是使用「Resume Program」按鈕。
如要繼續執行程式,請按照下列步驟操作:
- 按一下「Debug 'app'」圖示 。應用程式啟動後,您應該會看到類似下圖的畫面:
繼續執行程式前,我們必須先說明應用程式因為偵錯工具而暫停執行時,畫面上顯示的部分內容:
- 「Debug」窗格中有多個按鈕現在都會變成可點選狀態。
- 「Frames」窗格會顯示許多資訊,包括針對設有中斷點的行醒目顯示參照資料。
- 「Variables」窗格會顯示多個項目,但是此應用程式包含的變數不多,因此目前並沒有太多與本程式碼研究室的涵蓋範圍相關的資訊。不過,檢查變數是偵錯工具的重要功能,因為這項功能可以產生深入分析資訊,讓您瞭解程式碼在執行階段發生的狀況。我們稍後會在這個程式碼研究室中詳細說明如何檢查變數。
如果您透過裝置或模擬器查看應用程式,會發現畫面呈現空白,這是因為應用程式在程式碼的某一行上暫停執行。更明確地說,執行作業已在中斷點停止,而使用者介面尚未顯示。
提醒您,光是設定中斷點,不一定會導致應用程式立即停止,把中斷點安排在程式碼哪個位置才是關鍵。在這個範例中,中斷點的位置是在應用程式啟動時所執行的那一行。
值得注意的是,只有在嘗試執行設有中斷點的行時,應用程式才會在中斷點暫停。另外,雖然有很多方法都可以讓偵錯工具繼續執行,但目前採取的方法是使用「Resume Program」按鈕。
- 按一下「Resume Program」圖示 。
現在畫面應如下圖所示:
現在您會發現大部分資訊都不見了,而且按鈕都再次變成無法點選的狀態。在裝置或模擬器中,應用程式也會正常顯示。之所以會這樣,是因為程式碼已不在中斷點暫停了,所以應用程式處於正常的執行狀態。此外,雖然您已附加偵錯工具,但該工具必須等到設有中斷點的程式碼執行後才能發揮作用。建議您保留這個中斷點,我們會在以下範例中看到這麼做的功用。
使用「Step Into」按鈕
如要在執行階段深入查看程式碼,使用偵錯工具的「Step Into」按鈕是很便利的方法。指令對方法或其他程式碼發出呼叫時,您可以透過「Step Into」按鈕輸入程式碼,這樣就不必先手動前往該介面,再啟動偵錯工具並設定中斷點。
如要使用「Step Into」按鈕,請按照下列步驟操作:
- 在呼叫
DiceRollerApp()
函式的MainActivity
類別中找出onCreate()
函式,然後在其中的setContent
lambda 主體建立中斷點。
- 按一下「 Debug ‘app'」,重新執行已附加偵錯工具的應用程式。執行作業會在呼叫
DiceRollerApp()
函式的那一行暫停。 - 按一下「Step Into」圖示 。
現在,系統會醒目顯示第 40 行,而「Debug」窗格的「Frames」窗格中會指出程式碼已在第 40 行暫停。
如果展開「Frames」窗格,就能看到醒目顯示那行的下一行以 invoke:
開頭,後面接著行數 (在上圖中是第 32 行),這就是所謂的「呼叫堆疊」。基本上,呼叫堆疊會顯示將程式碼執行作業導向當前行的呼叫鏈。在這個範例中,第 32 行包含呼叫 DiceRollerApp()
函式的指令。
偵錯工具在函式呼叫所設定的中斷點停止時,如果您點選「Step Into」按鈕,偵錯工具就會「進入」該函式,進而將執行作業導向宣告該函式的第 40 行。醒目顯示的那一行表示執行作業暫停的位置。如果之後的行有相關聯的行數,就代表執行路徑。在這個特定範例中,偵錯工具指出第 32 行上的指令會將您導向第 40 行。
- 按一下「Resume Program」圖示 。
系統應會將您導向您設定的原始中斷點。現在您對自己在第一個範例中停止執行作業時所看到的內容可能會有更進一步瞭解。下圖與「Resume program」部分中步驟 6 的圖片相同:
在呼叫堆疊中,您可以看到 DiceWithButtonAndImage()
函式已在第 50 行暫停,系統是從 DiceRollerApp()
函式 (在第 32 行呼叫) 的第 41 行呼叫該函式。呼叫堆疊功能可協助您瞭解執行路徑。從應用程式中多個不同位置呼叫函式時,這項功能就能派上用場。
透過「Step Into」按鈕,您可以輸入函式並暫停執行作業,而不必在函式本身中設定中斷點。在這個範例中,您必須在對 DiceRollerApp()
函式的呼叫上設定中斷點。點選「Step Into」按鈕時,執行作業就會在 DiceRollerApp()
函式中暫停。
Dice Roller 是相當小型的應用程式,因為其中沒有太多檔案、類別或功能。處理較大型的應用程式時,偵錯工具的「Step Into」功能會更加實用,因為您可以選擇深入查看程式碼,而不必自行瀏覽程式碼。
使用「Step Over」按鈕
您也可以使用「Step Over」按鈕,在執行階段逐步執行應用程式的程式碼。這個做法會將執行作業移至下一行程式碼,並推動偵錯工具執行。
如要使用「Step Over」按鈕,請按照下列步驟操作:
- 按一下「Step Over」圖示 。
現在,您會看到偵錯工具將程式碼暫停在下一個要執行的行 (第 51 行)。您可以繼續逐步執行每一行。
使用「Step Out」按鈕
「Step Out」按鈕的功能與「Step Into」按鈕相反。該按鈕不會向下分析呼叫堆疊,而是會向上導向呼叫堆疊。
如要使用「Step Out」按鈕,請按照下列步驟操作:
- 按一下「Step Out」圖示 。
您能猜出程式暫停在哪一行嗎?
- 請注意,偵錯工具已從
DiceRollerApp()
函式中跳出,並回到呼叫該函式的那一行。
在方法呼叫堆疊中,如果您發現自己所在的階層過深,「Step Out」按鈕是一項有用的工具,可讓您向上離開呼叫堆疊,而不必針對您進入的每個方法逐一執行所有程式碼。
檢查變數
先前我們已在這個程式碼研究室中簡短說明「Variables」窗格,詳細解釋了如何檢查窗格中顯示的變數,協助您對應用程式中的問題進行偵錯。
如要檢查變數,請按照下列步驟操作:
- 按一下中斷點將其從呼叫
DiceRollerApp()
函式的位置移除,但保留設定imageResource
變數的中斷點。 - 按一下「Debug 'app'」圖示 。您應該會看到
result$delegate
變數是值為 1 的MutableState
。這是因為變數經過定義後,會執行個體化為mutableStateOf
1。MutableState
代表結果變數的狀態可以變動。
- 按一下「Resume Program」圖示 。
- 在應用程式中按一下「Roll」。您的程式碼會再次在中斷點暫停,且
result$delegate
變數可能會顯示不同的值。
在此圖片中,result$delegate
變數的可變動狀態值為 2,表示在執行階段使用偵錯工具檢查變數的方式。在功能更完整的應用程式中,變數值可能會導致當機。使用偵錯工具檢查變數時,可以深入分析當機問題的詳細資料,以便修正錯誤。
6. 結論
恭喜!您已學會在 Android Studio 中使用偵錯工具。
摘要
- 將偵錯工具附加到應用程式。
- 啟動已附加偵錯工具的應用程式。
- 熟悉偵錯工具窗格。
- 設定中斷點
- 透過偵錯工具繼續執行程式。
- 使用「Step Into」按鈕。
- 使用「Step Over」按鈕。
- 使用「Step Out」按鈕。
- 使用偵錯工具檢查變數。