การแจ้งปัญหาที่คุณพบในเบราว์เซอร์ของผู้ให้บริการเบราว์เซอร์เป็นขั้นตอนสำคัญในการทำให้แพลตฟอร์มเว็บดีขึ้น
การรายงานข้อบกพร่องที่ดีมาก แต่ต้องใช้เวลาสักเล็กน้อย เป้าหมายของคุณควรช่วยให้วิศวกรเบราว์เซอร์ค้นหาสิ่งที่ใช้งานไม่ได้ หาสาเหตุที่แท้จริง และที่สำคัญที่สุดคือหาวิธีแก้ไขได้ง่ายที่สุด ข้อบกพร่องที่ทําให้เกิดความคืบหน้าอย่างรวดเร็วมักจะทําให้เกิดซ้ำได้อย่างรวดเร็วโดยมีลักษณะการทํางานที่คาดไว้อย่างชัดเจน
ยืนยันว่าเป็นข้อบกพร่อง
ขั้นตอนแรกคือหาว่าลักษณะการทำงานที่ "ถูกต้อง" ควรเป็นอย่างไร
ลักษณะการทำงานที่ถูกต้องคืออะไร
โปรดอ่านเอกสาร 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/
หากพบข้อบกพร่องที่มีอยู่ซึ่งอธิบายปัญหา ให้เพิ่มการสนับสนุนด้วยการติดดาว ตั้งเป็นรายการโปรด หรือแสดงความคิดเห็นเกี่ยวกับข้อบกพร่อง และคุณเพิ่มตัวเองในรายชื่อสำเนาและรับข้อมูลอัปเดตเมื่อข้อบกพร่องมีการเปลี่ยนแปลงได้ในหลายเว็บไซต์
หากตัดสินใจที่จะแสดงความคิดเห็นเกี่ยวกับข้อบกพร่อง ให้ระบุข้อมูลเกี่ยวกับผลกระทบที่ข้อบกพร่องมีต่อเว็บไซต์ หลีกเลี่ยงการเพิ่มความคิดเห็นสไตล์ "+1" เนื่องจากเครื่องมือติดตามข้อบกพร่องมักจะส่งอีเมลสำหรับความคิดเห็นทุกรายการ
รายงานข้อบกพร่อง
หากไม่เคยมีการรายงานข้อบกพร่องนี้มาก่อน แสดงว่าถึงเวลาแจ้งให้ผู้ให้บริการเบราว์เซอร์ทราบ
สร้างกรณีทดสอบแบบลดขนาด
Mozilla มีบทความที่ยอดเยี่ยมเกี่ยวกับวิธีสร้างกรณีทดสอบแบบจํากัด กล่าวโดยย่อคือ แม้ว่าคำอธิบายปัญหาจะเป็นจุดเริ่มต้นที่ดี แต่ไม่มีอะไรดีไปกว่าการใส่การสาธิตที่ลิงก์ไว้ในข้อบกพร่องที่แสดงปัญหา ตัวอย่างควรมีโค้ดขั้นต่ำที่จำเป็นในการสาธิตปัญหาเพื่อให้มีโอกาสแก้ปัญหาได้อย่างรวดเร็วมากที่สุด ตัวอย่างโค้ดขนาดเล็กคือสิ่งสําคัญที่สุดที่คุณทําได้เพื่อเพิ่มโอกาสในการแก้ไขข้อบกพร่อง
เคล็ดลับในการลดจำนวนชุดทดสอบมีดังนี้
- ดาวน์โหลดหน้าเว็บ เพิ่ม
<base href="https://original.url">และยืนยันว่าข้อบกพร่องอยู่ในเครื่อง ซึ่งอาจต้องใช้เซิร์ฟเวอร์ HTTPS ที่ใช้งานอยู่หาก URL ใช้ HTTPS - ทดสอบไฟล์ในเครื่องกับเบราว์เซอร์ต่างๆ ให้ได้มากที่สุดในรุ่นล่าสุด
- พยายามรวมทุกอย่างไว้ในไฟล์เดียว
- นำโค้ดออก (เริ่มจากสิ่งที่คุณรู้ว่าไม่จำเป็น) จนกว่าข้อบกพร่องจะหายไป
- ใช้การควบคุมเวอร์ชันเพื่อให้บันทึกงานและเลิกทำสิ่งที่ผิดพลาดได้
โฮสต์เทสต์เคสที่ผ่านการมินify
หากกำลังมองหาพื้นที่เก็บข้อมูลที่ดีในการโฮสต์เคสทดสอบที่ผ่านการย่อขนาดแล้ว มีหลายตัวเลือกให้คุณเลือกใช้ ดังนี้
โปรดทราบว่าเว็บไซต์หลายแห่งแสดงเนื้อหาใน 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.
ถัดไป ให้ระบุขั้นตอนโดยละเอียดที่จําเป็นในการทําให้ปัญหาเกิดซ้ำ ในกรณีนี้ 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 สูง) อย่าลืมระบุรายละเอียดของสภาพแวดล้อมการทดสอบที่คุณใช้
ส่งข้อบกพร่อง
สุดท้าย ให้ส่งข้อบกพร่อง โปรดคอยติดตามการตอบกลับเกี่ยวกับข้อบกพร่องในอีเมล โดยทั่วไปในระหว่างการตรวจสอบ วิศวกรอาจมีคำถามเพิ่มเติม หากพบปัญหาในการทําให้เกิดปัญหาซ้ำ ทีมอาจติดต่อหาคุณ