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

Kayce Basques

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

• การสนับสนุนการแก้ไขข้อบกพร่องจากระยะไกลแบบหลายไคลเอ็นต์
• Workspaces 2.0
• การตรวจสอบใหม่ 4 รายการ
• จำลองข้อความ Push ด้วยข้อมูลที่กำหนดเอง
• ทริกเกอร์เหตุการณ์การซิงค์ในเบื้องหลังด้วยแท็กที่กำหนดเอง

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

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

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

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

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

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

Workspace 2.0

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

Workspace 2.0 ต่อยอดมาจากเวอร์ชัน 1.0 ซึ่งเพิ่ม UX ที่เป็นประโยชน์มากยิ่งขึ้นและการแมปอัตโนมัติเกี่ยวกับ Transpiled โค้ด เดิมทีฟีเจอร์นี้มีกำหนดเปิดตัวหลังงานประชุมนักพัฒนาซอฟต์แวร์ 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

   

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

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

   

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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