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

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 ในเครื่องมือสำหรับนักพัฒนาเว็บ โปรดดู Service Worker

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

   

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

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

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

หมายเหตุ: ฟีเจอร์นี้ยังอยู่ในช่วงทดลองและพร้อมให้บริการตั้งแต่ Chrome เวอร์ชัน 115 เป็นต้นไป

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

หากต้องการบังคับใช้การลดการติดตาม ให้ทำดังนี้

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

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

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

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

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

   

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

4. รอให้การแจ้งเตือนปรากฏขึ้น DevTools จะบันทึกเหตุการณ์การแจ้งเตือนลงในตาราง

   

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

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

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

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

   

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

   

   หมายเหตุ: นอกจากนี้ ในแอปพลิเคชัน > Service Worker คุณสามารถคลิกPush เพื่อส่งการแจ้งเตือนทดสอบจากเครื่องมือสำหรับนักพัฒนาเว็บได้

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

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

Reporting API

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

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

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

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

1. ไปที่ chrome://flags/#enable-experimental-web-platform-features ตั้งค่าฟีเจอร์แพลตฟอร์มเว็บทดลองเป็นเปิดใช้ แล้วรีสตาร์ท Chrome

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

   

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

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

สถานะรายงาน

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

สถานะ	คำอธิบาย
Success	เบราว์เซอร์ได้ส่งรายงานแล้ว และปลายทางตอบกลับด้วยโค้ดที่ระบุความสำเร็จ (200 หรือโค้ดตอบกลับที่ระบุความสำเร็จอื่นๆ 2xx)
Pending	เบราว์เซอร์กำลังพยายามส่งรายงาน
Queued	ระบบได้สร้างรายงานแล้ว และเบราว์เซอร์ยังไม่ได้พยายามส่งรายงาน รายงานจะปรากฏเป็น Queued ในกรณีใดกรณีหนึ่งต่อไปนี้ รายงานนี้เป็นรายงานใหม่และเบราว์เซอร์กำลังรอเพื่อดูว่ามีรายงานเพิ่มเติมมาถึงหรือไม่ก่อนที่จะพยายามส่ง รายงานไม่ใช่รายงานใหม่ เบราว์เซอร์พยายามส่งรายงานนี้แล้วแต่ไม่สำเร็จ และกำลังรอเพื่อลองอีกครั้ง
MarkedForRemoval	หลังจากลองส่งอีกครั้งสักพัก (Queued) เบราว์เซอร์ได้หยุดพยายามส่งรายงานแล้ว และจะนำรายงานออกจากรายการรายงานที่จะส่งในเร็วๆ นี้

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

ประเด็นสำคัญ: สถานะQueuedไม่ได้ให้ข้อมูลเสมอไป เนื่องจากไม่ได้ระบุอย่างชัดเจนว่าการส่งล้มเหลวหรือยังไม่ได้ลองส่ง การใช้ความล่าช้าในการรายงานเล็กน้อยจะช่วยให้รายงานที่ยังคงQueuedในกรณีนั้นระบุได้ว่าการส่งล้มเหลว

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

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

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

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

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

   

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

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

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

   

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

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