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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอย่าง 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 คำถามโดยตรงเกี่ยวกับโค้ดกับ Gemini เช่น "อะไรอาจทำให้เกิด null pointer exception ในฟังก์ชันนี้" หรือ "ฉันจะป้องกันภาวะแข่งขันนี้ได้อย่างไร"

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

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

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

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

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

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

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