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

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

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

ดูหมายเหตุฉบับวิดีโอของรุ่นเหล่านี้ได้ที่ด้านล่าง หรืออ่านต่อเพื่อดูข้อมูลเพิ่มเติม

ฟีเจอร์ใหม่

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

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

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

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

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

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

Lighthouse ในงาน Google I/O ปี 2017

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อจะดูโค้ดทีละบรรทัด ให้กด Command (Mac) หรือ Control (Windows, Linux) ค้างไว้ แล้วคลิกเพื่อไปยังบรรทัดโค้ดนั้น DevTools จะไฮไลต์ปลายทางที่ข้ามได้ باللونน้ําเงิน

รูปที่ 5 ดำเนินการต่อไปยังส่วนนี้

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

ก้าวสู่การทำงานแบบไม่พร้อมกัน

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

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

ดูตัวอย่างได้จากวิดีโอสาธิตด้านล่างจากช่วงพูดคุยเกี่ยวกับ DevTools ที่ I/O

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

ตัวอย่างวัตถุที่แสดงข้อมูลมากขึ้นในคอนโซล

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

รูปที่ 6 วิธีที่คอนโซลใช้แสดงตัวอย่างวัตถุ

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

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

ตอนนี้เมนูการเลือกบริบทของ Console มีข้อมูลเพิ่มเติมเกี่ยวกับบริบทที่ใช้ได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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