มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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.dev/vitals เมตริกของ Vitals

ช่องทาง Web Vitals

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

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

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

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

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

ข้อผิดพลาด CORS

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

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

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

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

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

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

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

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

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงผู้ปฏิบัติงานบนเว็บโดยเฉพาะภายใต้เฟรมที่สร้างผู้ปฏิบัติงานดังกล่าว

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

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

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

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

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

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

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

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

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

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

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

เปิดแผงเครือข่ายจาก 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

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

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

เครื่องมือดีบัก 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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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