มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 ต่างๆ ในแผงนี้จะชัดเจนขึ้นและไม่มีความซ้ำซ้อน
  • การตั้งค่าที่ดีขึ้น ดูคำแนะนำที่ดีกว่าในการลากและวางโฟลเดอร์ หรือคลิกลิงก์เพื่อเลือกโฟลเดอร์

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

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

ปัญหาเกี่ยวกับ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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