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

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

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

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

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

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

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

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