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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

ปัญหา Chromium: 1471102, 1471103, 1471105

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ 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

Lighthouse 11

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

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

ปัญหาของ Chromium: 772558

ปรับปรุงการช่วยเหลือพิเศษ

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

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

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

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

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

การแก้ไขและการปรับปรุงที่สำคัญในรุ่นนี้

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

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

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

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

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

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

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

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

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