Gỡ lỗi ứng dụng trong Firebase Studio

Firebase Studio cung cấp một vài cách để gỡ lỗi ứng dụng, ngay trong không gian làm việc của bạn. Đối với ứng dụng web và Flutter, bảng điều khiển web và Lighthouse được tích hợp trực tiếp vào không gian làm việc. Ứng dụng Flutter cung cấp bản xem trước trên Android và web để kiểm tra nhanh và kiểm thử ứng dụng trong khi bạn lập trình.

Bạn cũng có thể gỡ lỗi dựa trên điểm ngắt phong phú hơn cho hầu hết các ngôn ngữ phổ biến thông qua Bảng điều khiển gỡ lỗi tích hợp và có thể mở rộng bằng tiện ích Trình gỡ lỗi từ OpenVSX. Để gỡ lỗi dựa trên điểm ngắt cho mã web giao diện người dùng (như JavaScript), bạn có thể tiếp tục sử dụng các công cụ cho nhà phát triển được tích hợp sẵn trong trình duyệt, chẳng hạn như Công cụ cho nhà phát triển của Chrome.

Xem trước ứng dụng

Firebase Studio có tính năng bản xem trước ứng dụng trong không gian làm việc cho ứng dụng web (Chrome) và ứng dụng Flutter (Android, Chrome). Bản xem trước Android và Chrome hỗ trợ tính năng tải lại nhanh và làm mới nhanh, đồng thời cung cấp đầy đủ các chức năng của trình mô phỏng.

Để tìm hiểu thêm về bản xem trước Firebase Studio, hãy xem phần Xem trước ứng dụng.

Sử dụng bảng điều khiển web tích hợp để xem trước trên web

Bảng điều khiển web tích hợp giúp bạn chẩn đoán các vấn đề trong ứng dụng ngay từ bản xem trước trên web. Bạn có thể truy cập vào bảng điều khiển web trong bảng điều khiển xem trước web Firebase Studio bằng cách mở rộng thanh ở dưới cùng.

Xin lưu ý rằng tính năng này đang trong giai đoạn thử nghiệm và không được bật theo mặc định. Để bật tính năng này, hãy làm theo các bước sau và chia sẻ ý kiến phản hồi của bạn sau khi bạn dùng thử:

1. Thêm bảng điều khiển web vào không gian làm việc Firebase Studio:

   1. Mở phần Settings (Cài đặt) bằng cách nhấp vào biểu tượng hoặc nhấn tổ hợp phím Ctrl + , (trên Windows/Linux/ChromeOS) hoặc Cmd + , (trên MacOS).
   2. Tìm chế độ cài đặt Firebase Studio: Công cụ phát triển web rồi bật chế độ này. Nếu đang chỉnh sửa trực tiếp tệp settings.json, bạn có thể thêm "IDX.webDevTools": true.
   3. Làm mới cửa sổ trình duyệt để tải lại Firebase Studio không gian làm việc.

2. Mở bản xem trước web trong Firebase Studio: Mở bảng lệnh (Cmd+Shift+P trên máy Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux) rồi chọn Firebase Studio: Show Web Preview (Hiện bản xem trước web).

3. Theo mặc định, bảng điều khiển web được thu nhỏ trong bảng xem trước web. Nhấp vào thanh này hoặc kéo lên để mở rộng.

Bảng điều khiển web trong bản xem trước web Firebase Studio hoạt động tương tự như các bảng điều khiển khác, chẳng hạn như bảng điều khiển có trong Chrome DevTools:

• Lỗi JavaScript và câu lệnh console.log sẽ xuất hiện ở đó khi bạn sử dụng ứng dụng.
  • Đối với lỗi và cảnh báo, bạn cũng có thể yêu cầu Gemini hỗ trợ bằng cách chọn nút Hiểu lỗi này ở bên phải thông báo lỗi.
• Bạn có thể đánh giá JavaScript tuỳ ý trong bối cảnh bản xem trước web bằng cách sử dụng thanh câu lệnh ở dưới cùng.

Chạy Lighthouse cho bản xem trước trên web

Lighthouse kiểm tra ứng dụng của bạn dựa trên các danh mục kiểm tra cụ thể mà bạn chọn, đồng thời trả về một báo cáo kèm theo kết quả và đề xuất. Bạn có thể chạy báo cáo Lighthouse ngay trong bản xem trước trên web trong Firebase Studio.

1. Mở bản xem trước web trong Firebase Studio: Mở bảng lệnh (Cmd+Shift+P trên máy Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux), chọn Firebase Studio: Show Web Preview (Hiện bản xem trước web).

2. Nhấp vào biểu tượng Run Lighthouse (Chạy Lighthouse) trên thanh công cụ xem trước web.

3. Trong bảng điều khiển Lighthouse, hãy chọn danh mục kiểm tra mà bạn muốn. Bạn có thể chọn trong số các báo cáo kiểm tra hiệu suất, khả năng hỗ trợ tiếp cận, mức độ tuân thủ các phương pháp hay nhất, SEO và hiệu suất của Ứng dụng web tiến bộ. Nhấp vào Phân tích trang để tạo báo cáo.

   Có thể mất vài phút để tạo báo cáo.

4. Sau khi báo cáo xuất hiện trong bảng điều khiển Lighthouse, bạn có thể xem xét kết quả cho từng danh mục kiểm tra hoặc chuyển đổi giữa các danh mục kiểm tra bằng cách nhấp vào điểm số và tên danh mục.

Sử dụng Bảng điều khiển gỡ lỗi

Firebase Studio có tích hợp sẵn Bảng điều khiển gỡ lỗi của Code OSS. Sử dụng bảng điều khiển này để gỡ lỗi ứng dụng bằng trình gỡ lỗi có sẵn cho hầu hết các ngôn ngữ lập trình phổ biến hoặc thêm tiện ích gỡ lỗi từ OpenVSX.

Để tuỳ chỉnh trải nghiệm gỡ lỗi, bạn cũng có thể thêm tệp .vscode/launch.json vào không gian làm việc và chỉ định cấu hình khởi chạy tuỳ chỉnh. Tìm hiểu thêm về cách sử dụng tệp cấu hình khởi chạy để tuỳ chỉnh việc gỡ lỗi tại phần Cấu hình gỡ lỗi Visual Studio Code.

Gỡ lỗi bằng Gemini

Bạn có thể sử dụng Gemini để gỡ lỗi mã bằng tính năng trò chuyện trong không gian làm việc Code hoặc App Prototyping agent.

Mặc dù Gemini có thể viết mã cho bạn, nhưng đôi khi công cụ này cũng có thể gây ra lỗi. Khi phát hiện lỗi, công cụ này sẽ cố gắng khắc phục lỗi. Nếu thấy thông báo lỗi không thể giải quyết vấn đề, bạn có thể thử một số kỹ thuật sau:

• Mô tả vấn đề: Trong giao diện trò chuyện, hãy mô tả vấn đề bạn gặp phải một cách rõ ràng và súc tích nhất có thể. Mặc dù Gemini có thể có quyền truy cập vào bối cảnh như thông báo lỗi và nhật ký, nhưng có thể không hiểu được toàn bộ bối cảnh. Việc mô tả hành vi cùng với thông báo lỗi có thể giúp Gemini khắc phục lỗi nhanh hơn.

• Đặt câu hỏi cụ thể: Đừng ngại đặt Gemini câu hỏi trực tiếp về mã của bạn. Ví dụ: "Điều gì có thể gây ra ngoại lệ về con trỏ rỗng trong hàm này?" hoặc "Làm cách nào để ngăn chặn tình huống tương tranh này?"

• Chia nhỏ các vấn đề phức tạp: Nếu bạn đang xử lý một vấn đề phức tạp, hãy chia nhỏ vấn đề đó thành các phần nhỏ hơn, dễ quản lý hơn. Hãy yêu cầu Gemini giúp bạn gỡ lỗi từng phần riêng biệt và suy nghĩ từng bước để giải quyết vấn đề.

• Sử dụng khối mã: Khi chia sẻ đoạn mã, hãy sử dụng khối mã để đảm bảo mã được định dạng đúng cách. Việc này giúp Gemini dễ dàng đọc và hiểu mã của bạn hơn.

• Lặp lại và tinh chỉnh: Không phải lúc nào Gemini cũng đưa ra giải pháp hoàn hảo ngay từ lần đầu tiên. Xem xét các câu trả lời, đặt câu hỏi để làm rõ và cung cấp thêm thông tin nếu cần.

• Tránh lặp lại câu lệnh: Nếu Gemini bị lặp lại hoặc không thể trả lời câu hỏi của bạn, hãy thử diễn đạt lại câu lệnh hoặc cung cấp thêm bối cảnh. Đôi khi, chỉ cần diễn đạt lại câu hỏi là Gemini có thể hiểu được điều bạn đang hỏi.

  Nếu việc diễn đạt lại câu lệnh không giải quyết được vòng lặp, hãy thử các kỹ thuật sau:

  • Bắt đầu cuộc trò chuyện mới: Nếu bạn đang sử dụng cuộc trò chuyện Gemini trong không gian làm việc Code, hãy bắt đầu một phiên trò chuyện mới để đặt lại bối cảnh của Gemini. Việc này có thể giúp loại bỏ mọi quan niệm sai lầm hoặc giả định mà Gemini có thể đã đưa ra trong cuộc trò chuyện trước đó.

  • Đưa ra ví dụ phản chứng: Nếu Gemini đưa ra giả định không chính xác, hãy đưa ra ví dụ phản chứng để giúp mô hình hiểu được hành vi chính xác.