มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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), Largest Contentful Paint (LCP) และ Layout Shift (LS)

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

เลน Web Vitals

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

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

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

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

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

ข้อผิดพลาด CORS

ปัญหาใน Chromium: 1141824

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

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

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

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

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

ข้อมูลแบบข้ามต้นทาง

ปัญหาใน Chromium: 1139899

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดง Web Worker เฉพาะภายใต้เฟรมที่สร้างขึ้น

ในแผงแอปพลิเคชัน ให้ขยายเฟรมที่มี Web Worker แล้วเลือก Worker ในโครงสร้างWorker เพื่อดูรายละเอียดของ Web Worker

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

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

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

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

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

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

ปัญหาใน Chromium: 1107766

เปิดแผงเครือข่ายจากบานหน้าต่าง Service Worker

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1132084

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

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

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

ปัญหาใน Chromium: 1139615

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1127914

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

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

ปัญหาใน Chromium: 1035309

ไฮไลต์องค์ประกอบเสมือนในแผงองค์ประกอบ

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

องค์ประกอบเสมือนของไฮไลต์

ปัญหาใน 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 ของหน้าเว็บได้ดียิ่งขึ้น

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

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

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

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

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

DevTools ได้เพิ่มการรองรับแบบทดลองสำหรับปรับแต่งแป้นพิมพ์ลัดตั้งแต่รุ่นที่แล้ว

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

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

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

ปัญหาใน Chromium: 174309

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

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

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

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

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

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