การแจ้งให้ผู้ให้บริการเบราว์เซอร์ทราบเกี่ยวกับปัญหาที่คุณพบในเบราว์เซอร์ของตน เป็นส่วนสำคัญที่จะทำให้แพลตฟอร์มเว็บดียิ่งขึ้น
การรายงานข้อบกพร่องที่ดีไม่ใช่เรื่องยาก แต่ก็ต้องใช้เวลาพอสมควร เป้าหมายก็คือการทำให้ คุณจะรู้ว่าอะไรเสียหาย หาสาเหตุที่แท้จริง และที่สำคัญที่สุดคือค้นหา วิธีแก้ไข ข้อบกพร่องที่มีความคืบหน้าอย่างรวดเร็วมักจะจำลองซ้ำได้ง่ายด้วย เป็นลักษณะการทำงานที่คาดหวังไว้ชัดเจน
ยืนยันว่าเป็นข้อบกพร่อง
ขั้นแรกคือการค้นหาว่าสิ่งใดที่ "ถูกต้อง" ที่ควรจะเป็น
ลักษณะการทำงานที่ถูกต้องคืออะไร
ตรวจสอบเอกสาร API ที่เกี่ยวข้องใน MDN หรือพยายาม ดูข้อมูลจำเพาะที่เกี่ยวข้อง ข้อมูลนี้จะช่วยให้คุณตัดสินใจได้ว่า API ใด ที่เสีย จุดไหนเสียหาย และลักษณะการทำงานที่คาดไว้คืออะไร
ทำงานในเบราว์เซอร์อื่นได้หรือไม่
โดยทั่วไปพฤติกรรมที่แตกต่างของเบราว์เซอร์จะมีความสำคัญสูงกว่า ความสามารถในการทำงานร่วมกัน โดยเฉพาะเมื่อเบราว์เซอร์ที่มีข้อบกพร่อง แปลกๆ ลองทดสอบเวอร์ชันล่าสุดของ Chrome, Firefox, Safari และ Edge อาจใช้เครื่องมืออย่าง BrowserStack
หากเป็นไปได้ ให้ตรวจสอบว่าหน้าเว็บไม่ได้จงใจทำงานที่แตกต่างไปจากสาเหตุ
การดักจับ User Agent ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ลองตั้งค่าสตริง User-Agent
ไปยังเบราว์เซอร์อื่น
เนื้อหาผิดเพี้ยนในผลงานล่าสุดหรือไม่
วิธีนี้ทำงานตามที่คาดไว้ในอดีต แต่เกิดปัญหาในเบราว์เซอร์รุ่นล่าสุดหรือไม่ "การถดถอย" ดังกล่าว สามารถดำเนินการได้เร็วขึ้น โดยเฉพาะอย่างยิ่งหากคุณมี หมายเลขเวอร์ชันที่ทำงานได้ และเวอร์ชันที่ดำเนินการไม่สำเร็จ เครื่องมือเช่น BrowserStack ทำให้การตรวจสอบเวอร์ชันเก่าเป็นเรื่องง่าย เวอร์ชันของเบราว์เซอร์และเครื่องมือสร้าง Bisect-Builds (สำหรับ Chromium) ช่วยให้ค้นหาการเปลี่ยนแปลงได้อย่างมีประสิทธิภาพมาก
หากปัญหาเป็นการถดถอยและเกิดซ้ำได้ สาเหตุที่แท้จริงมักเกิดจาก พบและแก้ไขอย่างรวดเร็ว
ผู้ใช้รายอื่นพบปัญหาเดียวกันหรือไม่
หากพบปัญหา ก็มีโอกาสที่ดีสำหรับนักพัฒนาซอฟต์แวร์รายอื่นด้วย ก่อนอื่น ให้ลองค้นหาข้อบกพร่องใน Stack Overflow วิธีนี้อาจช่วยคุณแปลงปัญหาที่เป็นนามธรรมเป็น API ที่เสียหาย และอาจช่วยให้คุณหาวิธีแก้ปัญหาเบื้องต้นไปได้เรื่อยๆ จนกว่าข้อบกพร่องจะได้รับการแก้ไข
เคยมีการรายงานมาก่อนไหม
เมื่อคุณเข้าใจข้อบกพร่องแล้ว ก็ถึงเวลาตรวจสอบว่าข้อบกพร่องนั้นหรือไม่ ได้รับการรายงานแล้วโดยการค้นหาฐานข้อมูลข้อบกพร่องของเบราว์เซอร์
- เบราว์เซอร์ที่ใช้ Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Safari และ เบราว์เซอร์แบบ WebKit: https://bugs.webkit.org/
หากคุณพบข้อบกพร่องที่มีอยู่ซึ่งอธิบายถึงปัญหา ให้เพิ่มการสนับสนุน โดยติดดาว ตั้งเป็นรายการโปรด หรือแสดงความคิดเห็นเกี่ยวกับข้อบกพร่อง และในหลายๆ เว็บไซต์ คุณสามารถเพิ่มตัวคุณเองลงในรายการ CC และรับการอัปเดตเมื่อข้อบกพร่องเปลี่ยนแปลง
หากคุณต้องการแสดงความคิดเห็นเกี่ยวกับข้อบกพร่อง โปรดแจ้งข้อมูลเกี่ยวกับข้อบกพร่อง มีผลต่อเว็บไซต์ของคุณ หลีกเลี่ยงการเพิ่ม "+1" ความคิดเห็นเกี่ยวกับรูปแบบ เป็นเครื่องมือติดตามข้อบกพร่อง มักจะส่งอีเมลสำหรับความคิดเห็นทุกรายการ
รายงานข้อบกพร่อง
ถ้าไม่เคยมีการรายงานข้อบกพร่องมาก่อน ถึงเวลาแจ้งผู้ให้บริการเบราว์เซอร์แล้ว เกี่ยวกับเรื่องนี้
สร้างกรอบการทดสอบแบบย่อ
Mozilla มีบทความดีๆ เกี่ยวกับ วิธีสร้างกรอบการทดสอบแบบย่อ หากต้องการทำให้ สรุปสั้นๆ ขณะที่คำอธิบายปัญหาเป็นจุดเริ่มต้นที่ดี จะแสดงการสาธิตที่ลิงก์ในข้อบกพร่อง ซึ่งแสดง ปัญหา ตัวอย่างควรมีข้อมูลสำหรับเพิ่มความคืบหน้าอย่างรวดเร็ว รหัสขั้นต่ำที่เป็นไปได้ในการแสดงปัญหา โค้ดเรียบง่าย เป็นสิ่งหนึ่งที่คุณสามารถทำได้เพื่อเพิ่มโอกาส กำลังแก้ไขข้อบกพร่อง
เคล็ดลับในการลดกรอบการทดสอบมีดังนี้
- ดาวน์โหลดหน้าเว็บ เพิ่ม
<base href="https://original.url">และยืนยันว่ามีข้อบกพร่องอยู่ในเครื่อง ซึ่งอาจต้องใช้เซิร์ฟเวอร์ HTTPS แบบสดหาก URL ใช้ HTTPS - ทดสอบไฟล์ในเครื่องในเบราว์เซอร์ต่างๆ รุ่นล่าสุดให้มากที่สุด
- โปรดพยายามย่อทุกอย่างให้เป็นไฟล์เดียว
- นำโค้ดออก (เริ่มต้นด้วยสิ่งที่คุณทราบว่าไม่จำเป็น) จนกว่าข้อบกพร่อง จะหายไป
- ใช้การควบคุมเวอร์ชันเพื่อให้คุณบันทึกงานและเลิกทำสิ่งที่ต้องทำได้ ผิด
การโฮสต์กรอบการทดสอบที่ลดขนาดลง
หากคุณกำลังมองหาพื้นที่ที่เหมาะสมในการโฮสต์กรอบการทดสอบที่ลดขนาดลง จะมีพื้นที่ที่ดีหลายแห่ง ได้แก่
โปรดทราบว่า หลายๆ เว็บไซต์เหล่านั้นแสดงเนื้อหาใน iframe ซึ่ง อาจทำให้ฟีเจอร์หรือข้อบกพร่องทำงานต่างออกไป
การยื่นปัญหา
เมื่อได้รับกรอบการทดสอบแบบย่อแล้ว คุณก็พร้อมที่จะรายงานข้อบกพร่องนั้น ไปที่เว็บไซต์การติดตามข้อบกพร่องที่เหมาะสมและสร้างปัญหาใหม่
- เบราว์เซอร์แบบ Chromium - https://crbug.com/new
- Firefox - https://bugzilla.mozilla.org/
- Safari และ เบราว์เซอร์แบบ WebKit - https://bugs.webkit.org/
ระบุคำอธิบายที่ชัดเจนและขั้นตอนที่จำเป็นในการสร้างปัญหาซ้ำ
ขั้นแรก ให้คำอธิบายที่ชัดเจนเพื่อช่วยให้วิศวกรเข้าใจได้อย่างรวดเร็วว่า ปัญหาคืออะไร และช่วยในการคัดแยกปัญหา
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 สูง) อย่าลืม ระบุรายละเอียดของสภาพแวดล้อมการทดสอบที่คุณใช้
ส่งข้อบกพร่อง
สุดท้าย ให้ส่งข้อบกพร่อง จากนั้น อย่าลืมคอยตรวจสอบอีเมลของคุณอยู่เสมอ การตอบสนองต่อข้อบกพร่อง ระหว่างการตรวจสอบและแก้ไขข้อบกพร่อง วิศวกรอาจมีคำถามเพิ่มเติม หรือพบปัญหา ทำให้ปัญหาเกิดซ้ำ พวกเขาอาจติดต่อมาได้