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

Jecelyn Yeen

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

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

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

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

ปัญหา Chromium: 1029427

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

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

มุม CSS

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

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

ปัญหา Chromium: 1126178, 1138633

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

เครื่องมือสำหรับนักพัฒนาเว็บได้เพิ่มการจำลองใหม่ 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

ปัญหา Chromium: 1141824

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

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

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

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

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

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

ปัญหา Chromium: 1139899

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

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

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

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

ปัญหา Chromium: 1122507, 1051466

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

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

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

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

ปัญหา Chromium: 1107766

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

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

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

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

ปัญหา Chromium: ไม่มี

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

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

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

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

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

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

ปัญหา Chromium: 1132084

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

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

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

ปัญหา Chromium: 1139615

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1127914

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

ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บใช้ kB ในการแสดงขนาดไฟล์/หน่วยความจำอย่างสม่ำเสมอ ก่อนหน้านี้ DevTools ผสม 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

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

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

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

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

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