แก้ไขข้อบกพร่องบริการที่ทำงานอยู่เบื้องหลัง

Kayce Basques

Sofia Emelianova

ส่วนบริการเบื้องหลัง ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เป็นชุดเครื่องมือสำหรับ JavaScript API ที่ช่วยให้เว็บไซต์ส่งและรับข้อมูลอัปเดตได้แม้ว่าผู้ใช้จะไม่ได้เปิดเว็บไซต์ของคุณอยู่ก็ตาม บริการที่ทำงานอยู่เบื้องหลังมีฟังก์ชันการทำงานคล้ายกับกระบวนการเบื้องหลัง

ส่วนบริการเบื้องหลัง ช่วยให้คุณแก้ไขข้อบกพร่องของบริการเบื้องหลังต่อไปนี้ได้

• การดึงข้อมูลในเบื้องหลัง
• การซิงค์ในเบื้องหลัง
• การแจ้งเตือน
• การโหลดแบบคาดเดา
• ข้อความ Push

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถบันทึกเหตุการณ์การดึงข้อมูล การซิงค์ และการแจ้งเตือนได้เป็นเวลา 3 วัน แม้ว่าจะไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม ซึ่งจะช่วยให้คุณมั่นใจได้ว่าระบบจะส่งและรับเหตุการณ์ตามที่คาดไว้

นอกจากเหตุการณ์บริการที่ทำงานอยู่เบื้องหลังแล้ว เครื่องมือสำหรับนักพัฒนาเว็บยังทำสิ่งต่อไปนี้ได้ด้วย

• แสดงรายงานที่ Chrome ส่งไปแล้วหรือกำลังจะส่งโดยใช้ Reporting API
• ช่วยให้คุณแก้ไขข้อบกพร่องและทดสอบ Back-Forward Cache ได้ด้วยการคลิก

การดึงข้อมูลในเบื้องหลัง

Background Fetch API ช่วยให้ Service Worker ดาวน์โหลดทรัพยากรขนาดใหญ่ เช่น ภาพยนตร์หรือพอดแคสต์ ได้อย่างน่าเชื่อถือในฐานะบริการที่ทำงานอยู่เบื้องหลัง หากต้องการบันทึกเหตุการณ์การดึงข้อมูลในเบื้องหลังเป็นเวลา 3 วัน แม้ว่าจะไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม ให้ทำดังนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่ใช้ Background Fetch API

2. ไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การดึงข้อมูลในเบื้องหลัง แล้วคลิก บันทึก

   

3. ในหน้าเว็บ ให้ทริกเกอร์กิจกรรมการดึงข้อมูลในเบื้องหลัง เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์ลงในตาราง

   

4. คลิกเหตุการณ์เพื่อดูรายละเอียดในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้นานสูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

การซิงค์ในเบื้องหลัง

Background Sync API ช่วยให้ Service Worker ที่ทำงานแบบออฟไลน์ส่งข้อมูลไปยังเซิร์ฟเวอร์ได้เมื่อ มีการเชื่อมต่ออินเทอร์เน็ตที่เชื่อถือได้อีกครั้ง หากต้องการบันทึกเหตุการณ์การซิงค์ในเบื้องหลังเป็นเวลา 3 วัน แม้ว่าจะไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม ให้ทำดังนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ใน หน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การซิงค์ในเบื้องหลัง แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้คลิกลงทะเบียนการซิงค์ในเบื้องหลัง เพื่อลงทะเบียน Service Worker ที่เกี่ยวข้อง แล้วคลิกอนุญาต เมื่อระบบขอ

   การลงทะเบียน Service Worker เป็นกิจกรรมการซิงค์ในเบื้องหลัง เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์ลงในตาราง

   

4. คลิกเหตุการณ์เพื่อดูรายละเอียดในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้นานสูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

(ทดลอง) การลดการติดตามการเข้าออก

การลดการติดตามการเข้าออก การทดลองใน Chrome ช่วยให้คุณระบุและลบสถานะของเว็บไซต์ที่ดูเหมือนจะทำการติดตามข้ามเว็บไซต์โดยใช้เทคนิคการติดตามการเข้าออกได้ คุณสามารถบังคับใช้การลดการติดตามด้วยตนเองและดูรายการเว็บไซต์ที่ระบบลบสถานะออก

วิธีบังคับใช้การลดการติดตาม

1. บล็อกคุกกี้ของบุคคลที่สามใน Chrome ไปที่และเปิดใช้ > การตั้งค่า > ความเป็นส่วนตัวและความปลอดภัย > คุกกี้และข้อมูลเว็บไซต์อื่นๆ > บล็อกคุกกี้ของบุคคลที่สาม
2. ใน chrome://flags ให้ตั้งค่าการทดลองการลดการติดตามการเข้าออก เป็นเปิดใช้พร้อมการลบ
3. เปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้วไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การลดการติดตามการเข้าออก
4. คลิกลิงก์การเข้าออกแล้วรอ (10 วินาที) ให้ Chrome บันทึกการเข้าออก แท็บปัญหา จะเตือนคุณเกี่ยวกับการลบสถานะที่กำลังจะเกิดขึ้น
5. คลิกบังคับเรียกใช้ เพื่อลบสถานะทันที

การแจ้งเตือน

หลังจากที่ Service Worker ได้รับ ข้อความ Push จากเซิร์ฟเวอร์แล้ว Service Worker จะใช้ Notifications API เพื่อแสดงข้อมูลแก่ผู้ใช้ หากต้องการบันทึกการแจ้งเตือนเป็นเวลา 3 วัน แม้ว่าจะไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม ให้ทำดังนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

2. ไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การแจ้งเตือน แล้วคลิก บันทึก

   

3. คลิกกำหนดเวลาการแจ้งเตือน แล้วคลิกอนุญาต เมื่อระบบขอ

4. รอให้การแจ้งเตือนปรากฏขึ้น เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์การแจ้งเตือนลงในตาราง

   

5. คลิกเหตุการณ์เพื่อดูรายละเอียดในพื้นที่ด้านล่างตาราง

6. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้นานสูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

การโหลดแบบคาดเดา

การโหลดแบบคาดเดาช่วยให้โหลดหน้าเว็บได้เกือบจะทันทีโดยอิงตามกฎการคาดเดาที่คุณกำหนด ซึ่งจะช่วยให้เว็บไซต์ดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าของหน้าเว็บที่ผู้ใช้เข้าชมมากที่สุด

การดึงข้อมูลล่วงหน้าจะดึงข้อมูลทรัพยากรล่วงหน้า ส่วนการแสดงผลล่วงหน้าจะดำเนินการไปอีกขั้นและแสดงผลทั้งหน้าในกระบวนการแสดงผลเบื้องหลังที่ซ่อนอยู่

คุณสามารถแก้ไขข้อบกพร่องของการโหลดแบบคาดเดาได้ในส่วนแอปพลิเคชัน > บริการเบื้องหลัง > การโหลดแบบคาดเดา ส่วนนี้มี 3 มุมมอง ได้แก่

• การโหลดแบบคาดเดา แสดงสถานะการคาดเดาของหน้าเว็บปัจจุบัน, URL ปัจจุบัน, หน้าเว็บที่หน้าเว็บปัจจุบันพยายามโหลดแบบคาดเดา และสถานะของหน้าเว็บเหล่านั้น
• กฎ แสดงชุดกฎในหน้าเว็บปัจจุบันในแผงองค์ประกอบ และสถานะโดยรวมของการคาดเดา
• การคาดเดา แสดงตารางที่มีข้อมูลเกี่ยวกับการพยายามโหลดแบบคาดเดาและสถานะของการพยายามโหลด หากการพยายามโหลดไม่สำเร็จ คุณสามารถคลิกการพยายามโหลดในตารางเพื่อดูข้อมูลโดยละเอียดและเหตุผลที่การพยายามโหลดไม่สำเร็จ

ลองแก้ไขข้อบกพร่องของการโหลดแบบคาดเดาในหน้าเดโมการแสดงผลล่วงหน้านี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บแล้วไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การโหลดแบบคาดเดา หากไม่เห็นการโหลดแบบคาดเดาที่หน้าเว็บเริ่มต้น ให้โหลดหน้าเว็บซ้ำ

   

2. หน้าเริ่มต้นของการแสดงผลล่วงหน้าของเดโมจะแสดงผลล่วงหน้า 2 หน้าและแสดงผลล่วงหน้าไม่สำเร็จ 1 หน้า คลิกดูการคาดเดาทั้งหมด

3. ในส่วนการคาดเดา ให้เลือกการคาดเดาที่มีสถานะไม่สำเร็จ เพื่อดูเหตุผลที่การคาดเดาไม่สำเร็จ ในส่วนที่มีข้อมูลโดยละเอียดที่ด้านล่าง

   

   ในกรณีนี้ การแสดงผลล่วงหน้าไม่สำเร็จเนื่องจากไม่มีหน้า /next3.html ในเว็บไซต์

4. หากต้องการกรองตารางในแท็บการคาดเดา ให้พิมพ์ค่าได้อย่างอิสระหรือใช้ตัวกรองที่มีคีย์ตัวใดตัวหนึ่งต่อไปนี้ในแถบตัวกรองที่ด้านบน url:VALUE, action:VALUE หรือ action:VALUE

   

5. เปิดส่วนกฎ แล้วคลิกสถานะ เพื่อดูชุดกฎที่ด้านล่าง การคลิกลิงก์ชุดกฎ จะนำคุณไปยังแผงองค์ประกอบ และแสดงให้เห็นว่ามีการกำหนดกฎการคาดเดาไว้ที่ใด

   

ดูคำแนะนำแบบละเอียดเพิ่มเติมได้ที่หัวข้อการแก้ไขข้อบกพร่องของกฎการคาดเดา

การรับส่งข้อความ Push

หากต้องการแสดงการแจ้งเตือน Push ให้ผู้ใช้ Service Worker ต้องใช้ Push Message API เพื่อรับข้อมูลจากเซิร์ฟเวอร์ก่อน เมื่อ Service Worker พร้อมที่จะแสดงการ แจ้งเตือนแล้ว Service Worker จะใช้ Notifications API หากต้องการบันทึกข้อความ Push เป็นเวลา 3 วัน แม้ว่าจะไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม ให้ทำดังนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ใน หน้าเดโมนี้

2. ไปที่แอปพลิเคชัน > บริการเบื้องหลัง > การรับส่งข้อความ Push แล้วคลิก บันทึก

   

3. ในหน้าเดโม ให้สลับเปิดใช้การแจ้งเตือน Push คลิกอนุญาต เมื่อระบบขอ พิมพ์ข้อความ แล้วส่งข้อความ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์การแจ้งเตือน Push ลงในตาราง

   

4. คลิกเหตุการณ์เพื่อดูรายละเอียดในพื้นที่ด้านล่างตาราง

5. คุณสามารถปิดเครื่องมือสำหรับนักพัฒนาเว็บและปล่อยให้การบันทึกทำงานได้นานสูงสุด 3 วัน หากต้องการหยุดบันทึก ให้คลิก หยุด

Reporting API

ข้อผิดพลาดบางอย่างเกิดขึ้นในสภาพแวดล้อมจริงเท่านั้น คุณจะไม่มีทางเห็นข้อผิดพลาดเหล่านั้นในเครื่องหรือระหว่างการพัฒนาเนื่องจากผู้ใช้จริง เครือข่าย และอุปกรณ์ต่างๆ จะเปลี่ยนสถานการณ์

ตัวอย่างเช่น สมมติว่าเว็บไซต์ใหม่ของคุณใช้ซอฟต์แวร์ของบุคคลที่สามที่ใช้ document.write() เพื่อโหลดสคริปต์ที่สำคัญ ผู้ใช้ใหม่ทั่วโลกเปิดเว็บไซต์ของคุณ แต่การเชื่อมต่อของผู้ใช้อาจช้ากว่าการเชื่อมต่อที่คุณใช้ทดสอบ เว็บไซต์ของคุณเริ่มทำงานผิดปกติสำหรับผู้ใช้เหล่านั้นโดยที่คุณไม่ทราบ เนื่องจาก Chrome เข้าแทรกแซงการทำงานของ document.write() ในเครือข่ายที่ช้า หรือคุณอาจต้องการจับตาดู API ที่เลิกใช้งานแล้วหรือกำลังจะเลิกใช้งานที่ฐานของโค้ดอาจใช้อยู่

Reporting API ออกแบบมาเพื่อช่วยคุณตรวจสอบการเรียก API ที่เลิกใช้งานแล้ว การละเมิดความปลอดภัยของหน้าเว็บ และอื่นๆ คุณสามารถตั้งค่าการรายงานตามที่อธิบายไว้ใน ตรวจสอบเว็บแอปพลิเคชันด้วย Reporting API

วิธีดูรายงานที่หน้าเว็บสร้างขึ้น

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้วไปที่แอปพลิเคชัน > บริการเบื้องหลัง > Reporting API

   

แท็บ Reporting API แบ่งออกเป็น 3 ส่วน ได้แก่

• ตารางรายงาน ที่มีข้อมูลต่อไปนี้ในแต่ละรายงาน
  • URL ที่ทำให้เกิดการสร้างรายงาน
  • ประเภท การละเมิด
  • รายงาน สถานะ
  • ปลายทางปลายทาง
  • การประทับเวลาสร้างขึ้นเมื่อ
  • เนื้อหา รายงาน
• ส่วนแสดงตัวอย่างเนื้อหารายงาน หากต้องการแสดงตัวอย่างเนื้อหารายงาน ให้คลิกรายงานในตารางรายงาน
• ส่วนปลายทาง ที่มีภาพรวมของปลายทางทั้งหมดที่กำหนดค่าไว้ในส่วนหัว Reporting-Endpoints

สถานะรายงาน

คอลัมน์สถานะ จะบอกว่า Chrome ส่งรายงานสำเร็จ กำลังจะส่ง หรือส่งไม่สำเร็จ

ระบบจะนำรายงานออกหลังจากผ่านไปสักพัก ไม่ว่ารายงานจะส่งสำเร็จหรือไม่ก็ตาม

บริบทของรายงานข้อขัดข้อง

ด้วย Reporting API คุณสามารถกำหนดค่าเว็บไซต์ให้ รายงานข้อขัดข้อง ไปยังปลายทางเซิร์ฟเวอร์ crash-reporting หรือ default ได้ รายงานข้อขัดข้องสามารถมีอินเทอร์เฟซ CrashReportContext ที่ช่วยให้คุณบันทึกข้อมูลที่เกี่ยวข้องกับข้อขัดข้องที่กำหนดเองในคู่คีย์-ค่าสำหรับบริบทการท่องเว็บระดับบนสุดปัจจุบันได้

ในแท็บแอปพลิเคชัน > บริการเบื้องหลัง > Reporting API > บริบทของรายงานข้อขัดข้อง คุณสามารถตรวจสอบข้อมูลบริบทของข้อขัดข้องและกรองตามคีย์หรือค่าในแถบตัวกรองที่ด้านบนได้

เซสชันที่ผูกกับอุปกรณ์

Device Bound Session Credentials (DBSC) เป็น Web API และโปรโตคอลระหว่าง User Agent กับเซิร์ฟเวอร์ที่มีเป้าหมายเพื่อป้องกันการขโมยคุกกี้โดยอนุญาตให้ User Agent ยืนยันการครอบครองคีย์ส่วนตัวที่จัดเก็บไว้อย่างปลอดภัย

วิธีดูเซสชันที่ผูกกับอุปกรณ์ คำจำกัดความ และเหตุการณ์ของเซสชัน

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่ใช้ DBSC
2. ไปที่แอปพลิเคชัน > บริการเบื้องหลัง > เซสชันที่ผูกกับอุปกรณ์

3. ในแถบด้านข้างทางด้านซ้าย ให้ขยายเว็บไซต์เพื่อดูเซสชันที่ใช้งานอยู่ เลือกเซสชันเพื่อดูคำจำกัดความของเซสชัน

   

4. ตารางเหตุการณ์ จะบันทึกเหตุการณ์ DBSC ได้แก่ การสร้าง การรีเฟรช การท้าทาย และการสิ้นสุด หากต้องการเก็บรายการเหตุการณ์ไว้เมื่อมีการนำทางหน้าเว็บ ให้เลือก check_box เก็บรักษาบันทึก

5. ในตารางเหตุการณ์ ให้เลือกเหตุการณ์เพื่อดูรายละเอียด

6. หากเหตุการณ์ไม่สำเร็จ คุณจะเห็นข้อความ Error ในคอลัมน์ผลลัพธ์ เลือกเหตุการณ์ที่ไม่สำเร็จเพื่อดูรายละเอียด รหัสข้อผิดพลาดในการตอบกลับ และสาเหตุที่ทำให้ไม่สำเร็จ

   

ส่วนเซสชันที่ผูกกับอุปกรณ์ ในแถบด้านข้างอาจไฮไลต์ปัญหาต่อไปนี้

• เซสชันที่สิ้นสุด: ระบุด้วยขีดฆ่าและไอคอน database-off ในแถบด้านข้าง
• เหตุการณ์ที่ไม่สำเร็จ: ไฮไลต์ด้วยไอคอนคำเตือน องค์ประกอบไม่มีเซสชัน จะบันทึกเหตุการณ์ที่ไม่สำเร็จซึ่งลิงก์กับเว็บไซต์แต่ไม่ได้ลิงก์กับเซสชันที่รู้จัก