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

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

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

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

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

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

ใช้คอนโซลเว็บแบบผสานรวมเพื่อดูตัวอย่างเว็บ

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

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

1. เพิ่มคอนโซลเว็บลงในพื้นที่ทำงาน Firebase Studio โดยทำดังนี้

   1. เปิดการตั้งค่าโดยคลิก settings หรือกด 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 ให้เลือกหมวดหมู่การตรวจสอบที่ต้องการ คุณสามารถเลือกจากรายงานที่ตรวจสอบประสิทธิภาพ การช่วยเหลือพิเศษ ความสอดคล้องกับแนวทางปฏิบัติแนะนำ SEO และประสิทธิภาพของ Progressive Web App คลิกวิเคราะห์หน้าเว็บเพื่อสร้างรายงาน

   ระบบอาจใช้เวลา 2-3 นาทีในการสร้างรายงาน

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

ใช้คอนโซลดีบัก

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

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

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

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

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

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

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

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

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

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

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

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

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

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