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

Kayce Basques

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

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

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

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

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

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

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

Workspace 2.0

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

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

ดูส่วน "การเขียน" (ประมาณ 14:28 น.) ของการบรรยายเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บจาก CDS 2016 เพื่อดูการทำงานของ Workspace 2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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