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

Jecelyn Yeen

คำแนะนำสำหรับพร็อพเพอร์ตี้ CSS ที่ไม่ได้ใช้งาน

ตอนนี้ DevTools จะระบุรูปแบบ CSS ที่ถูกต้องแต่ไม่มีผลที่มองเห็นได้ ในแผงรูปแบบ เครื่องมือสำหรับนักพัฒนาเว็บจะทำให้พร็อพเพอร์ตี้ที่ไม่ได้ใช้งานจางลง วางเมาส์เหนือไอคอนข้างกฎเพื่อทำความเข้าใจว่าเหตุใดกฎจึงไม่มีผลที่มองเห็นได้

คำแนะนำสำหรับพร็อพเพอร์ตี้ CSS ที่ไม่ได้ใช้งาน

ปัญหาใน Chromium: 1178508

ตรวจหาตัวเลือก XPath และข้อความโดยอัตโนมัติในแผงเครื่องบันทึก

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

ตัวเลือก XPath และข้อความในแผงเครื่องบันทึก

ปัญหาใน Chromium: 1327206,1327209

ทีละขั้นตอนผ่านนิพจน์ที่คั่นด้วยคอมมา

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

ทีละขั้นตอนผ่านนิพจน์ที่คั่นด้วยคอมมา

ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บรองรับเฉพาะการก้าวผ่านนิพจน์ที่คั่นด้วยเครื่องหมายอัฒภาค

เมื่อพิจารณาโค้ดด้านล่าง

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Transpiler และ Minifier อาจเปลี่ยนให้เป็นนิพจน์ที่คั่นด้วยคอมมา

function bar(){return foo(),foo(),42}

ซึ่งทำให้เกิดความสับสนในระหว่างการแก้ไขข้อบกพร่องเนื่องจากลักษณะการก้าวผ่านของโค้ดที่ย่อและโค้ดที่เขียนนั้นแตกต่างกัน การใช้ Source Map เพื่อแก้ไขข้อบกพร่องของโค้ดที่ย่อขนาดในแง่ของโค้ดเดิมจะยิ่งสร้างความสับสนมากขึ้น เนื่องจากนักพัฒนาซอฟต์แวร์จะเห็นเครื่องหมายอัฒภาค (ซึ่งเครื่องมือเปลี่ยนเป็นคอมมา) แต่ดีบักเกอร์จะไม่หยุดที่เครื่องหมายดังกล่าว

ปัญหาใน Chromium: 1370200

การตั้งค่ารายการละเว้นที่ปรับปรุงแล้ว

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

แท็บรายการละเว้น

ปัญหาใน Chromium: 1356517

ไฮไลต์อื่นๆ

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

  • เติมชื่อพร็อพเพอร์ตี้ CSS โดยอัตโนมัติในแผงสไตล์เมื่อกด Space (1343316)
  • นำการเลื่อนอัตโนมัติออกในการแสดงเส้นทางของแผงองค์ประกอบ (1369734)

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

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

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

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

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

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