มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 63)

Kayce Basques

ยินดีต้อนรับกลับมา ฟีเจอร์ใหม่ที่กำลังจะเปิดตัวในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 63 มีดังนี้

อ่านต่อหรือดูวิดีโอด้านล่างเพื่อดูข้อมูลเพิ่มเติม

การรองรับการแก้ไขข้อบกพร่องจากระยะไกลสำหรับหลายไคลเอ็นต์

หากคุณเคยพยายามแก้ไขข้อบกพร่องของแอปจาก IDE เช่น VS Code หรือ WebStorm คุณอาจพบว่าการเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ทำให้เซสชันแก้ไขข้อบกพร่องยุ่งเหยิง ปัญหานี้ยังทําให้ใช้เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์เพื่อแก้ไขข้อบกพร่องการทดสอบ WebDriver ไม่ได้อีกด้วย

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

การแก้ไขข้อบกพร่องระยะไกลแบบหลายไคลเอ็นต์เป็นปัญหาอันดับ 1 ของเครื่องมือสำหรับนักพัฒนาเว็บใน crbug.com และเป็นอันดับ 3 ของโปรเจ็กต์ Chromium ทั้งหมด การรองรับหลายไคลเอ็นต์ยังเปิดโอกาสที่น่าสนใจมากมายในการผสานรวมเครื่องมืออื่นๆ กับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หรือการใช้เครื่องมือเหล่านั้นในลักษณะใหม่ๆ เช่น

  • ตอนนี้ไคลเอ็นต์โปรโตคอล เช่น ChromeDriver หรือส่วนขยายการแก้ไขข้อบกพร่องของ Chrome สำหรับ VS Code และ Webstorm รวมถึงไคลเอ็นต์ WebSocket เช่น Puppeteer สามารถทำงานพร้อมกันกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้แล้ว
  • ตอนนี้ไคลเอ็นต์โปรโตคอล WebSocket 2 ตัวแยกกัน เช่น Puppeteer หรือ chrome-remote-interface สามารถเชื่อมต่อกับแท็บเดียวกันพร้อมกันได้แล้ว
  • ตอนนี้ส่วนขยาย Chrome ที่ใช้ chrome.debugger API สามารถทำงานพร้อมกันกับเครื่องมือสำหรับนักพัฒนาเว็บได้แล้ว
  • ตอนนี้ส่วนขยาย Chrome หลายรายการสามารถใช้ chrome.debugger API ในแท็บเดียวกันได้พร้อมกัน

Workspaces 2.0

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

Workspaces 2.0 พัฒนาต่อมาจาก 1.0 โดยเพิ่ม UX ที่มีประโยชน์มากขึ้นและปรับปรุงการแมปอัตโนมัติของโค้ดที่แปลงแล้ว เดิมทีฟีเจอร์นี้กำหนดเวลาให้เปิดตัวไม่นานหลังจาก Chrome Developer Summit (CDS) 2016 แต่ทีมได้เลื่อนการเปิดตัวออกไปเพื่อแก้ปัญหาบางอย่าง

ดูส่วน "การเขียน" (ประมาณ 14:28) ของการพูดคุยเกี่ยวกับ DevTools จาก CDS 2016 เพื่อดูการใช้งาน Workspaces 2.0

การตรวจสอบใหม่ 4 รายการ

ใน Chrome 63 แผงการตรวจสอบจะมีการตรวจสอบใหม่ 4 รายการ ได้แก่

  • แสดงรูปภาพเป็น WebP
  • ใช้รูปภาพที่มีสัดส่วนภาพเหมาะสม
  • หลีกเลี่ยงการใช้ไลบรารี JavaScript ส่วนหน้าที่มีช่องโหว่ด้านความปลอดภัยที่เป็นที่รู้จัก
  • บันทึกข้อผิดพลาดเบราว์เซอร์ลงในคอนโซล

ดูเรียกใช้ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูวิธีใช้แผงการตรวจสอบเพื่อปรับปรุงคุณภาพของหน้าเว็บ

ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ที่ขับเคลื่อนแผงการตรวจสอบได้ที่ Lighthouse

จำลองข้อความ Push ด้วยข้อมูลที่กําหนดเอง

การจําลองข้อความ Push มีให้บริการในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์มาระยะหนึ่งแล้ว โดยมีข้อจํากัด 1 ข้อคือคุณไม่สามารถส่งข้อมูลที่กําหนดเองได้ แต่ตอนนี้คุณทำได้แล้วด้วยกล่องข้อความ Push ใหม่ที่จะมาในแผง Service Worker ใน Chrome 63 ลองเลย

  1. ไปที่การสาธิต Push แบบง่าย
  2. คลิกเปิดใช้ข้อความ Push
  3. คลิกอนุญาตเมื่อ Chrome ขอให้คุณอนุญาตการแจ้งเตือน
  4. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  5. ไปที่แผง Service Worker

  6. เขียนข้อความในกล่องข้อความ Push

    การจําลองข้อความ Push ด้วยข้อมูลที่กําหนดเอง

    รูปที่ 1 การจําลองข้อความ Push ด้วยข้อมูลที่กําหนดเองผ่านกล่องข้อความ Push ในแผง Service Worker

  7. คลิก Push เพื่อส่งการแจ้งเตือน

    ข้อความ Push ที่จำลอง

    รูปที่ 2 ข้อความ Push ที่จำลอง

ทริกเกอร์เหตุการณ์การซิงค์เบื้องหลังด้วยแท็กที่กําหนดเอง

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. ไปที่แผง Service Worker
  3. ป้อนข้อความในกล่องข้อความซิงค์
  4. คลิกซิงค์

การทริกเกอร์เหตุการณ์การซิงค์เบื้องหลังที่กําหนดเอง

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

ดาวน์โหลดแชแนลตัวอย่าง

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools