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

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

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

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

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

โปรดอ่านเอกสาร 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.

ถัดไป ให้ระบุขั้นตอนโดยละเอียดที่จําเป็นในการทําให้ปัญหาเกิดซ้ำ ในกรณีนี้ Test Case ที่ผ่านการ Minify จะมีประโยชน์

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 สูง) อย่าลืมระบุรายละเอียดของสภาพแวดล้อมการทดสอบที่คุณใช้

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

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