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

Jecelyn Yeen

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

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

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

เราจะเผยแพร่บล็อกโพสต์ด้านวิศวกรรมที่อธิบายการใช้งานโดยละเอียดในเร็วๆ นี้ โปรดอดใจรอ

ปัญหา Chromium: 1029427

เครื่องมือแสดงภาพมุม 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.dev/vitals เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ด้วยเมตริก Web Vitals

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

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

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

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

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

ปัญหา Chromium: 1141824

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

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

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

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

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

ปัญหา Chromium: 1139899

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

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

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

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

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

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

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

ปัญหา Chromium: 1107766

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1132084

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

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

ปัญหา Chromium: 1139615

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1127914

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใช้ kB ในการแสดงขนาดไฟล์/หน่วยความจำอย่างสม่ำเสมอ ก่อนหน้านี้ DevTools ใช้ kB (1,000 ไบต์) และ KiB (1,024 ไบต์) ผสมกัน ตัวอย่างเช่น ก่อนหน้านี้แผงเครือข่ายใช้ป้ายกํากับ "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 ของหน้าเว็บได้ดีขึ้น

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

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

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

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

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

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

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

ปัญหา Chromium: 174309

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

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

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

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

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

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

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