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

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

• แผงการตรวจสอบใหม่ซึ่งประกอบด้วยการทดสอบ Progressive Web App, ประสิทธิภาพ, การช่วยเหลือพิเศษ และ แนวทางปฏิบัติแนะนำ
• ป้ายของบุคคลที่สาม ค้นหาว่าบุคคลที่สามใดที่ส่งคำขอเครือข่ายและลงชื่อเข้าใช้ คอนโซล และการเรียกใช้ JavaScript
• ไปต่อที่นี่ ท่าทางสัมผัสใหม่ที่ช่วยให้ขั้นตอนการแก้ไขข้อบกพร่องของ JavaScript เร็วขึ้น
• การแก้ไขข้อบกพร่องที่คาดการณ์ได้สำหรับ JavaScript แบบอะซิงโครนัส
• แสดงตัวอย่างออบเจ็กต์ในคอนโซล
• ข้อมูลอัปเดตแบบเรียลไทม์ในแท็บความครอบคลุม
• เมนูใหม่สำหรับการเลือกบริบทในคอนโซล
• ตัวเลือกการควบคุมเครือข่ายที่ง่ายขึ้น
• สแต็กเทรซแบบไม่พร้อมกันจะเปิดอยู่โดยค่าเริ่มต้น

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

ฟีเจอร์ใหม่

แผงการตรวจสอบใหม่ที่ขับเคลื่อนโดย Lighthouse

ตอนนี้แผงการตรวจสอบขับเคลื่อนโดย Lighthouse Lighthouse มอบชุด เพื่อวัดคุณภาพของหน้าเว็บ

คะแนนด้านบนของ Progressive Web App, ประสิทธิภาพ, การช่วยเหลือพิเศษและแนวทางปฏิบัติแนะนำคือคะแนนรวมของแต่ละรายการ หมวดหมู่ต่างๆ ส่วนที่เหลือของรายงานเป็นรายละเอียดของการทดสอบแต่ละรายการที่ใช้กำหนดคะแนนของคุณ ปรับปรุงคุณภาพของหน้าเว็บด้วยการแก้ไขการทดสอบที่ไม่ผ่าน

รูปที่ 1 รายงาน Lighthouse

วิธีตรวจสอบหน้าเว็บ

1. คลิกแท็บการตรวจสอบ
2. คลิกดำเนินการตรวจสอบ
3. คลิกดำเนินการตรวจสอบ Lighthouse ตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บเพื่อจำลองอุปกรณ์เคลื่อนที่ และเรียกใช้ ทดสอบเทียบกับหน้าเว็บ จากนั้นแสดงผลลัพธ์ในแผงการตรวจสอบ

ประภาคารที่งาน Google I/O ปี 2017

อ่านการบรรยายเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บจาก Google I/O ปี 2017 ด้านล่างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการผสานรวมของ Lighthouse ด้านล่าง ในเครื่องมือสำหรับนักพัฒนาเว็บ

มีส่วนร่วมใน Lighthouse

Lighthouse เป็นโปรเจ็กต์โอเพนซอร์ส เพื่อเรียนรู้วิธีการทำงานและให้การสนับสนุน ก็ดูการพูดคุยของ Lighthouse จากงาน Google I/O '17 ได้ที่ด้านล่าง

หากมีแนวคิดสำหรับการตรวจสอบ Lighthouse โพสต์ที่นี่เลย

ป้ายบุคคลที่สาม

ใช้ป้ายของบุคคลที่สามเพื่อรับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับเอนทิตีที่ส่งคำขอเครือข่ายใน เข้าสู่ระบบคอนโซล และเรียกใช้ JavaScript

รูปที่ 2 การวางเมาส์เหนือป้ายบุคคลที่สามในแผงเครือข่าย

รูปที่ 3 การวางเมาส์เหนือป้ายของบุคคลที่สามในคอนโซล

วิธีเปิดใช้ป้ายของบุคคลที่สาม

1. เปิดเมนูคำสั่ง
2. เรียกใช้คำสั่ง Show third party badges

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

รูปที่ 4 จัดกลุ่มตามผลิตภัณฑ์ในแท็บด้านล่าง

ท่าทางสัมผัสใหม่สำหรับ "ดำเนินการต่อมาที่นี่"

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

ขณะดูโค้ด ให้กด Command (Mac) หรือ Control (Windows, Linux) และ แล้วคลิกเพื่อไปยังบรรทัดของโค้ดนั้น เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์ปลายทางที่ข้ามได้เป็นสีน้ำเงิน

รูปที่ 5 ดำเนินการต่อมาที่นี่

โปรดดูเริ่มต้นใช้งานการดีบัก JavaScript เพื่อเรียนรู้พื้นฐานการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บ

เข้าสู่อะซิงโครนัส

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

ท่าทางสัมผัสใหม่สำหรับ "ดำเนินการต่อไปที่นี่" ใช้งานกับโค้ดแบบอะซิงโครนัสได้ด้วย เมื่อคุณกดค้าง Command (Mac) หรือ Control (Windows, Linux) จะไฮไลต์เครื่องมือสำหรับนักพัฒนาเว็บที่ข้ามได้ ปลายทางแบบอะซิงโครนัสสีเขียว

ดูตัวอย่างได้จากการสาธิตเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในงาน I/O ด้านล่าง

การเปลี่ยนแปลง

แสดงตัวอย่างออบเจ็กต์ที่ให้ข้อมูลมากขึ้นในคอนโซล

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

รูปที่ 6 วิธีที่คอนโซลใช้แสดงตัวอย่างออบเจ็กต์

รูปที่ 7 ตอนนี้ Console แสดงตัวอย่างออบเจ็กต์อย่างไร

เมนูการเลือกบริบทที่ให้ข้อมูลมากขึ้นในคอนโซล

ตอนนี้เมนูการเลือกบริบทของคอนโซลมีข้อมูลเพิ่มเติมเกี่ยวกับบริบทที่พร้อมใช้งานแล้ว

• ชื่อจะอธิบายว่าสินค้าแต่ละรายการคืออะไร
• คำบรรยายใต้ชื่ออธิบายโดเมนของรายการดังกล่าว
• วางเมาส์เหนือบริบท iframe เพื่อไฮไลต์ในวิวพอร์ต

รูปที่ 8 การวางเมาส์เหนือ iframe ในเมนูการเลือกบริบทใหม่จะไฮไลต์ iframe ดังกล่าวใน วิวพอร์ต

ข้อมูลอัปเดตแบบเรียลไทม์ในแท็บความครอบคลุม

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

รูปที่ 9 การโหลดและการโต้ตอบกับหน้าเว็บโดยใช้แท็บความครอบคลุมเดิม

รูปที่ 10 การโหลดและการโต้ตอบกับหน้าเว็บโดยใช้แท็บความครอบคลุมใหม่

ตัวเลือกการควบคุมเครือข่ายที่ง่ายขึ้น

เมนูการควบคุมเครือข่ายในแผงเครือข่ายและประสิทธิภาพมีการปรับให้เรียบง่ายขึ้นเพื่อให้ มีตัวเลือกเพียง 3 ตัวเลือกเท่านั้น ได้แก่ ออฟไลน์และ 3G ที่ช้า ซึ่งพบได้ทั่วไปในประเทศต่างๆ เช่น อินเดีย และ 3G ที่รวดเร็ว ซึ่งพบได้ทั่วไปในประเทศต่างๆ เช่น สหรัฐอเมริกา

รูปที่ 11 ตัวเลือกการควบคุมเครือข่ายแบบใหม่

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

สแต็กแบบไม่พร้อมกันจะเปิดอยู่โดยค่าเริ่มต้น

เราได้นำช่องทำเครื่องหมายAsyncออกจากแผงAsyncแล้ว เปิดใช้สแต็กเทรซที่ไม่พร้อมกันแล้วโดย "ค่าเริ่มต้น" ก่อนหน้านี้ ตัวเลือกนี้เป็นแบบเลือกใช้เนื่องจากค่าใช้จ่ายด้านประสิทธิภาพ ค่าใช้จ่ายในการดำเนินการตอนนี้ น้อยที่สุด เพื่อเปิดใช้ฟีเจอร์นี้โดยค่าเริ่มต้น หากต้องการปิดใช้สแต็กเทรซแบบไม่พร้อมกัน คุณจะปิดฟีเจอร์นี้ได้ในการตั้งค่าหรือโดยเรียกใช้ Do not capture async stack traces ในเมนูคำสั่ง

เครื่องมือสำหรับนักพัฒนาเว็บที่ Google I/O ปี 2017

อ่านการบรรยายของ Paul Ireland ในตำนานด้านล่างเพื่อดูข้อมูลเพิ่มเติมว่าทีมเครื่องมือสำหรับนักพัฒนาเว็บทำอะไรบ้าง ทำมาในปีที่ผ่านมา และธีมสำคัญๆ ที่พวกเขากำลังแก้ไขในอนาคตอันใกล้

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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