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

Sofia Emelianova
Sofia Emelianova
GitHub

ส่วนใหม่สำหรับพร็อพเพอร์ตี้ที่กำหนดเองในองค์ประกอบ > รูปแบบ

ตอนนี้แผงองค์ประกอบรองรับกฎแอตทริบิวต์ @property CSS แล้ว ซึ่งจะช่วยให้คุณกำหนดคุณสมบัติที่กำหนดเองของ CSS ได้อย่างชัดแจ้งและลงทะเบียนในสไตล์ชีตโดยไม่ต้องเรียกใช้ JavaScript ใดๆ

หากต้องการตรวจสอบพร็อพเพอร์ตี้ที่กำหนดเองซึ่งลงทะเบียนไว้ ในองค์ประกอบ > รูปแบบ ให้วางเมาส์เหนือชื่อพร็อพเพอร์ตี้และดูคำอธิบายในเคล็ดลับเครื่องมือ ในเคล็ดลับเครื่องมือ ให้คลิกลิงก์เพื่อดูพร็อพเพอร์ตี้ที่ลงทะเบียนในส่วน @property ที่ยุบได้

ปัญหาเกี่ยวกับ Chromium: 1471102, 1471103, 1471105

การปรับปรุงการลบล้างในเครื่องเพิ่มเติม

จากการปรับปรุงที่ต่อเนื่องในเวอร์ชันก่อนหน้า การลบล้างในเครื่องจะดำเนินการต่อไปนี้

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

    กล่องโต้ตอบที่นําคุณไปยังโค้ดต้นฉบับแทนที่จะเป็นไฟล์ที่แมปที่มา

  • แผงเครือข่ายจะมีคอลัมน์มีการลบล้างใหม่ และตัวกรอง has-overrides:[content|headers|yes|no] ที่เกี่ยวข้อง หากต้องการดูคอลัมน์มีการลบล้าง ให้คลิกขวาที่ส่วนหัวของตารางแล้วเลือก

    การกรองค่า "has-overrides:yes" ในคอลัมน์ "มีการลบล้าง"

  • ในแหล่งที่มา > การลบล้าง ตัวเลือกเมนูลบการลบล้างทั้งหมดได้รับการแทนที่ด้วยตัวเลือกลบซึ่งทำงานอย่างแม่นยำ

    ก่อนและหลังการแทนที่ "ลบการลบล้างทั้งหมด" ด้วย "ลบ"

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

ตัวเลือกลบใหม่จะแสดงข้อความเตือนและการยืนยันก่อน แล้วจึงลบโฟลเดอร์ที่คุณคลิกซึ่งมีเนื้อหาทั้งหมดในโฟลเดอร์นั้น

หากต้องการนำตัวเลือกก่อนหน้ากลับมา ให้เลือก ช่องทำเครื่องหมาย เปิดใช้ "ลบการลบล้างทั้งหมดชั่วคราว" ใน การตั้งค่า การตั้งค่า > การทดสอบ

ปัญหาเกี่ยวกับ Chromium: 1472952, 1416338, 1472580, 1473681 1475668

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

ผลลัพธ์ก่อนและหลังการค้นหาจะแสดงรายการที่ตรงกันทั้งหมดต่อบรรทัด

นอกจากนี้ Search ยังได้รับการปรับปรุงความเร็วอีกด้วย ดูการเปรียบเทียบก่อน (ซ้าย) และหลัง (ขวา) ในวิดีโอถัดไป

สุดท้าย การค้นหารองรับการละเว้นข้อมูล และจะไม่แสดงผลการค้นหาจากไฟล์ที่ถูกละเว้น

ปัญหาเกี่ยวกับ Chromium: 1468875, 1472019

แผงแหล่งที่มาที่ได้รับการปรับปรุง

พื้นที่ทำงานที่มีประสิทธิภาพในแผงแหล่งที่มา

ฟีเจอร์พื้นที่ทำงานในแผงแหล่งที่มาเป็นฟีเจอร์ใหม่ที่มีประสิทธิภาพมากขึ้น ดังนี้

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

แหล่งที่มา > พื้นที่ทำงาน ช่วยให้คุณซิงค์การเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บกับไฟล์ต้นฉบับได้โดยตรง

ดูการตั้งค่าใหม่และขั้นตอนการทำงานจริง

ปัญหาเกี่ยวกับ Chromium: 1473771, 1473880, 1473963, 1474686, 1474687

เรียงลำดับแผงในแหล่งที่มาใหม่

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

ปัญหาเกี่ยวกับ Chromium: 1473758

การไฮไลต์ไวยากรณ์และการจัดรูปแบบสำหรับสคริปต์ประเภทอื่นๆ

ตอนนี้แผงแหล่งที่มาทำสิ่งต่อไปนี้ได้แล้ว

  • พิมพ์ JavaScript ในหน้าภายในประเภทสคริปต์ต่อไปนี้ module, importmap, speculationrules
  • ไฮไลต์ไวยากรณ์ของสคริปต์ประเภท importmap และ speculationrules ซึ่งทั้ง 2 ประเภทมี JSON

ก่อนและหลังการจัดรูปแบบและไฮไลต์ไวยากรณ์ของประเภทสคริปต์กฎการคาดเดา

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับกฎการคาดเดาที่หน้าการแสดงผลล่วงหน้าใน Chrome สำหรับการนำทางหน้าเว็บแบบทันที

ปัญหาเกี่ยวกับ Chromium: 1473875

จำลองฟีเจอร์สื่อที่ต้องการลดความโปร่งแสง

ตอนนี้ Chrome 118 รองรับฟีเจอร์สื่อของ prefers-reduced-transparency แล้ว ฟีเจอร์นี้ช่วยให้นักพัฒนาแอปปรับเนื้อหาเว็บตามค่ากำหนดที่ผู้ใช้เลือกเพื่อลดความโปร่งใสในระบบปฏิบัติการได้ เช่น การตั้งค่าลดความโปร่งใสใน macOS

หากต้องการจำลองฟีเจอร์สื่อนี้ ให้เปิดแท็บการแสดงผล แล้วเลื่อนลงมาที่ฟีเจอร์ดังกล่าว

ปัญหา Chromium: 1424879

ประภาคาร 11

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 11 แล้ว สิ่งที่เห็นได้ชัดที่สุดคือเวอร์ชันนี้นำการนำทางเดิมออกและเพิ่มการตรวจสอบการช่วยเหลือพิเศษใหม่ รวมถึงเปลี่ยนแปลงวิธีให้คะแนนหมวดหมู่การช่วยเหลือพิเศษ

ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย ดูข้อมูลเบื้องต้นในการใช้แผง Lighthouse ใน DevTools ได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์

ปัญหาเกี่ยวกับ Chromium: 772558

ปรับปรุงการเข้าถึง

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

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

นอกจากนี้ ปัญหาต่างๆ เกี่ยวกับการประกาศของโปรแกรมอ่านหน้าจอได้รับการแก้ไขแล้ว

ปัญหาเกี่ยวกับ Chromium: 1470401, 1471301, 1474108, 1468631

ไฮไลต์เบ็ดเตล็ด

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

  • เครือข่าย: ไอคอนใหม่สำหรับประเภททรัพยากรยอดนิยม ได้แก่ media, wasm, websocket, manifest, fetch/xhr, json (1466298)
  • การอัปเดตสีเป็นสี Material 3 ในองค์ประกอบ UI จํานวนมาก โดยเฉพาะอย่างยิ่งในแผงองค์ประกอบและประสิทธิภาพ (1456690, 1472243)
  • ตอนนี้ปัญหาจะรักษาปัญหาเกี่ยวกับคุกกี้ไว้ในการนําทาง (1466601)
  • การปรับปรุงต่างๆ ของแอปพลิเคชัน > การโหลดล่วงหน้า โดยเฉพาะอย่างยิ่งตารางกริดที่จัดเรียงได้และรายละเอียดชุดกฎที่มีการแก้ไข (1410709)
  • การปรับปรุงต่างๆ ของตัวแก้ไขคำสั่งในการตรวจสอบโปรโตคอล โดยเฉพาะคำเตือนเกี่ยวกับอินพุตที่ไม่ถูกต้อง การแก้ไขคำสั่งที่ส่ง เครื่องมือแก้ไขสำหรับพารามิเตอร์ออบเจ็กต์ที่ไม่มีคีย์ที่กำหนดไว้ล่วงหน้า การรองรับ enum ที่ไม่ได้ระบุโดยการอ้างอิง ออบเจ็กต์ที่ไม่มีการอ้างอิงประเภท คำสั่งกรองตามสตริงย่อยที่ตรงกัน และอื่นๆ อีกมากมาย (1448050)
  • แผนภูมิวงกลมประสิทธิภาพมีเส้นขอบรอบช่องทั้งหมดของแผนภูมิวงกลม (1470147)
  • ตอนนี้แหล่งที่มาจะไม่ถือว่าขีดกลางเป็นอักขระของคำใน CSS (1471354)
  • ตอนนี้การเติมข้อความอัตโนมัติจะจัดเรียงคีย์เวิร์ดที่ใช้ CSS ในตอนท้ายเสมอ
  • ตัวกรองนิพจน์ทั่วไปรองรับการเว้นวรรคแล้ว (1346936)
  • การตรวจหาฟีเจอร์คิวรี่สื่อแบบคงที่ของ Elements (1472693)

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

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