แก้ไขข้อบกพร่องของแอปใน Firebase Studio

Firebase Studio มีวิธีต่างๆ ในการแก้ไขข้อบกพร่องของแอปจากพื้นที่ทํางานโดยตรง สําหรับเว็บแอปและแอป Flutter ระบบจะผสานรวมเว็บคอนโซลและ Lighthouse เข้ากับพื้นที่ทํางานโดยตรง แอป Flutter มีตัวอย่างสำหรับ Android และเว็บเพื่อให้คุณตรวจสอบและทดสอบแอปขณะเขียนโค้ด

การแก้ไขข้อบกพร่องที่อิงตามจุดพักยังพร้อมใช้งานสำหรับภาษาที่ใช้กันมากที่สุดผ่านคอนโซลการแก้ไขข้อบกพร่องในตัว และขยายได้ด้วยส่วนขยายโปรแกรมแก้ไขข้อบกพร่องจาก OpenVSX สําหรับการแก้ไขข้อบกพร่องโค้ดเว็บส่วนหน้า (เช่น JavaScript) ตามจุดหยุดพัก คุณจะยังใช้เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ในตัวของเบราว์เซอร์ได้ เช่น เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

แสดงตัวอย่างแอป

Firebase Studio รวมตัวอย่างแอปใน Workspace สำหรับเว็บแอป (Chrome) และแอป Flutter (Android, Chrome) ตัวอย่าง Android และ Chrome รองรับการโหลดซ้ำขณะทำงานและการรีเฟรชขณะทำงาน รวมถึงมีความสามารถของโปรแกรมจำลองอย่างเต็มรูปแบบ

ดูข้อมูลเพิ่มเติมเกี่ยวกับFirebase Studioเวอร์ชันตัวอย่างได้ที่หัวข้อแสดงตัวอย่างแอป

ใช้เว็บคอนโซลที่ผสานรวมไว้สําหรับการแสดงตัวอย่างเว็บ

แถบคอนโซลที่ย่ออยู่ในการทดลองใช้เว็บ Firebase Studio

เว็บคอนโซลที่ผสานรวมช่วยให้คุณวินิจฉัยปัญหาในแอปได้โดยตรงจากตัวอย่างเว็บ คุณสามารถเข้าถึงเว็บคอนโซลในFirebase Studioแผงแสดงตัวอย่างเว็บได้โดยขยายแถบด้านล่าง

โปรดทราบว่าฟีเจอร์นี้อยู่ในขั้นทดลองและไม่ได้เปิดใช้โดยค่าเริ่มต้น หากต้องการเปิดฟีเจอร์นี้ ให้ทำตามขั้นตอนต่อไปนี้และแชร์ความคิดเห็นหลังจากลองใช้แล้ว

  1. วิธีเพิ่มเว็บคอนโซลไปยังพื้นที่ทํางาน Firebase Studio

    1. เปิดการตั้งค่าโดยคลิก หรือกด Ctrl + , (ใน Windows/Linux/ChromeOS) หรือ Cmd + , (ใน MacOS)
    2. ค้นหาการตั้งค่า Firebase Studio: เครื่องมือสําหรับนักพัฒนาเว็บ แล้วเปิดใช้ หากแก้ไขไฟล์ settings.json โดยตรง คุณจะใส่ "IDX.webDevTools": true ได้
    3. รีเฟรชหน้าต่างเบราว์เซอร์เพื่อโหลดFirebase Studio พื้นที่ทํางานซ้ำ

  2. เปิดตัวอย่างหน้าเว็บใน Firebase Studio: เปิดแพลตฟอร์มคำสั่ง (Cmd+Shift+P ใน Mac หรือ Ctrl+Shift+P ใน ChromeOS, Windows หรือ Linux) แล้วเลือก Firebase Studio: แสดงตัวอย่างหน้าเว็บ

  3. แผงคอนโซลเว็บจะยุบอยู่ภายในแผงแสดงตัวอย่างเว็บโดยค่าเริ่มต้น คลิกแถบหรือลากขึ้นเพื่อขยาย

แผงคอนโซลเว็บในFirebase Studioตัวอย่างเว็บทํางานคล้ายกับคอนโซลอื่นๆ เช่น คอนโซลที่มีในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

  • ข้อผิดพลาด JavaScript และคำสั่ง console.log จะปรากฏขึ้นขณะที่คุณใช้แอป
    • สำหรับข้อผิดพลาดและคำเตือน คุณยังมีตัวเลือกในการรับความช่วยเหลือจากGeminiด้วย โดยเลือกปุ่มทำความเข้าใจข้อผิดพลาดนี้ทางด้านขวาของข้อความแสดงข้อผิดพลาด
  • คุณประเมิน JavaScript ที่กำหนดเองในบริบทของตัวอย่างหน้าเว็บได้โดยใช้แถบพรอมต์ที่ด้านล่าง

เรียกใช้ Lighthouse สําหรับตัวอย่างเว็บ

Lighthouse จะตรวจสอบแอปตามหมวดหมู่การตรวจสอบที่เฉพาะเจาะจงซึ่งคุณเลือก และแสดงรายงานพร้อมข้อค้นพบและคำแนะนำ คุณสามารถเรียกใช้รายงาน Lighthouse ได้โดยตรงจากตัวอย่างหน้าเว็บใน Firebase Studio

  1. เปิดตัวอย่างหน้าเว็บใน Firebase Studio: เปิดแพลตฟอร์มคำสั่ง (Cmd+Shift+P ใน Mac หรือ Ctrl+Shift+P ใน ChromeOS, Windows หรือ Linux) เลือก Firebase Studio: แสดงตัวอย่างหน้าเว็บ

  2. คลิกไอคอน รูปภาพไอคอนการตรวจสอบความเร็ว เรียกใช้ Lighthouse จากแถบเครื่องมือแสดงตัวอย่างเว็บ

  3. รูปภาพแผง Lighthouse ใน Firebase Studio ในแผง Lighthouse ให้เลือกหมวดหมู่การตรวจสอบที่ต้องการ คุณสามารถเลือกจากรายงานการตรวจสอบประสิทธิภาพ การช่วยเหลือพิเศษ การปฏิบัติตามแนวทางปฏิบัติแนะนำ SEO และประสิทธิภาพของ Progressive Web App คลิกวิเคราะห์หน้าเว็บเพื่อสร้างรายงาน

    การสร้างรายงานอาจใช้เวลาสักครู่

  4. หลังจากรายงานปรากฏในแผง Lighthouse แล้ว คุณสามารถตรวจสอบสิ่งที่พบสำหรับหมวดหมู่การตรวจสอบแต่ละหมวดหมู่ หรือสลับระหว่างหมวดหมู่การตรวจสอบได้โดยคลิกคะแนนและชื่อหมวดหมู่

ใช้คอนโซลแก้ไขข้อบกพร่อง

Firebase Studio มีคอนโซลการแก้ไขข้อบกพร่องในตัวจาก Code OSS ใช้คอนโซลนี้เพื่อแก้ไขข้อบกพร่องของแอปด้วยโปรแกรมแก้ไขข้อบกพร่องที่พร้อมใช้งานสำหรับภาษาโปรแกรมที่ใช้กันมากที่สุด หรือเพิ่มส่วนขยายการแก้ไขข้อบกพร่องจาก OpenVSX

หากต้องการปรับแต่งประสบการณ์การแก้ไขข้อบกพร่อง คุณยังเพิ่ม.vscode/launch.json ไฟล์ลงในพื้นที่ทํางานและระบุการกําหนดค่าการเปิดตัวที่กําหนดเองได้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ไฟล์การกำหนดค่าการเริ่มเพื่อปรับแต่งการแก้ไขข้อบกพร่องที่การกำหนดค่าการแก้ไขข้อบกพร่องของ Visual Studio Code

แก้ไขข้อบกพร่องด้วย Gemini

คุณสามารถใช้ Gemini ใน Firebase เพื่อช่วยแก้ไขข้อบกพร่องของโค้ดด้วยแชทใน Code Workspace หรือ App Prototyping agent

แม้ว่า Gemini จะเขียนโค้ดให้คุณได้ แต่บางครั้งก็อาจทำให้เกิดข้อผิดพลาดด้วย เมื่อตรวจพบข้อผิดพลาด ระบบจะพยายามแก้ไข หากพบว่าวิธีนี้ไม่สามารถแก้ปัญหาตามข้อความแสดงข้อผิดพลาดได้ ให้ลองใช้เทคนิคต่อไปนี้

  • อธิบายปัญหา: ในอินเทอร์เฟซแชท ให้อธิบายปัญหาที่คุณพบให้ชัดเจนและกระชับที่สุด แม้ว่า Gemini อาจมีสิทธิ์เข้าถึงบริบท เช่น ข้อความแสดงข้อผิดพลาดและบันทึก แต่อาจไม่เข้าใจบริบททั้งหมด การอธิบายลักษณะการทำงานพร้อมกับข้อความแสดงข้อผิดพลาดจะช่วยให้ Gemini แก้ไขปัญหาได้เร็วขึ้น

  • ถามคำถามที่เจาะจง: ไม่ต้องกลัวที่จะถามGeminiคำถามโดยตรงเกี่ยวกับโค้ด เช่น "อะไรอาจเป็นสาเหตุที่ทำให้เกิดข้อยกเว้นเกี่ยวกับ Null Pointer ในฟังก์ชันนี้" หรือ "ฉันจะป้องกันภาวะการแข่งกันนี้ได้อย่างไร"

  • แบ่งปัญหาที่ซับซ้อนออกเป็นส่วนๆ: หากต้องการจัดการกับปัญหาที่ซับซ้อน ให้แบ่งปัญหาออกเป็นส่วนๆ ที่จัดการได้ง่ายขึ้น ขอให้ Gemini ช่วยแก้ไขข้อบกพร่องแต่ละส่วนแยกกันและคิดหาวิธีแก้ปัญหาทีละขั้นตอน

  • ใช้เครื่องหมายวงเล็บเหลี่ยมสำหรับโค้ด: เมื่อแชร์ข้อมูลโค้ด ให้ใช้เครื่องหมายวงเล็บเหลี่ยมสำหรับโค้ดเพื่อให้แน่ใจว่าโค้ดมีการจัดรูปแบบอย่างถูกต้อง วิธีนี้จะช่วยให้ Gemini อ่านและทำความเข้าใจโค้ดได้ง่ายขึ้น

  • ปรับปรุงและปรับแต่ง: Gemini อาจไม่ได้ให้วิธีแก้ปัญหาที่สมบูรณ์แบบเสมอไปในการลองครั้งแรก ตรวจสอบคำตอบ ถามคำถามเพื่อชี้แจง และระบุข้อมูลเพิ่มเติมตามที่จำเป็น

  • หลีกเลี่ยงการถามคำถามซ้ำๆ: หาก Gemini ติดอยู่ในลูปหรือตอบคำถามไม่ได้ ให้ลองเปลี่ยนรูปแบบพรอมต์หรือระบุบริบทเพิ่มเติม บางครั้งการเรียบเรียงคำถามใหม่ก็ช่วยให้ Gemini เข้าใจสิ่งที่คุณถามได้

    หากการเรียบเรียงพรอมต์ใหม่ไม่ช่วยแก้ปัญหาการวนซ้ำ ให้ลองใช้เทคนิคต่อไปนี้

    • เริ่มแชทใหม่: หากคุณใช้ Gemini ในFirebaseแชทในCodeพื้นที่ทํางาน ให้เริ่มเซสชันการแชทใหม่เพื่อรีเซ็ตบริบทของ Gemini วิธีนี้จะช่วยขจัดความเข้าใจผิดหรือข้อสันนิษฐานที่ Gemini อาจคิดไว้ในการสนทนาก่อนหน้านี้

    • ระบุตัวอย่างที่ตรงข้าม: หาก Gemini ทำการสมมติฐานที่ไม่ถูกต้อง ให้ระบุตัวอย่างที่ตรงข้ามเพื่อช่วย Gemini เข้าใจลักษณะการทำงานที่ถูกต้อง