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

Jecelyn Yeen

เครื่องมือสำหรับนักพัฒนาเว็บเริ่มทำงานได้เร็วขึ้น

ตอนนี้การเริ่มต้นเครื่องมือสำหรับนักพัฒนาเว็บจะเร็วขึ้นประมาณ 37% ในแง่ของการคอมไพล์ JavaScript (จาก 6.9 วินาทีเหลือ 5 วินาที) 🎉

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

จะมีบล็อกโพสต์เกี่ยวกับทีมวิศวกรที่กําลังจะมีขึ้นเพื่ออธิบายรายละเอียดเกี่ยวกับการติดตั้งใช้งาน โปรดอดใจรอ

ปัญหา Chromium: 1029427

เครื่องมือแสดงภาพมุม CSS ใหม่

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

มุม CSS

เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้มุม CSS (เช่น background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)) ไอคอนนาฬิกาจะแสดงข้างมุมในแผงสไตล์ คลิกไอคอนนาฬิกาเพื่อสลับ การซ้อนทับนาฬิกา คลิกที่ใดก็ได้ในนาฬิกาหรือลากเข็มเพื่อเปลี่ยนมุม

นอกจากนี้ ยังมีแป้นพิมพ์ลัดและเมาส์สำหรับเปลี่ยนค่ามุมด้วย โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบ

ปัญหา Chromium: 1126178, 1138633

จำลองรูปภาพประเภทที่ไม่รองรับ

DevTools เพิ่มการจําลองใหม่ 2 รายการในแท็บการแสดงผล ซึ่งช่วยให้คุณปิดใช้รูปแบบรูปภาพ AVIF และ WebP ได้ การจําลองใหม่เหล่านี้ช่วยให้นักพัฒนาแอปทดสอบสถานการณ์การโหลดรูปภาพต่างๆ ได้ง่ายขึ้นโดยไม่ต้องเปลี่ยนเบราว์เซอร์

สมมติว่าเรามีโค้ด HTML ต่อไปนี้เพื่อแสดงรูปภาพในรูปแบบ AVIF และ WebP สำหรับเบราว์เซอร์รุ่นใหม่ โดยมีรูปภาพ PNG สำรองสำหรับเบราว์เซอร์รุ่นเก่า

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

เปิดแท็บการแสดงผล เลือก "ปิดใช้รูปแบบรูปภาพ AVIF" แล้วรีเฟรชหน้า วางเมาส์เหนือ img src ตอนนี้ src รูปภาพปัจจุบัน (currentSrc) เป็นรูปภาพ WebP สำรอง

จำลองประเภทรูปภาพ

ปัญหา Chromium: 1130556

จำลองขนาดโควต้าพื้นที่เก็บข้อมูลในแผงพื้นที่เก็บข้อมูล

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

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

จำลองขนาดโควต้าพื้นที่เก็บข้อมูล

ปัญหา Chromium: 945786, 1146985

เลน Web Vitals ใหม่ในการบันทึกของแผงประสิทธิภาพ

ตอนนี้การบันทึกประสิทธิภาพมีตัวเลือกในการแสดงข้อมูล Web Vitals แล้ว

หลังจากบันทึกประสิทธิภาพการโหลดแล้ว ให้เปิดใช้ช่องทำเครื่องหมาย Web Vitals ในแผงประสิทธิภาพเพื่อดูช่องทาง Web Vitals ใหม่

เลนในปัจจุบันมีข้อมูลของ Web Vitals เช่น First Contentful Paint (FCP), การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) และ Layout Shift (LS)

ไปที่ web.dev/vitals เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ด้วยเมตริก Web Vitals

เลน Web Vitals

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

รายงานข้อผิดพลาด CORS ในแผงเครือข่าย

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

ในแผงเครือข่าย ให้สังเกตคำขอเครือข่าย CORS ที่ล้มเหลว คอลัมน์สถานะจะแสดง"ข้อผิดพลาด CORS" วางเมาส์เหนือข้อผิดพลาด ตอนนี้เคล็ดลับเครื่องมือจะแสดงรหัสข้อผิดพลาด ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเฉพาะสถานะทั่วไป "(failed)" สำหรับข้อผิดพลาด CORS

ซึ่งเป็นรากฐานของการเพิ่มประสิทธิภาพครั้งถัดไปในการให้คำอธิบายโดยละเอียดเกี่ยวกับปัญหา CORS

ข้อผิดพลาด CORS

ปัญหา Chromium: 1141824

การอัปเดตมุมมองรายละเอียดของเฟรม

ข้อมูลการแยกแบบข้ามต้นทางในมุมมองรายละเอียดเฟรม

ตอนนี้สถานะการแยกแบบข้ามต้นทางจะแสดงในส่วนความปลอดภัยและการแยก

ส่วนความพร้อมใช้งานของ API ใหม่จะแสดงความพร้อมใช้งานของ SharedArrayBuffer (SAB) และจะแชร์ได้โดยใช้ postMessage() หรือไม่

คําเตือนการเลิกใช้งานจะแสดงขึ้นหาก SAB และ postMessage() พร้อมใช้งานในปัจจุบัน แต่บริบทไม่ได้แยกต่างหากแบบข้ามต้นทาง ดูข้อมูลเพิ่มเติมเกี่ยวกับการแยกแบบข้ามต้นทางและเหตุผลที่ต้องใช้ฟีเจอร์นี้กับฟีเจอร์อย่าง SharedArrayBuffers ในบทความนี้

ข้อมูลข้ามแหล่งที่มา

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

ข้อมูล Web Worker ใหม่ในมุมมองรายละเอียดเฟรม

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

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

ข้อมูลผู้ปฏิบัติงานเกี่ยวกับเว็บ

ปัญหาเกี่ยวกับ Chromium: 1122507, 1051466

แสดงรายละเอียดเฟรมเปิดสำหรับหน้าต่างที่เปิดอยู่

ตอนนี้คุณดูรายละเอียดเกี่ยวกับเฟรมที่ทําให้หน้าต่างอื่นเปิดได้แล้ว

เลือกหน้าต่างที่เปิดอยู่ใต้แผนภูมิเฟรมเพื่อดูรายละเอียดหน้าต่าง คลิกลิงก์เงื่อนไขเริ่มต้น เฟรมเพื่อแสดงเงื่อนไขเริ่มต้นในแผงองค์ประกอบ

รายละเอียดเฟรมของเครื่องมือเปิด

ปัญหา Chromium: 1107766

เปิดแผงเครือข่ายจากแผง Service Workers

ดูข้อมูลการกำหนดเส้นทางคำขอของ Service Worker (SW) ทั้งหมดด้วยลิงก์คำขอเครือข่ายใหม่ ซึ่งจะช่วยให้นักพัฒนาซอฟต์แวร์มีบริบทเพิ่มเติมเมื่อแก้ไขข้อบกพร่องของ SW

ไปที่ Application > Service Workers คลิก Network requests ของ SW แผงเครือข่ายจะเปิดขึ้นในแผงด้านล่าง ซึ่งแสดงคําขอทั้งหมดที่เกี่ยวข้องกับ Service Worker (คําขอเครือข่ายจะกรองตาม "is:service-worker-intercepted")

เปิดแผงเครือข่ายจาก Service Worker

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

ตัวเลือกการคัดลอกใหม่ในแผงเครือข่าย

คัดลอกค่าพร็อพเพอร์ตี้

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

คัดลอกค่าพร็อพเพอร์ตี้

ในแผงเครือข่าย ให้คลิกคำขอเครือข่ายเพื่อเปิดแผงส่วนหัว คลิกขวาที่พร็อพเพอร์ตี้ใดพร็อพเพอร์ตี้หนึ่งในส่วนเหล่านี้: เพย์โหลดคำขอ (JSON) พารามิเตอร์สตริงการค้นหาของข้อมูลแบบฟอร์ม ส่วนหัวคำขอ ส่วนหัวการตอบกลับ

จากนั้นเลือกคัดลอกค่าเพื่อคัดลอกค่าพร็อพเพอร์ตี้ไปยังคลิปบอร์ด

ปัญหา Chromium: 1132084

คัดลอกสแต็กเทรซสําหรับเครื่องมือริเริ่มเครือข่าย

คลิกขวาที่คำขอเครือข่าย แล้วเลือกคัดลอกสแต็กเทรซเพื่อคัดลอกสแต็กเทรซไปยังคลิปบอร์ด

คัดลอกสแต็กเทรซ

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

การอัปเดตการแก้ไขข้อบกพร่อง Wasm

แสดงตัวอย่างค่าตัวแปร Wasm เมื่อเมาส์โอเวอร์

เมื่อวางเมาส์เหนือตัวแปรในการแยก WebAssembly (Wasm) ขณะหยุดชั่วคราวในเบรกพอยท์ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงค่าปัจจุบันของตัวแปร

ในแผงแหล่งที่มา ให้เปิดไฟล์ Wasm, วางจุดหยุดพัก และรีเฟรชหน้า วางเมาส์เหนือตัวแปรเพื่อดูค่า

แสดงตัวอย่างตัวแปร Wasm เมื่อวางเมาส์เหนือ

ปัญหาเกี่ยวกับ Chromium: 1058836, 1071432

ประเมินตัวแปร Wasm ในคอนโซล

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

ในตัวอย่างนี้ เราใส่เบรกพอยท์ในบรรทัด local.get $input เมื่อแก้ไขข้อบกพร่อง ให้พิมพ์ $input ในคอนโซล ซึ่งจะแสดงค่าปัจจุบันของตัวแปร ซึ่งในกรณีนี้คือ 4

ประเมินตัวแปร Wasm ในคอนโซล

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

หน่วยวัดที่สอดคล้องกันสำหรับขนาดไฟล์/หน่วยความจำ

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใช้ kB ในการแสดงขนาดไฟล์/หน่วยความจำอย่างสม่ำเสมอ ก่อนหน้านี้เครื่องมือสำหรับนักพัฒนาเว็บผสม kB (1000 ไบต์) และ KiB (1024 ไบต์) ตัวอย่างเช่น ก่อนหน้านี้แผงเครือข่ายใช้ป้ายกํากับ "kB" แต่ทําการคํานวณโดยใช้ KiB ซึ่งทําให้เกิดความสับสนโดยไม่จําเป็น

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

ไฮไลต์องค์ประกอบจำลองในแผงองค์ประกอบ

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

ไฮไลต์องค์ประกอบจำลอง

ปัญหา Chromium: 1143833

ฟีเจอร์ทดลอง

เครื่องมือแก้ไขข้อบกพร่อง Flexbox ของ CSS

เครื่องมือแก้ไขข้อบกพร่อง Flexbox กำลังจะพร้อมใช้งาน

สำหรับผู้เริ่มต้นใช้งาน ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงป้าย flex ในแผงองค์ประกอบสำหรับองค์ประกอบที่มีการใช้ display: flex

นอกจากนี้ ระบบจะเพิ่มไอคอนการจัดตำแหน่งใหม่ในพร็อพเพอร์ตี้ Flexbox ต่อไปนี้

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

นอกจากนี้ ไอคอนเหล่านี้ยังคำนึงถึงบริบทด้วย ระบบจะปรับทิศทางของไอคอนตามปัจจัยต่อไปนี้

  • flex-direction
  • direction
  • writing-mode

ไอคอนเหล่านี้มีไว้เพื่อช่วยให้คุณเห็นภาพเลย์เอาต์ Flexbox ของหน้าเว็บได้ดีขึ้น

การแก้ไขข้อบกพร่อง Flex ของ CSS

นี่คือเอกสารการออกแบบของฟีเจอร์เครื่องมือของ Flexbox โดยเราจะเพิ่มฟีเจอร์อื่นๆ เพิ่มเติมในเร็วๆ นี้

ทดลองใช้และแจ้งให้เราทราบว่าคุณคิดอย่างไร

ปัญหาเกี่ยวกับ Chromium: 1144090, 1139945

ปรับแต่งแป้นพิมพ์ลัดของคอร์ด

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

ตอนนี้คุณสร้างคอร์ด (หรือที่เรียกว่าทางลัดแบบกดแป้นหลายครั้ง) ในเครื่องมือแก้ไขทางลัดได้แล้ว

ไปที่การตั้งค่า > ทางลัด วางเมาส์เหนือคำสั่ง แล้วคลิกปุ่มแก้ไข (ไอคอนรูปปากกา) เพื่อปรับแต่งทางลัดของคอร์ด

แป้นพิมพ์ลัดสำหรับคอร์ด

ปัญหา Chromium: 174309

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools