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

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

ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บเริ่มทำงานเร็วขึ้นประมาณ 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 Vitals ได้ที่ web.dev/vitals

ช่องทาง Web Vitals

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

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

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

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

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

ข้อผิดพลาด CORS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูข้อมูลการกำหนดเส้นทางคำขอโปรแกรมทำงานของบริการ (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 ใน Console จะแสดงค่าปัจจุบันของตัวแปรซึ่งในกรณีนี้คือ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59