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

Kayce Basques

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

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

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

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

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

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

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

พื้นที่ทำงาน 2.0

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

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

ลองดูส่วน "การสร้าง" (ประมาณ 14:28) ของ DevTools Talk จาก CDS 2016 เพื่อดูการใช้งาน Workspace 2.0

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

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

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

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

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

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

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

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

  6. เขียนอะไรก็ได้ในกล่องข้อความพุช

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube

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

รายการของทุกอย่างที่อยู่ในชุดมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59