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

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

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

ฟีเจอร์ใหม่

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

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

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

รายงาน Lighthouse

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

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

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

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

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

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

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

หากมีแนวคิดสำหรับการตรวจสอบ 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 วิธีที่คอนโซลใช้แสดงตัวอย่างออบเจ็กต์

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

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

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

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

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

เมนูการเลือกบริบทใหม่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ลองใช้ 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