แก้ไขข้อบกพร่องของแอปในโปรเจ็กต์ IDX

โปรเจ็กต์ IDX มีวิธีต่างๆ ในการแก้ไขข้อบกพร่องของแอปจากพื้นที่ทำงานโดยตรง แอปเว็บและ Flutter มี Lighthouse และเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ในตัวอย่างเว็บของ Chrome ในพื้นที่ทำงาน แอป Flutter นำเสนอตัวอย่างจาก iOS, Android และเว็บเพื่อให้คุณตรวจสอบและทดสอบแอปของคุณในขณะที่เขียนโค้ด คอนโซลแก้ไขข้อบกพร่องในตัวรองรับการแก้ไขข้อบกพร่องอัตโนมัติสำหรับภาษาทั่วไป และการกำหนดการแก้ไขข้อบกพร่องที่กำหนดเองได้ที่ไฟล์ launch.json ในพื้นที่ทำงาน

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

IDX มีตัวอย่างแอปในพื้นที่ทำงานสำหรับ เว็บแอป (Chrome และ Safari บนอุปกรณ์เคลื่อนที่) และแอป Flutter (iOS, Android, Chrome) การแสดงตัวอย่าง Android และ Chrome รองรับการโหลดซ้ำแบบ Hot และ Hot refresh ตลอดจนมีความสามารถของโปรแกรมจำลองเต็มรูปแบบ เครื่องจำลองของ Safari และ iOS แสดงตัวอย่างแบบภาพและแบบอินเทอร์แอกทีฟในอุปกรณ์ iOS ได้หลากหลายประเภท และจำลองประสบการณ์การใช้งาน iOS สำหรับแอปบนอุปกรณ์เคลื่อนที่และเว็บแอป

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

ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูตัวอย่างเว็บ (ทดลอง)

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

ฟีเจอร์นี้อยู่ในขั้นทดลองขณะที่เราพยายาม สร้างประสบการณ์ของผู้ใช้ที่ดีที่สุด ส่งความคิดเห็นถึงเรา เพื่อช่วยเราปรับปรุงผลิตภัณฑ์ให้ดียิ่งขึ้น

1. เพิ่มเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ลงในพื้นที่ทำงาน IDX ดังนี้

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

2. เปิดตัวอย่างเว็บใน Project IDX โดยเปิดชุดคำสั่ง (Cmd+Shift+P ใน Mac หรือ Ctrl+Shift+P ใน ChromeOS, Windows หรือ Linux) แล้วเลือกรหัสโปรเจ็กต์: แสดงตัวอย่างเว็บ

3. แผงเครื่องมือสำหรับนักพัฒนาเว็บถูกย่อขนาดไว้ภายในแผงแสดงตัวอย่างเว็บ คลิกแถบเครื่องมือสำหรับนักพัฒนาเว็บเพื่อขยายแผงและใช้เครื่องมือสำหรับนักพัฒนาเว็บภายในแผงแสดงตัวอย่างเว็บ

ใช้แผงเครื่องมือสำหรับนักพัฒนาเว็บในการแสดงตัวอย่างเว็บ IDX แบบเดียวกับที่คุณแก้ไขข้อบกพร่องของแอปในเบราว์เซอร์ Chrome

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

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

1. เปิดตัวอย่างเว็บใน Project IDX โดยเปิดชุดคำสั่ง (Cmd+Shift+P ใน Mac หรือ Ctrl+Shift+P ใน ChromeOS, Windows หรือ Linux) แล้วเลือกรหัสโปรเจ็กต์: แสดงตัวอย่างเว็บ

2. คลิกไอคอนตรวจสอบประสิทธิภาพจากแถบเครื่องมือแสดงตัวอย่างเว็บ

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

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

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

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

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

หากต้องการเขียนการแก้ไขข้อบกพร่องที่กำหนดเอง ให้เพิ่มไฟล์ launch.json ลงในพื้นที่ทำงาน