วิธีรายงานข้อบกพร่องที่ดีเกี่ยวกับเบราว์เซอร์

การแจ้งปัญหาที่คุณพบในเบราว์เซอร์ของผู้ให้บริการเบราว์เซอร์เป็นขั้นตอนสำคัญในการทำให้แพลตฟอร์มเว็บดีขึ้น

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

ยืนยันว่าเป็นข้อบกพร่อง

ขั้นตอนแรกคือการค้นหาลักษณะการทำงานที่ "ถูกต้อง"

ลักษณะการทำงานที่ถูกต้องคืออะไร

ดูเอกสาร API ที่เกี่ยวข้องใน MDN หรือลองค้นหาข้อกำหนดที่เกี่ยวข้อง ข้อมูลนี้จะช่วยให้คุณตัดสินใจได้ว่า API ใดเสียหาย จุดใดไม่ทำงาน และลักษณะการทำงานที่คาดไว้

การดำเนินการนี้ใช้งานได้ในเบราว์เซอร์อื่นหรือไม่

โดยทั่วไปแล้ว ลักษณะการทำงานที่แตกต่างกันระหว่างเบราว์เซอร์จะได้รับการจัดลําดับความสําคัญสูงกว่าเนื่องจากเป็นปัญหาการทํางานร่วมกัน โดยเฉพาะอย่างยิ่งเมื่อเบราว์เซอร์ที่มีข้อบกพร่องเป็นเบราว์เซอร์เดียว ลองทดสอบใน Chrome, Firefox, Safari และ Edge เวอร์ชันล่าสุด โดยอาจใช้เครื่องมืออย่าง BrowserStack

หากเป็นไปได้ ให้ตรวจสอบว่าหน้าเว็บไม่ได้ทำงานแตกต่างจากปกติเนื่องจากมีการสแกนออบเจ็กต์ User Agent ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ลองตั้งค่าสตริง User-Agent เป็นเบราว์เซอร์อื่น

ปัญหานี้เกิดขึ้นในรุ่นล่าสุดใช่ไหม

การดำเนินการนี้ทำงานได้ตามที่คาดไว้ในอดีต แต่ใช้งานไม่ได้ในเบราว์เซอร์เวอร์ชันล่าสุดใช่ไหม การถดถอยดังกล่าวจะดำเนินการได้เร็วขึ้นมาก โดยเฉพาะอย่างยิ่งหากคุณระบุหมายเลขเวอร์ชันที่ใช้งานได้และเวอร์ชันที่ไม่ทำงาน คุณสามารถใช้เครื่องมือ เช่น BrowserStack เพื่อตรวจสอบเบราว์เซอร์เวอร์ชันเก่าได้ ใช้เครื่องมืออย่างเครื่องมือ bisect-builds (สำหรับ Chromium) เพื่อค้นหาการเปลี่ยนแปลง

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

ผู้อื่นพบปัญหาเดียวกันหรือไม่

หากคุณพบปัญหา ก็มีความเป็นไปได้สูงที่นักพัฒนาแอปรายอื่นๆ จะพบปัญหาเดียวกันด้วย ก่อนอื่น ให้ลองค้นหาข้อบกพร่องใน Stack Overflow ซึ่งอาจช่วยแปลปัญหานามธรรมเป็น API ที่ใช้งานไม่ได้ที่เฉพาะเจาะจง และอาจช่วยคุณหาวิธีแก้ปัญหาระยะสั้นจนกว่าข้อบกพร่องจะได้รับการแก้ไข

มีการรายงานวิดีโอนี้มาก่อนหรือไม่

เมื่อทราบถึงลักษณะของข้อบกพร่องแล้ว ก็ถึงเวลาตรวจสอบว่าข้อบกพร่องดังกล่าวได้รับการรายงานแล้วหรือยังโดยค้นหาในฐานข้อมูลข้อบกพร่องของเบราว์เซอร์

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

หากตัดสินใจที่จะแสดงความคิดเห็นเกี่ยวกับข้อบกพร่อง ให้ระบุข้อมูลเกี่ยวกับผลกระทบที่ข้อบกพร่องมีต่อเว็บไซต์ หลีกเลี่ยงการเพิ่มความคิดเห็นสไตล์ "+1" เนื่องจากเครื่องมือติดตามข้อบกพร่องมักจะส่งอีเมลสำหรับความคิดเห็นทุกรายการ

รายงานข้อบกพร่อง

หากไม่เคยมีการรายงานข้อบกพร่องนี้มาก่อน แสดงว่าถึงเวลาแจ้งให้ผู้ให้บริการเบราว์เซอร์ทราบ

สร้างกรณีทดสอบแบบลดขนาด

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

เคล็ดลับในการลดจำนวนชุดทดสอบมีดังนี้

  • ดาวน์โหลดหน้าเว็บ เพิ่ม <base href="https://original.url"> และยืนยันว่าข้อบกพร่องอยู่ในเครื่อง ซึ่งอาจต้องใช้เซิร์ฟเวอร์ HTTPS แบบสดหาก URL ใช้ HTTPS
  • ทดสอบไฟล์ในเครื่องกับเบราว์เซอร์ต่างๆ ให้ได้มากที่สุดในรุ่นล่าสุด
  • พยายามรวมทุกอย่างไว้ในไฟล์เดียว
  • นำโค้ดออก (เริ่มจากสิ่งที่คุณรู้ว่าไม่จำเป็น) จนกว่าข้อบกพร่องจะหายไป
  • ใช้การควบคุมเวอร์ชันเพื่อให้บันทึกงานและเลิกทำสิ่งที่ผิดพลาดได้

โฮสต์เทสต์เคสที่ผ่านการมินify

หากคุณกำลังมองหาพื้นที่ดีๆ ที่จะใช้ฝากกรอบการทดสอบที่ลดขนาดลง เรามีตำแหน่งที่ดีหลายแห่ง ดังนี้

โปรดทราบว่าเว็บไซต์หลายแห่งแสดงเนื้อหาใน iframe ซึ่งอาจทําให้ฟีเจอร์หรือข้อบกพร่องทํางานแตกต่างออกไป

รายงานปัญหา

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

เพิ่มคำอธิบายและขั้นตอนที่ชัดเจนในการจำลอง

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

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

ถัดไป ให้ระบุขั้นตอนโดยละเอียดที่จําเป็นในการทําให้ปัญหาเกิดซ้ำ ซึ่งจะเป็นหน้าที่ของกรอบการทดสอบที่ลดขนาดลง

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

สุดท้าย ให้อธิบายผลลัพธ์ที่คาดหวังและจริง

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

สำหรับข้อมูลเพิ่มเติม โปรดดูหลักเกณฑ์การเขียนรายงานข้อบกพร่องเกี่ยวกับ MDN

พิเศษ: เพิ่มภาพหน้าจอหรือบันทึกหน้าจอของปัญหา

แม้ว่าจะไม่ใช่สิ่งจําเป็น แต่การใส่ภาพหน้าจอหรือ Screencast ของปัญหามักมีประโยชน์ ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อข้อบกพร่องเกิดขึ้นหลังจากหลายขั้นตอนหรือกิจกรรมที่ผิดปกติ บ่อยครั้งที่ภาพหน้าจอและวิดีโอหน้าจอแสดงสิ่งที่เกิดขึ้นแก่วิศวกรเบราว์เซอร์ได้ดีกว่า

ระบุรายละเอียดของสภาพแวดล้อม

ข้อบกพร่องบางรายการอาจเกิดขึ้นซ้ำได้ในระบบปฏิบัติการบางระบบหรือในจอแสดงผลบางประเภทเท่านั้น (เช่น DPI ต่ำหรือ DPI สูง) อย่าลืมระบุรายละเอียดของสภาพแวดล้อมการทดสอบที่คุณใช้

ส่งข้อบกพร่อง

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