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

การสนับสนุนการแก้ไขข้อบกพร่องสำหรับการละเมิด Trusted Types

เบรกพอยท์ในการละเมิด Trusted Type

ตอนนี้คุณตั้งค่าเบรกพอยต์และตรวจหาข้อยกเว้นเกี่ยวกับการละเมิด Trusted Type ในแผงแหล่งที่มา ได้แล้ว

API ของ Trusted Types ช่วยป้องกันช่องโหว่ของ Cross-site Scripting ที่อิงตาม DOM ดูวิธี เขียน ตรวจสอบ และดูแลแอปพลิเคชันให้ปราศจากช่องโหว่ DOM XSS ด้วย Trusted Types ที่นี่

ในแผงแหล่งที่มา ให้เปิดแผงแถบด้านข้างของดีบักเกอร์ ขยายส่วนเบรกพอยท์การละเมิด CSP แล้วเลือกช่องทำเครื่องหมายการละเมิด Trusted Types เพื่อหยุดชั่วคราวใน ข้อยกเว้น ลองด้วยตัวคุณเองในหน้าการสาธิตนี้

ปัญหาใน Chromium: 1142804

ลิงก์ปัญหาในแผงแหล่งที่มาไปยังแท็บปัญหา

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

ปัญหาใน Chromium: 1150883

จับภาพหน้าจอของโหนดนอกเหนือจากวิวพอร์ต

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

ในแผงองค์ประกอบ ให้คลิกขวาที่องค์ประกอบ แล้วเลือกจับภาพหน้าจอของโหนด

ปัญหาใน Chromium: 1003629

แท็บโทเค็นความน่าเชื่อถือใหม่สำหรับคำขอจากเครือข่าย

ตรวจสอบคำขอเครือข่ายโทเค็นความน่าเชื่อถือด้วยแท็บโทเค็นความน่าเชื่อถือใหม่

โทเค็นความน่าเชื่อถือเป็น API ใหม่ที่จะช่วยต่อสู้กับการประพฤติมิชอบและแยกบ็อตออกจากมนุษย์จริงโดยไม่ต้องติดตามแบบพาสซีฟ ดูวิธีเริ่มต้นใช้งานโทเค็นความน่าเชื่อถือ

การรองรับการแก้ไขข้อบกพร่องเพิ่มเติมจะพร้อมใช้งานในรุ่นถัดไป

ปัญหาใน Chromium: 1126824

Lighthouse 7 ในแผง Lighthouse

ตอนนี้แผง Lighthouse กำลังเรียกใช้ Lighthouse 7 ดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น

การตรวจสอบใหม่ใน Lighthouse 7 มีดังนี้

• โหลดรูปภาพ Largest Contentful Paint (LCP) ล่วงหน้า ตรวจสอบว่าได้โหลดรูปภาพที่ใช้โดยองค์ประกอบ LCP ล่วงหน้าเพื่อปรับปรุงเวลา LCP หรือไม่
• ปัญหาที่บันทึกไว้ในแผง Issues แสดงรายการปัญหาที่ยังไม่ได้รับการแก้ไขในแผง Issues
• Progressive Web App (PWA) หมวดหมู่ PWA มีการเปลี่ยนแปลงอย่างมาก

• ตอนนี้กลุ่มติดตั้งได้ทำงานด้วยการตรวจสอบความสามารถทั้งหมดที่เปิดใช้เกณฑ์การติดตั้งได้ของ Chrome สัญญาณเหล่านี้เป็นสัญญาณเดียวกันกับที่เห็นในบานหน้าต่างไฟล์ Manifest

  • การตรวจสอบ "ลงทะเบียน Service Worker…" จะย้ายไปที่กลุ่มเพิ่มประสิทธิภาพ PWA และการตรวจสอบ "ใช้ HTTPS" จะรวมอยู่ในการตรวจสอบ "ข้อกำหนดด้านการติดตั้ง" ที่สำคัญ
  • ระบบจะนำกลุ่มรวดเร็วและเชื่อถือได้ออก เนื่องจากการตรวจสอบ "ข้อกำหนดในการติดตั้ง" ที่ปรับปรุงใหม่ รวมถึงการตรวจสอบความสามารถแบบออฟไลน์ เราจึงนำการตรวจสอบ "หน้าปัจจุบันและ start_url ตอบสนองด้วยรหัส 200 เมื่อ ออฟไลน์" ออก นอกจากนี้ เรายังนำการตรวจสอบ "การโหลดหน้าเว็บเร็วพอเมื่อใช้เครือข่ายมือถือ" ออกด้วย

ปัญหาใน Chromium: 772558

การอัปเดตแผงองค์ประกอบ

รองรับการบังคับสถานะ :target ของ CSS

ตอนนี้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อบังคับและตรวจสอบ:targetสถานะ CSS ได้แล้ว

ในแผงองค์ประกอบ ให้เลือกองค์ประกอบและสลับสถานะขององค์ประกอบ เปิดใช้ช่องทำเครื่องหมาย :target เพื่อบังคับและตรวจสอบรูปแบบ

ใช้:target Pseudo-Class เพื่อจัดรูปแบบองค์ประกอบเมื่อแฮชใน URL และรหัสขององค์ประกอบ เหมือนกัน ดูการสาธิตนี้เพื่อลองใช้ด้วยตัวคุณเอง ฟีเจอร์ใหม่ของเครื่องมือสำหรับนักพัฒนาเว็บนี้ช่วยให้คุณทดสอบ สไตล์ดังกล่าวได้โดยไม่ต้องเปลี่ยน URL ด้วยตนเองตลอดเวลา

ปัญหาใน Chromium: 1156628

แป้นพิมพ์ลัดใหม่เพื่อทำองค์ประกอบซ้ำ

ใช้แป้นพิมพ์ลัดทำซ้ำองค์ประกอบใหม่เพื่อโคลนองค์ประกอบได้ทันที

คลิกขวาที่องค์ประกอบในแผงองค์ประกอบ แล้วเลือกทำซ้ำองค์ประกอบ ระบบจะสร้างองค์ประกอบใหม่ ภายใต้องค์ประกอบนี้

หรือจะทำซ้ำองค์ประกอบด้วยแป้นพิมพ์ลัดก็ได้ โดยทำดังนี้

• Mac: Shift + Option + ⬇️
• Window/ Linux: Shift + Alt + ⬇️

ปัญหาใน Chromium: 1150797, 1150797

เครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ CSS ที่กำหนดเอง

ตอนนี้บานหน้าต่างรูปแบบจะแสดงเครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ CSS ที่กำหนดเอง

นอกจากนี้ คุณยังกดปุ่ม Shift ค้างไว้แล้วคลิกตัวเลือกสีเพื่อหมุนเวียนการแสดงค่าสีในรูปแบบ RGBA, HSLA และ Hex ได้ด้วย

ปัญหาใน Chromium: 1147016

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกพร็อพเพอร์ตี้ CSS

ตอนนี้คุณสามารถคัดลอกพร็อพเพอร์ตี้ CSS ได้เร็วขึ้นด้วยแป้นพิมพ์ลัดใหม่ 2-3 รายการ

เลือกองค์ประกอบในแผงองค์ประกอบ จากนั้นคลิกขวาที่คลาส CSS หรือพร็อพเพอร์ตี้ CSS ในแผงสไตล์เพื่อคัดลอกค่า

ตัวเลือกการคัดลอกสำหรับคลาส CSS

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

ตัวเลือกการคัดลอกสำหรับพร็อพเพอร์ตี้ CSS

• คัดลอกการประกาศ คัดลอกประกาศของบรรทัดปัจจุบัน
• คัดลอกพร็อพเพอร์ตี้ คัดลอกพร็อพเพอร์ตี้ของบรรทัดปัจจุบัน
• คัดลอกค่า: คัดลอกค่าของบรรทัดปัจจุบัน

ปัญหาใน Chromium: 1152391

การอัปเดตคุกกี้

ตัวเลือกใหม่ในการแสดงคุกกี้ที่ถอดรหัส URL แล้ว

ตอนนี้คุณเลือกดูค่าคุกกี้ที่ถอดรหัส URL แล้วได้ในบานหน้าต่างคุกกี้

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

ปัญหาใน Chromium: 997625

ล้างเฉพาะคุกกี้ที่มองเห็นได้

ตอนนี้ปุ่มล้างคุกกี้ทั้งหมดในแผงคุกกี้จะถูกแทนที่ด้วยปุ่มล้างคุกกี้ที่กรอง

ในแผงแอปพลิเคชัน > บานหน้าต่างคุกกี้ ให้ป้อนข้อความในกล่องข้อความเพื่อกรองคุกกี้ ใน ตัวอย่างนี้ เราจะกรองรายการตาม "PREF" คลิกปุ่มล้างคุกกี้ที่กรองเพื่อลบคุกกี้ที่มองเห็นได้ ล้างข้อความตัวกรอง แล้วคุณจะเห็นว่าคุกกี้อื่นๆ ยังคงอยู่ใน รายการ ก่อนหน้านี้คุณมีเพียงตัวเลือกในการล้างคุกกี้ทั้งหมด

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

ตัวเลือกใหม่ในการล้างคุกกี้ของบุคคลที่สามในบานหน้าต่างพื้นที่เก็บข้อมูล

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

ปัญหาใน Chromium: 1012337

แก้ไขคำแนะนำสำหรับไคลเอ็นต์ User Agent สำหรับอุปกรณ์ที่กำหนดเอง

ตอนนี้คุณแก้ไขคำแนะนำสำหรับไคลเอ็นต์ User Agent สำหรับอุปกรณ์ที่กำหนดเองได้แล้ว

ไปที่การตั้งค่า > อุปกรณ์ แล้วคลิกเพิ่มอุปกรณ์ที่กำหนดเอง... ขยายส่วนคำแนะนำสำหรับไคลเอ็นต์ User Agent เพื่อแก้ไขคำแนะนำสำหรับไคลเอ็นต์

คำแนะนำสำหรับไคลเอ็นต์ User Agent เป็นอีกทางเลือกสำหรับสตริง User Agent ซึ่งช่วยให้นักพัฒนาแอปเข้าถึง ข้อมูลเกี่ยวกับเบราว์เซอร์ของผู้ใช้ได้ในลักษณะที่รักษาความเป็นส่วนตัวและเป็นไปตามหลักสรีรศาสตร์ ดูข้อมูลเพิ่มเติมเกี่ยวกับ คำแนะนำสำหรับไคลเอ็นต์ User Agent ได้ที่ web.dev/user-agent-client-hints/

ปัญหาใน Chromium: 1073909

การอัปเดตแผงเครือข่าย

คงการตั้งค่า "บันทึกเครือข่าย"

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

ปัญหาใน Chromium: 1122580

ดูการเชื่อมต่อ WebTransport ในแผงเครือข่าย

ตอนนี้แผงเครือข่ายจะแสดงการเชื่อมต่อ WebTransport แล้ว

WebTransport เป็น API ใหม่ที่ให้การรับส่งข้อความแบบไคลเอ็นต์-เซิร์ฟเวอร์แบบสองทิศทางที่มีเวลาในการตอบสนองต่ำ ดูข้อมูลเพิ่มเติม เกี่ยวกับกรณีการใช้งานและวิธีแสดงความคิดเห็นเกี่ยวกับการใช้งานในอนาคตได้ที่ web.dev/webtransport/

ปัญหาใน Chromium: 1152290

เปลี่ยนชื่อ "ออนไลน์" เป็น "ไม่มีการควบคุมปริมาณ"

ตอนนี้ตัวเลือกการจำลองเครือข่าย "ออนไลน์" เปลี่ยนชื่อเป็น "ไม่มีการควบคุมปริมาณการใช้" แล้ว

ปัญหาใน Chromium: 1028078

ตัวเลือกการคัดลอกใหม่ในคอนโซล แผงแหล่งที่มา และแผงรูปแบบ

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกออบเจ็กต์ในคอนโซลและแผงแหล่งที่มา

ตอนนี้คุณสามารถคัดลอกค่าออบเจ็กต์ด้วยทางลัดใหม่ในแผงคอนโซลและแผงแหล่งที่มาได้แล้ว ซึ่งมีประโยชน์เป็นอย่างยิ่งเมื่อคุณมีออบเจ็กต์ขนาดใหญ่ (เช่น อาร์เรย์ยาว) ที่ต้องการคัดลอก

ปัญหาเกี่ยวกับ Chromium: 1149859, 1148353

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

ตอนนี้คุณสามารถคัดลอกชื่อไฟล์ได้โดยคลิกขวาที่

• ไฟล์ในแผงแหล่งที่มา หรือ
• ชื่อไฟล์ในบานหน้าต่างรูปแบบในแผงองค์ประกอบ

เลือกคัดลอกชื่อไฟล์จากเมนูตามบริบทเพื่อคัดลอกชื่อไฟล์

ปัญหาใน Chromium: 1155120

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

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

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

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

ปัญหาใน Chromium: 1122507

วัดข้อมูลความทรงจำในมุมมองรายละเอียดเฟรม

ตอนนี้สถานะ performance.measureMemory() API จะแสดงในส่วนความพร้อมใช้งานของ API

performance.measureMemory() API ใหม่จะประมาณการใช้หน่วยความจำของหน้าเว็บทั้งหมด ดูวิธีตรวจสอบการใช้หน่วยความจำทั้งหมดของหน้าเว็บด้วย API ใหม่นี้ได้ในบทความนี้

ปัญหาใน Chromium: 1139899

แสดงความคิดเห็นจากแท็บปัญหา

หากต้องการปรับปรุงข้อความปัญหา ให้ไปที่แท็บปัญหาจาก Console หรือ การตั้งค่าเพิ่มเติม > เครื่องมือเพิ่มเติม > ปัญหา > เพื่อเปิดแท็บปัญหา ขยายข้อความแสดงปัญหา แล้วคลิกข้อความแสดงปัญหานี้มีประโยชน์สำหรับคุณไหม จากนั้นคุณจะแสดงความคิดเห็นใน ป๊อปอัปได้

เฟรมที่ลดน้อยลงในแผงประสิทธิภาพ

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

ปัญหาใน Chromium: 1075865

จำลองอุปกรณ์แบบพับได้และอุปกรณ์แบบ 2 หน้าจอในโหมดอุปกรณ์

ตอนนี้คุณสามารถจำลองอุปกรณ์แบบ 2 หน้าจอและอุปกรณ์แบบพับได้ใน DevTools ได้แล้ว

หลังจากเปิดใช้แถบเครื่องมือของอุปกรณ์แล้ว ให้เลือกอุปกรณ์อย่างใดอย่างหนึ่งต่อไปนี้ Surface Duo หรือ Samsung Galaxy Fold

คลิกไอคอนช่วงใหม่เพื่อสลับระหว่างท่าทางหน้าจอเดียวหรือพับ และท่าทาง 2 หน้าจอหรือกางออก

นอกจากนี้ คุณยังเปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองเพื่อเข้าถึงฟีเจอร์ CSS media screen-spanning ใหม่และ JavaScript getWindowSegments API ได้ด้วย ไอคอนเวอร์ชันทดลองจะแสดงสถานะของค่าสถานะฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง ระบบจะไฮไลต์ไอคอนเมื่อ เปิดใช้ฟีเจอร์รายงาน ไปที่ chrome://flags แล้วสลับสถานะของฟีเจอร์

ปัญหาใน Chromium: 1054281

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

ทดสอบเบราว์เซอร์โดยอัตโนมัติด้วย Puppeteer Recorder

ตอนนี้ DevTools สามารถสร้างสคริปต์ Puppeteer ตามการโต้ตอบกับเบราว์เซอร์ของคุณ ซึ่งจะช่วยให้คุณทดสอบเบราว์เซอร์โดยอัตโนมัติได้ง่ายขึ้น Puppeteer เป็นไลบรารี Node.js ที่มี API ระดับสูงสำหรับควบคุม Chrome หรือ Chromium ผ่าน DevTools Protocol

ไปที่หน้าการสาธิตนี้ เปิดแผงแหล่งที่มาในเครื่องมือสำหรับนักพัฒนาเว็บ เลือกแท็บการบันทึกในแผงด้านซ้าย เพิ่มการบันทึกใหม่และตั้งชื่อไฟล์ (เช่น test01.js)

คลิกปุ่มบันทึกที่ด้านล่างเพื่อเริ่มบันทึกการโต้ตอบ ลองกรอกแบบฟอร์มบนหน้าจอ สังเกตว่าระบบจะต่อท้ายคำสั่ง Puppeteer ในไฟล์ตามนั้น คลิกปุ่มบันทึกอีกครั้งเพื่อหยุดการบันทึก

หากต้องการเรียกใช้สคริปต์ ให้ทำตามคู่มือเริ่มต้นใช้งานในเว็บไซต์ทางการของ Puppeteer

โปรดทราบว่านี่เป็นการทดสอบในระยะแรก เราวางแผนที่จะปรับปรุงและขยายฟังก์ชันการทำงานของเครื่องบันทึก เมื่อเวลาผ่านไป

ปัญหาใน Chromium: 1144127

เครื่องมือแก้ไขแบบอักษรในแผงรูปแบบ

ตัวแก้ไขแบบอักษรใหม่คือตัวแก้ไขแบบป๊อปโอเวอร์ในแผงรูปแบบสำหรับพร็อพเพอร์ตี้ที่เกี่ยวข้องกับแบบอักษร ซึ่งจะช่วยให้คุณค้นหาตัวอักษรที่สมบูรณ์แบบสำหรับหน้าเว็บได้

ป๊อปโอเวอร์มี UI ที่สะอาดตาเพื่อจัดการการจัดรูปแบบข้อความแบบไดนามิกด้วยชุดประเภทอินพุตที่ใช้งานง่าย

ปัญหาใน Chromium: 1093229

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

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

ตอนนี้ DevTools จะวาดเส้นนำเพื่อช่วยให้คุณเห็นภาพพร็อพเพอร์ตี้ CSS align-items ได้ดียิ่งขึ้น นอกจากนี้ ระบบยังรองรับพร็อพเพอร์ตี้ gap ของ CSS ด้วย ในตัวอย่างนี้ เรามี CSS gap: 12px; สังเกต รูปแบบการแรเงาสำหรับแต่ละช่องว่าง

ปัญหาใน Chromium: 1139949

แท็บการละเมิด CSP ใหม่

ดูการละเมิดนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ทั้งหมดได้อย่างรวดเร็วในแท็บการละเมิด CSP ใหม่ แท็บใหม่นี้เป็นการทดลองที่จะช่วยให้คุณทำงานกับหน้าเว็บที่มีการละเมิด CSP และ Trusted Types จำนวนมากได้ง่ายขึ้น

ปัญหาใน Chromium: 1137837

การคำนวณคอนทราสต์ของสีแบบใหม่ - อัลกอริทึมคอนทราสต์เชิงรับรู้ขั้นสูง (APCA)

อัลกอริทึมคอนทราสต์เชิงรับรู้ขั้นสูง (APCA) จะแทนที่อัตราส่วนคอนทราสต์ตามหลักเกณฑ์ AA/AAA ในเครื่องมือเลือกสี

APCA เป็นวิธีใหม่ในการคำนวณคอนทราสต์โดยอิงตามงานวิจัยที่ทันสมัยเกี่ยวกับการรับรู้สี APCA ขึ้นอยู่กับบริบทมากกว่าเมื่อเทียบกับหลักเกณฑ์ AA/AAA ระบบจะคำนวณคอนทราสต์โดยอิงตาม คุณสมบัติเชิงพื้นที่ของข้อความ (ความหนาและขนาดของแบบอักษร) สี (ความแตกต่างของความสว่างที่รับรู้ระหว่างข้อความกับ พื้นหลัง) และบริบท (แสงโดยรอบ สิ่งแวดล้อม วัตถุประสงค์ของข้อความ)

ตัวอย่างแสดงให้เห็นว่าเกณฑ์ APCA คือ 38% อัตราส่วนความคมชัดต้องเท่ากับหรือมากกว่าค่าที่ระบุไว้ ค่านี้คำนวณตามความหนาและขนาดของแบบอักษร โดยอ้างอิงจากตารางการค้นหา APCA นี้

ปัญหาใน Chromium: 1121900

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

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

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

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

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

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

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