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

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

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

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

ขั้นตอนแรกคือค้นหาว่าพฤติกรรมที่ "ถูกต้อง" ควรเป็นอย่างไร

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

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

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

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

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

การละเมิดดังกล่าวเกิดขึ้นในรุ่นล่าสุดหรือไม่

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

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

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

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

เคยมีการรายงานเรื่องนี้มาก่อนหรือไม่

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

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

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

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

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

สร้างกรอบการทดสอบแบบย่อ

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

ต่อไปนี้เป็นเคล็ดลับเล็กๆ น้อยๆ ในการลดกรอบการทดสอบ

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

การโฮสต์กรอบทดสอบที่ลดขนาดลง

หากคุณกำลังมองหาพื้นที่ดีๆ สำหรับโฮสต์กรอบการทดสอบที่ย่อเล็กสุด คุณสามารถหาพื้นที่ดีๆ ได้หลายแห่ง ดังนี้

โปรดทราบว่าเว็บไซต์เหล่านั้นหลายแห่งแสดงเนื้อหาใน 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 ของปัญหา

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

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

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

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

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