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 ứ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.
Tính năng gỡ lỗi phong phú hơn, dựa trên điểm ngắt 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 Trình gỡ lỗi từ OpenVSX. Để gỡ lỗi mã web giao diện người dùng dựa trên điểm ngắt (chẳng hạn 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 sẵn của trình duyệt, chẳng hạn như Công cụ của Chrome cho nhà phát triển.
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 ứ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 và làm mới nhanh, đồ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 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 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 sau khi bạn dùng thử:
Thêm bảng điều khiển web vào không gian làm việc Firebase Studio:
- Mở Cài đặt bằng cách nhấp vào hoặc nhấn
Ctrl + ,(trên Windows/Linux/ChromeOS) hoặcCmd + ,(trên MacOS). - Tìm chế độ cài đặt Firebase Studio: Công cụ phát triển web rồi bật chế độ cài đặt đó. Nếu đang chỉnh sửa trực tiếp tệp
settings.json, bạn có thể thêm"IDX.webDevTools": true. - Làm mới cửa sổ trình duyệt để tải lại không gian làm việc Firebase Studio.
- Mở Cài đặt bằng cách nhấp vào hoặc nhấn
Mở bản xem trước trên web trong Firebase Studio: Mở bảng điều khiển (
Cmd+Shift+Ptrên máy Mac hoặcCtrl+Shift+Ptrên ChromeOS, Windows hoặc Linux) rồi chọn Firebase Studio: Hiển thị bản xem trước trên web.Theo mặc định, bảng điều khiển của bảng điều khiển web được thu nhỏ trong bảng xem trước web. Nhấp vào thanh hoặc kéo thanh lên để mở rộng thanh.
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 Công cụ của Chrome cho nhà phát triển:
- Lỗi JavaScript và câu lệnh
console.logsẽ 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 Tìm 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 ngữ cảnh của bản xem trước 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ó các phát hiện và đề xuất. Bạn có thể chạy báo cáo Lighthouse ngay từ bản xem trước trên web trong Firebase Studio.
Mở bản xem trước trên web trong Firebase Studio: Mở bảng điều khiển (
Cmd+Shift+Ptrên máy Mac hoặcCtrl+Shift+Ptrên ChromeOS, Windows hoặc Linux) chọn Firebase Studio: Hiển thị bản xem trước trên web.Nhấp vào biểu tượng
Run Lighthouse (Chạy Lighthouse) trên thanh công cụ xem trước trên web.
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 trong số các báo cáo kiểm tra hiệu suất, khả năng hỗ trợ tiếp cận, 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.Quá trình tạo báo cáo có thể mất vài phút.
Sau khi các báo cáo xuất hiện trong bảng điều khiển Lighthouse, bạn có thể xem xét các phát hiện 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 sẵn 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 tích hợp 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 trong Firebase để 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, trình gỡ lỗi sẽ cố gắng sửa lỗi đó. Nếu nhận thấy thông báo lỗi không thể giải quyết được 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 đang 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 ngữ 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ộ ngữ 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ệ con trỏ rỗng trong hàm này?" hoặc "Làm cách nào để ngăn chặn điều kiện tương tranh này?"
Phân tích 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 về các vấn đề.
Sử dụng hàng bảo vệ mã: Khi chia sẻ đoạn mã, hãy sử dụng hàng bảo vệ mã để đảm bảo mã được định dạng đúng cách. Điều này giúp Gemini dễ đọc và hiểu mã của bạn hơn.
Lặp lại và tinh chỉnh: Gemini không phải lúc nào cũng cung cấp giải pháp hoàn hảo ngay từ lần thử đầ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ị 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 câu lệnh hoặc cung cấp thêm ngữ cảnh. Đôi khi, chỉ cần diễn đạt lại câu hỏi là bạn có thể giúp Gemini hiểu được câu hỏi của bạn.
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 Gemini trong cuộc trò chuyện Firebase 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 ngữ cảnh của Gemini. Điều này có thể giúp loại bỏ mọi hiểu 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 chứng: Nếu Gemini đưa ra giả định không chính xác, hãy cung cấp ví dụ phản chứng để giúp lớp này hiểu hành vi chính xác.