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

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

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

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

ฟีเจอร์ใหม่

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

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

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

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

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

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

Lighthouse ในงาน Google I/O '17

ดูการพูดคุยเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บจาก Google I/O '17 ด้านล่างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการผสานรวม 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) ค้างไว้ แล้วคลิกเพื่อไปยังโค้ดบรรทัดนั้น DevTools จะไฮไลต์ปลายทางที่ข้ามได้เป็นสีน้ำเงิน

รูปที่ 5 ดำเนินการต่อมายังจุดนี้

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

เริ่มต้นใช้งาน Async

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

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

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

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

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

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

รูปที่ 6 วิธีที่ Console ใช้เพื่อแสดงตัวอย่างออบเจ็กต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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