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