Sử dụng trình gỡ lỗi trong Android Studio

1. Trước khi bắt đầu

Lớp học lập trình này hướng dẫn bạn cách sử dụng trình gỡ lỗi trong Android Studio để kiểm tra điều gì xảy ra với ứng dụng Đổ xúc xắc trong thời gian chạy.

Trình gỡ lỗi là một công cụ thiết yếu cho phép kiểm tra việc thực thi đoạn mã hỗ trợ ứng dụng Android để bạn có thể sửa mọi lỗi trong đó. Trình gỡ lỗi cho phép bạn chỉ định các điểm tạm ngưng thực thi mã và tương tác theo cách thủ công với các biến, phương thức cũng như các khía cạnh khác của mã.

Điều kiện tiên quyết

Kiến thức bạn sẽ học được

  • Cách đính kèm trình gỡ lỗi vào một ứng dụng Android.
  • Cách chạy ứng dụng có đính kèm trình gỡ lỗi.
  • Cách sử dụng một số tính năng cơ bản của trình gỡ lỗi.
  • Mục đích sử dụng của trình gỡ lỗi.

Bạn cần có

  • Máy tính đã cài đặt Android Studio
  • Đoạn mã giải pháp cho ứng dụng Đổ xúc xắc trong Compose

2. Xem video tập lập trình (Không bắt buộc)

Nếu bạn muốn xem một trong những người hướng dẫn của khoá học hoàn thành lớp học lập trình, hãy phát video bên dưới.

Bạn nên mở rộng video ra toàn màn hình (bằng biểu tượng Biểu tượng này hiển thị 4 góc trên một hình vuông được làm nổi bật, để biểu thị chế độ toàn màn hình. ở góc dưới bên phải của video). Nhờ đó, bạn có thể thấy rõ các đoạn mã và Android Studio hơn.

Bước này là bước không bắt buộc. Bạn cũng có thể bỏ qua video này và bắt đầu tham gia lớp học lập trình ngay.

3. Lấy mã khởi đầu

Để bắt đầu, hãy tải mã xuống:

Ngoài ra, bạn còn có thể sao chép kho lưu trữ GitHub cho mã:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
$ cd basic-android-kotlin-compose-training-dice-roller

Bạn có thể duyệt xem mã này trong Kho lưu trữ GitHub.

4. Chạy trình gỡ lỗi

Có 2 cách để chạy trình gỡ lỗi cùng ứng dụng:

  • Đính kèm trình gỡ lỗi vào một quy trình của ứng dụng hiện có chạy trên thiết bị hoặc trình mô phỏng.
  • Chạy ứng dụng bằng trình gỡ lỗi.

Về cơ bản, cả hai cách đều thực hiện cùng một việc. Khi đã quen với cả hai cách trên, bạn có thể chọn một phương thức mình muốn hoặc cần.

Đính kèm trình gỡ lỗi vào một quy trình của ứng dụng

Nếu ứng dụng đang chạy, bạn có thể đính kèm trình gỡ lỗi vào ứng dụng đó.

Để đính kèm trình gỡ lỗi vào một quy trình của ứng dụng, hãy làm theo các bước sau:

  1. Nhấp vào biểu tượng 608818eddd06d35d.png Attach Debugger to Android Process (Đính kèm trình gỡ lỗi vào quy trình Android).

9bd4c917bad56baa.png

Hộp thoại Choose Process (Chọn quy trình) sẽ mở ra. Tại đây, bạn có thể chọn quy trình mà mình muốn đính kèm với trình gỡ lỗi.

  1. Chọn com.example.diceroller rồi nhấp vào OK.

a4c65b5bc972bd46.png

Ngăn Debug (Gỡ lỗi) xuất hiện ở cuối Android Studio với thông báo cho biết trình gỡ lỗi được đính kèm vào thiết bị mục tiêu hoặc trình mô phỏng.

adad34e172cbc49a.png

Bạn đã đính kèm trình gỡ lỗi vào ứng dụng của mình! Đừng lo lắng về tác động của việc đó hay bạn có thể làm gì với trình gỡ lỗi vì lớp học lập trình này sẽ giải thích tất cả những điều đó trong phần sau. Tiếp theo, bạn sẽ tìm hiểu cách chạy một ứng dụng có đính kèm trình gỡ lỗi.

Chạy ứng dụng bằng trình gỡ lỗi

Nếu muốn sử dụng trình gỡ lỗi ngay từ đầu, bạn có thể tiết kiệm thời gian bằng cách chạy ứng dụng bằng trình gỡ lỗi. Hơn nữa, nếu bạn muốn gỡ lỗi một đoạn mã chỉ chạy vào lúc ứng dụng khởi chạy, bạn cần chạy ứng dụng khi đã đính kèm trình gỡ lỗi.

Để chạy ứng dụng bằng trình gỡ lỗi, hãy làm theo các bước sau:

  1. Trong ngăn Debug (Gỡ lỗi), hãy nhấp vào ca283f38f21b0cb7.png Stop (Dừng), rồi đóng ứng dụng trên thiết bị hoặc trình mô phỏng.

3c82e7f80c6c174d.png

  1. Nhấp vào 67f9548b52d797b7.png Debug ‘app' (Gỡ lỗi "app").

cbf915fde4e6b443.png

Ngăn Debug (Gỡ lỗi) này cũng xuất hiện ở cuối Android Studio với một số dữ liệu đầu ra từ bảng điều khiển.

f69e0370c2b5ad0e.png

Giờ bạn đã biết cách khởi chạy trình gỡ lỗi! Tiếp theo, bạn sẽ tìm hiểu cách sử dụng chúng.

5. Sử dụng trình gỡ lỗi

Ngăn gỡ lỗi

Bạn có thể thấy có khá nhiều nút ở đầu ngăn Debug, nhưng các nút này hiện không có nhiều tác dụng và hầu hết đều có màu xám và không thể nhấp vào. Phần này đề cập đến các tính năng thường dùng trong trình gỡ lỗi. Lớp học lập trình này giải thích về các nút khác khi cần sử dụng chúng.

Khi trình gỡ lỗi khởi chạy lần đầu, bạn sẽ thấy một số nút trong ngăn Debug. Ở đầu ngăn Debug, bạn sẽ thấy các nút Debugger (Trình gỡ lỗi) và Console (Bảng điều khiển).

5f35f4c555240598.png

Nút Console (Bảng điều khiển) cho thấy đầu ra logcat của ứng dụng. Nếu đoạn mã của bạn có một câu lệnh nhật ký nào đó, thì kết quả sẽ hiển thị khi câu lệnh đó thực thi.

Nút Debugger (Trình gỡ lỗi) cho thấy 3 ngăn riêng biệt, hiện các ngăn này đang trống vì bạn không sử dụng trình gỡ lỗi:

  1. Hiển thị khung
  2. Mục nhập biểu thức xem và đánh giá
  3. Ngăn biến

3752c14cdd27b8c4.png

Sử dụng các tính năng phổ biến của trình gỡ lỗi

Đặt điểm ngắt

Một trong những tính năng chính của trình gỡ lỗi là cho phép bạn dừng thực thi trên dòng mã cụ thể bằng một điểm ngắt.

Để thiết lập điểm ngắt trong Android Studio, bạn cần chuyển đến một dòng mã cụ thể, sau đó nhấp vào rãnh bên cạnh số dòng. Nếu cần gỡ bỏ một điểm ngắt, hãy nhấp vào điểm ngắt đó để xoá nó đi.

  • Để thử, hãy đặt một điểm ngắt nơi biến imageResource được đặt.

Thêm và xoá điểm ngắt

Sử dụng nút Resume Program (Tiếp tục chương trình)

Trong phần cuối, bạn đã đặt một điểm ngắt nơi biến imageResource được đặt. Điểm ngắt này khiến quá trình thực thi bị tạm ngưng theo hướng dẫn. Khi trình gỡ lỗi tạm ngưng quá trình thực thi mã, bạn sẽ có thể cần phải thao tác để tiếp tục chạy ứng dụng. Cách nhanh nhất để thực hiện việc này là sử dụng nút Resume Program (Tiếp tục chương trình).

Để tiếp tục chạy chương trình, vui lòng làm theo các bước sau:

  1. Nhấp vào 67f9548b52d797b7.png Debug ‘app' (Gỡ lỗi "app"). Sau khi ứng dụng khởi chạy, bạn sẽ thấy một số hình ảnh như sau:

c8a1660c4209458c.png

Trước khi bạn tiếp tục chương trình, chúng tôi cần giải thích một số nội dung xuất hiện trên màn hình khi trình gỡ lỗi tạm ngưng thực thi:

  • Nhiều nút trong ngăn Debug giờ đã có thể nhấp vào được.
  • Ngăn Frames (Khung) hiển thị nhiều thông tin, trong đó có tham chiếu được đánh dấu đến dòng đã đặt điểm ngắt.
  • Ngăn Variables (Biến) hiển thị một số mục, nhưng ứng dụng này không có nhiều biến nên hiện không có nhiều thông tin liên quan đến phạm vi của lớp học lập trình này. Tuy nhiên, khả năng kiểm tra biến là một tính năng thiết yếu của trình gỡ lỗi do tính năng này cung cấp thông tin chi tiết về những gì xảy ra với đoạn mã trong thời gian chạy. Lớp học lập trình này sẽ đi sâu hơn về cách kiểm tra biến trong những phần sau.

Nếu xem ứng dụng trên thiết bị hoặc trình mô phỏng, bạn có thể thấy màn hình trống vì ứng dụng bị tạm ngưng tại một dòng mã. Cụ thể hơn, quá trình thực thi đã dừng tại điểm ngắt và giao diện người dùng chưa kết xuất được.

Lưu ý rằng không phải lúc nào ứng dụng dừng lại ngay chỉ vì bạn đã đặt một điểm ngắt. Điều này còn tuỳ thuộc vào vị trí của điểm ngắt trong đoạn mã. Trong trường hợp này, bạn đã đặt điểm ngắt trên một dòng lệnh được thực thi khi ứng dụng khởi chạy.

Điều quan trọng cần nhớ là ứng dụng chỉ tạm ngưng tại điểm ngắt khi cố thực thi dòng đã đặt điểm ngắt đó. Có nhiều cách để tiếp tục chạy trình gỡ lỗi, nhưng hiện tại bạn nên dùng nút Resume Program (Tiếp tục chương trình).

  1. Nhấp vào 937f070d95764107.png Resume Program (Tiếp tục chương trình).

7d664cd5dd8a2d9b.png

Giờ đây, bạn sẽ thấy hình ảnh tương tự như sau:

388c58b0f31f797e.png

Phần lớn thông tin sẽ biến mất và các nút lại không nhấp vào được nữa. Ứng dụng cũng xuất hiện như bình thường trên thiết bị hoặc trình mô phỏng của bạn. Lý do là vì mã không còn bị tạm ngưng tại điểm ngắt và ứng dụng đang ở trạng thái chạy bình thường. Trình gỡ lỗi được đính kèm nhưng không tác động nhiều cho đến khi nó cố gắng thực thi một dòng mã có tập hợp điểm ngắt. Giữ nguyên vị trí điểm ngắt này vì nó hữu ích trong các ví dụ sau.

Sử dụng nút Bước vào

Dùng nút Bước vào của trình gỡ lỗi để tiện cho việc tìm hiểu sâu hơn về mã trong thời gian chạy. Nếu có hướng dẫn thực hiện lệnh gọi đến một phương thức hoặc một đoạn mã khác, nút Step Into (Bước vào) cho phép bạn nhập mã mà không cần phải di chuyển đến đó theo cách thủ công trước khi khởi chạy trình gỡ lỗi để đặt điểm ngắt.

Để sử dụng nút Bước vào, vui lòng làm theo các bước sau:

  1. Tạo một điểm ngắt ở nội dung hàm lambda setContent trong hàm onCreate() của lớp MainActivity, trong đó hàm DiceRollerApp() được gọi.

aa4337eabccc85d.png

  1. Nhấp vào 67f9548b52d797b7.png Gỡ lỗi "app" để chạy lại ứng dụng bằng trình gỡ lỗi. Quá trình thực thi sẽ tạm ngưng trên dòng mà hàm DiceRollerApp() được gọi.
  2. Nhấp vào 1e7236e85d113e8f.png Step Into (Bước vào).

73a80d2b10caea5f.png

Hiện tại, dòng 40 được làm nổi bật và ngăn Frames (Khung) trong ngăn Debug (Gỡ lỗi) cho biết đoạn mã bị tạm ngưng trên dòng 40.

ece32a03703a0531.png

Nếu mở rộng ngăn Frames (Khung), bạn sẽ thấy dòng sau dòng được đánh dấu bắt đầu bằng invoke:, theo sau là số dòng, là số 32 như trong hình trước. Đây được gọi là ngăn xếp lệnh gọi (call stack). Về cơ bản, nó cho thấy chuỗi lệnh gọi dẫn đến việc thực thi mã cho dòng hiện tại. Trong trường hợp này, dòng 32 giữ một lệnh gọi hàm DiceRollerApp().

Khi bạn nhấp vào nút Step Into (Bước vào) tại thời điểm trình gỡ lỗi dừng ở điểm ngắt được đặt trên lệnh gọi hàm đó, trình gỡ lỗi đã bước vào hàm đó, dẫn đến việc thực thi dòng 40 nơi khai báo hàm. Dòng được đánh dấu cho biết vị trí tạm ngưng thực thi. Nếu các dòng sau dòng được đánh dấu có số dòng được liên kết với chúng thì đó là một chỉ báo của đường dẫn thực thi. Trong trường hợp cụ thể này, trình gỡ lỗi cho biết lệnh trên dòng 32 đã đưa bạn đến dòng 40.

  1. Nhấp vào 937f070d95764107.png Resume Program (Tiếp tục chương trình).

Thao tác này sẽ đưa bạn đến điểm ngắt đã đặt ban đầu. Bạn có thể đã hiểu thêm một chút về những gì bạn thấy khi ngừng thực thi trong ví dụ đầu tiên. Đây cũng là hình ảnh từ bước thứ 6 của phần Resume program (Tiếp tục chương trình):

76a1bef8e6cdf656.png

Trong ngăn xếp lệnh gọi, bạn có thể thấy hàm DiceWithButtonAndImage() bị tạm ngưng trên dòng 50 và hàm được gọi từ dòng 41 trong hàm DiceRollerApp() được gọi trên dòng 32. Tính năng ngăn xếp lệnh gọi có thể giúp bạn nắm được đường dẫn thực thi. Điều này rất hữu ích khi một hàm được gọi từ nhiều vị trí trong ứng dụng.

Nút Bước vào quy định cách để nhập hàm và tạm ngưng thực thi mà không đặt điểm ngắt trong chính hàm đó. Trong trường hợp này, bạn cần đặt một điểm ngắt trên lệnh gọi đến hàm DiceRollerApp(). Khi bạn nhấp vào nút Bước vào, quá trình thực thi sẽ tạm ngưng trong hàm DiceRollerApp().

Dice Roller là một ứng dụng khá nhỏ vì không có nhiều tệp, lớp hoặc chức năng. Khi bạn làm việc với các ứng dụng lớn hơn, tính năng Step Into (Bước vào) của trình gỡ lỗi sẽ hữu ích hơn vì nó cho phép bạn tự xem chi tiết mà không cần điều hướng mã.

Sử dụng nút Bước qua

Nút Bước qua chỉ ra cách khác để bạn có thể thực hiện duyệt qua mã ứng dụng của mình trong thời gian chạy. Nó di chuyển quá trình thực thi sang dòng mã tiếp theo và chuyển tiếp trình gỡ lỗi.

Để sử dụng nút Step Over (Bước qua), hãy làm theo các bước sau:

  • Nhấp vào 21e306488908a0f3.png Step Over (Bước qua).

25b1ea30948cfc31.png

Giờ đây, bạn có thể thấy trình gỡ lỗi đã tạm ngưng mã thực thi trên dòng tiếp theo, đó là dòng 51. Bạn có thể tiếp tục thao tác liên tiếp bước qua từng dòng.

17e5998c76809c62.png

Sử dụng nút Step Out (Rời khỏi)

Nút Step Out (Rời khỏi) có tính năng ngược lại với nút Step Into (Bước vào). Thay vì xem chi tiết ngăn xếp lệnh gọi, nút Step Out (Rời khỏi) sẽ chuyển lên ngăn xếp lệnh gọi.

Để sử dụng nút Step Out (Rời khỏi), hãy thực hiện theo các bước sau:

  1. Nhấp vào fbe8baec2ab73e94.png Step Out (Rời khỏi).

Bạn có đoán được chương trình này sẽ bị tạm ngưng ở dòng nào không?

9e7ce3969c28f091.png

  1. Lưu ý rằng trình gỡ lỗi đã thoát khỏi hàm DiceRollerApp() và quay lại dòng đã gọi hàm đó.

fd19d30216463877.png

Nút Step Out (Rời khỏi) là công cụ hữu ích khi bạn thấy mình đi quá sâu trong một ngăn xếp lệnh gọi phương thức. Tính năng này cho phép bạn xử lý ngăn xếp lệnh gọi mà không cần duyệt toàn bộ mã cho từng phương thức mà bạn đã bước vào.

Kiểm tra các biến

Lớp học lập trình trước đó đã có đoạn mô tả ngắn gọn về ngăn Biến, nội dung giải thích chi tiết hơn về cách kiểm tra các biến hiển thị trong ngăn để giúp bạn khắc phục các sự cố gỡ lỗi trong ứng dụng của mình.

Để kiểm tra các biến, hãy làm theo các bước sau:

  1. Nhấp vào điểm ngắt để xoá điểm đó khỏi vị trí gọi hàm DiceRollerApp(), nhưng để lại điểm ngắt đã thiết lập biến imageResource.
  2. Nhấp vào 67f9548b52d797b7.png Debug 'app' (Gỡ lỗi "app"). Bạn sẽ thấy biến result$delegateMutableState có giá trị là 1. Nguyên nhân là khi biến được xác định, hệ thống sẽ tạo bản sao bằng mutableStateOf 1. MutableState có nghĩa là biến kết quả chứa trạng thái có thể thay đổi.

ac37c7436b5235c0.png

  1. Nhấp vào 937f070d95764107.png Resume Program (Tiếp tục chương trình).
  2. Trong ứng dụng, hãy nhấp vào Roll (đổ xúc xắc). Đoạn mã của bạn sẽ lại tạm ngưng tại điểm ngắt và bạn có thể thấy một giá trị khác cho biến result$delegate.

Trong hình này, trạng thái có thể thay đổi của biến result$delegate chứa một giá trị 2. Trạng thái này cho thấy cách bạn có thể kiểm tra các biến trong thời gian chạy bằng trình gỡ lỗi. Trong một ứng dụng có đầy đủ tính năng hơn, giá trị của biến có thể gây ra sự cố. Khi sử dụng trình gỡ lỗi để kiểm tra biến, bạn có thể hiểu rõ hơn về chi tiết sự cố để có thể sửa lỗi.

a869ec4ba3b66fbf.png

6. Kết luận

Xin chúc mừng! Bạn đã sử dụng trình gỡ lỗi trong Android Studio.

Tóm tắt

  • Đính kèm trình gỡ lỗi vào một ứng dụng.
  • Khởi chạy một ứng dụng có trình gỡ lỗi đã đính kèm.
  • Làm quen với ngăn trình gỡ lỗi.
  • Đặt một điểm ngắt.
  • Tiếp tục chương trình với trình gỡ lỗi.
  • Sử dụng nút Bước vào.
  • Sử dụng nút Bước qua.
  • Sử dụng nút Rời khỏi.
  • Kiểm tra các biến bằng trình gỡ lỗi.