การแจ้งผู้ให้บริการเบราว์เซอร์เกี่ยวกับปัญหาที่คุณพบในเบราว์เซอร์ เป็นส่วนสำคัญในการปรับปรุงแพลตฟอร์มเว็บให้ดียิ่งขึ้น!
การรายงานข้อบกพร่องที่ดีไม่ใช่เรื่องยาก แต่ต้องอาศัยความพยายามเล็กน้อย เป้าหมายคือการทำให้ หาจุดที่เสียหายได้ง่ายๆ หาสาเหตุของปัญหา และที่สำคัญที่สุดคือ หาวิธีแก้ไข ข้อบกพร่องที่มีความคืบหน้าอย่างรวดเร็วมักจะเกิดซ้ำได้ง่ายโดยมีลักษณะการทำงานที่ชัดเจน
ยืนยันว่าเป็นข้อบกพร่อง
ขั้นตอนแรกคือค้นหาว่าพฤติกรรมที่ "ถูกต้อง" ควรเป็นอย่างไร
ลักษณะการทำงานที่ถูกต้องคืออะไร
ตรวจสอบเอกสาร API ที่เกี่ยวข้องใน MDN หรือลองค้นหาข้อกำหนดที่เกี่ยวข้อง ข้อมูลนี้จะช่วยให้คุณตัดสินใจได้ว่า API ใดที่เสียหาย ที่ที่เสียหาย และลักษณะการทำงานที่คาดไว้คืออะไร
เบราว์เซอร์นี้ทำงานในเบราว์เซอร์อื่นได้หรือไม่
โดยทั่วไปแล้ว ลักษณะการทำงานที่ต่างกันในแต่ละเบราว์เซอร์จะมีความสำคัญสูงกว่าเนื่องจากปัญหาด้านความสามารถในการทำงานร่วมกัน โดยเฉพาะอย่างยิ่งเมื่อเบราว์เซอร์ที่มีข้อบกพร่องนั้นไม่ใช่เบราว์เซอร์ที่ดี ลองทดสอบเวอร์ชันล่าสุดของ Chrome, Firefox, Safari และ Edge โดยอาจใช้เครื่องมืออย่าง BrowserStack
หากเป็นไปได้ ให้ตรวจสอบว่าหน้าเว็บไม่ได้ตั้งใจจะทำงานต่างออกไปจากการดักจับ User Agent ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ลองตั้งค่าสตริง User-Agent
เป็นเบราว์เซอร์อื่น
การละเมิดดังกล่าวเกิดขึ้นในรุ่นล่าสุดหรือไม่
วิธีการทำงานเช่นนี้เป็นไปตามที่คาดไว้ในอดีต แต่ไม่ทำงานในเบราว์เซอร์รุ่นล่าสุดหรือไม่ "การถดถอย" ดังกล่าวสามารถดำเนินการได้เร็วขึ้นมาก โดยเฉพาะอย่างยิ่งหากคุณระบุหมายเลขเวอร์ชันที่ทำงานได้และเวอร์ชันที่ล้มเหลว เครื่องมืออย่าง BrowserStack ช่วยให้การตรวจสอบเบราว์เซอร์เวอร์ชันเก่าๆ และเครื่องมือสร้าง Bisect (สำหรับ 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 สูง) อย่าลืมใส่รายละเอียดของสภาพแวดล้อมการทดสอบที่คุณใช้
ส่งข้อบกพร่อง
สุดท้าย ให้ส่งข้อบกพร่อง จากนั้น โปรดคอยตรวจสอบอีเมลของคุณเพื่อดูการตอบกลับเกี่ยวกับข้อบกพร่อง โดยปกติแล้ว ในระหว่างการตรวจสอบและแก้ไขข้อบกพร่อง วิศวกรอาจมีคำถามเพิ่มเติมหรือพบปัญหาในการทำซ้ำปัญหา ก็สามารถติดต่อไปได้