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

Firebase Studio cung cấp một số cách để gỡ lỗi ứng dụng ngay trong không gian làm việc. Đối với các ứ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. Các ứng dụng Flutter cung cấp bản xem trước trên web và Android để kiểm tra nhanh và kiểm thử ứng dụng trong khi bạn viết mã.

Tính năng gỡ lỗi dựa trên điểm dừng phong phú hơn cũng có sẵ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 các tiện ích của Trình gỡ lỗi từ OpenVSX. Đối với tính năng gỡ lỗi dựa trên điểm ngắt của 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ụ dành cho nhà phát triển tích hợp của 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 bao gồm bản xem trước ứng dụng trong không gian làm việc cho các ứng dụng web (Chrome) và ứng dụng Flutter (Android, Chrome). Bản xem trước trên Android và Chrome hỗ trợ tính năng tải lại nóng và làm mới nóng, đồng thời cung cấp đầy đủ các tính 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 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 trên 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 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 của bạn:Firebase Studio

   1. Mở Settings bằng cách nhấp vào settings hoặc nhấn Ctrl + , (trên Windows/Linux/ChromeOS) hoặc Cmd + , (trên MacOS).
   2. Tìm chế độ cài đặt Firebase Studio: Web Dev Tools rồi bật chế độ cài đặt 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 trên web trong Firebase Studio: Mở bảng lệnh (Cmd+Shift+P trên Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux) rồi chọn Firebase Studio: Show Web Preview.

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

Bảng điều khiển web trong bản xem trước trên 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ể chọn nhận sự trợ giúp từ Gemini bằng cách chọn nút Understand this error (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 trên web bằng cách sử dụng thanh lời nhắc ở dưới cùng.

Chạy Lighthouse để 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 và trả về một báo cáo có kết quả và đề xuất. Bạn có thể chạy báo cáo Lighthouse trực tiếp từ bản xem trước trên web trong Firebase Studio.

1. Mở bản xem trước trên web trong Firebase Studio: Mở bảng lệnh (Cmd+Shift+P trên Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux) rồi chọn Firebase Studio: Hiển thị bản xem trước trên web.

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

3. Trong bảng điều khiển Lighthouse, hãy chọn các danh mục kiểm tra mà bạn muốn. Bạn có thể chọn từ các báo cáo kiểm tra hiệu suất, khả năng tiếp cận, sự 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 Analyze page (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 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 bao gồm Bảng điều khiển gỡ lỗi tích hợp từ 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 tính năng gỡ lỗi tại Cấu hình gỡ lỗi Visual Studio Code.

Gỡ lỗi bằng Gemini

Bạn có thể sử dụng Gemini để giúp 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ó thể tạo ra lỗi. Khi phát hiện lỗi, Gemini sẽ cố gắng khắc phục lỗi đó. Nếu thấy Gemini không thể giải quyết vấn đề dựa trên thông báo lỗi, bạn có thể thử một số kỹ thuật sau:

• Describe the issue (Mô tả vấn đề): Trong giao diện trò chuyện, hãy mô tả vấn đề mà bạn gặp phải một cách rõ ràng và ngắn gọn 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.

• Ask specific questions: (Đặt câu hỏi cụ thể): Đừng ngại hỏi Gemini những câu hỏi trực tiếp về mã của bạn. Ví dụ: "What could be causing a null pointer exception in this function?" (Điều gì có thể gây ra ngoại lệ về con trỏ rỗng trong hàm này?) hoặc "How can I prevent this race condition?" (Làm cách nào để ngăn chặn tình huống tương tranh này?)

• Break down complex problems (Chia nhỏ các vấn đề phức tạp): Nếu đang gặp phải 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. 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 về vấn đề.

• Use code fences (Sử dụng hàng rào mã): Khi chia sẻ đoạn mã, hãy sử dụng hàng rào mã để đảm bảo mã được định dạng đúng cách. Điều 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: Gemini có thể không phải lúc nào cũng đưa ra giải pháp hoàn hảo ngay 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.

• Avoid prompting loops: Nếu Gemini bị mắc kẹt trong một vòng lặp hoặc không thể trả lời câu hỏi của bạn, hãy thử diễn đạt lại lời nhắc 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 cũng có thể giúp Gemini hiểu những gì bạn đang hỏi.

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

  • Start a new chat: Nếu đang sử dụng tính năng trò chuyện của 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. Điều này có thể giúp bạn thoát khỏi 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 đó.

  • Cung cấp ví dụ phản bác: Nếu Gemini đang đưa ra các giả định không chính xác, hãy cung cấp ví dụ phản bác để giúp Gemini hiểu hành vi chính xác.