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

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

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

อ่านต่อหรือดูวิดีโอเวอร์ชันวิดีโอของบันทึกประจำรุ่นด้านล่าง

การลบล้างในเครื่อง

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

รูปที่ 1 คงการเปลี่ยนแปลง CSS ในการโหลดหน้าเว็บไว้ด้วยการลบล้างในเครื่อง

วิธีการทำงาน

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

วิธีตั้งค่าการลบล้างในเครื่อง

1. เปิดแผงแหล่งที่มา

2. เปิดแท็บการลบล้าง

   

   รูปที่ 2 แท็บการลบล้าง

3. คลิกการลบล้างการตั้งค่า

4. เลือกไดเรกทอรีที่ต้องการบันทึกการเปลี่ยนแปลง

5. คลิกอนุญาตที่ด้านบนของวิวพอร์ตเพื่อให้สิทธิ์การอ่านและเขียน ไดเรกทอรี

6. ทำการเปลี่ยนแปลง

ข้อจำกัด

• เครื่องมือสำหรับนักพัฒนาเว็บจะไม่บันทึกการเปลี่ยนแปลงที่ทำในแผนผัง DOM ของแผงองค์ประกอบ แก้ไข HTML ในส่วน แผงแหล่งที่มาแทน
• หากคุณแก้ไข CSS ในแผงรูปแบบ และแหล่งที่มาของ CSS นั้นเป็นไฟล์ HTML เครื่องมือสำหรับนักพัฒนาเว็บจะไม่ บันทึกการเปลี่ยนแปลง แก้ไขไฟล์ HTML ในแผงแหล่งที่มาแทน

ฟีเจอร์ที่เกี่ยวข้อง

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

แท็บการเปลี่ยนแปลง

ติดตามการเปลี่ยนแปลงที่คุณทำในเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องผ่านแท็บการเปลี่ยนแปลงใหม่

รูปที่ 3 แท็บการเปลี่ยนแปลง

เครื่องมือช่วยเหลือพิเศษใหม่

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

แผงการช่วยเหลือพิเศษ

ใช้แผงการช่วยเหลือพิเศษในแผงองค์ประกอบเพื่อตรวจสอบคุณสมบัติการช่วยเหลือพิเศษ ขององค์ประกอบที่เลือกไว้ในปัจจุบัน

รูปที่ 4 แผงการช่วยเหลือพิเศษจะแสดงแอตทริบิวต์ ARIA และพร็อพเพอร์ตี้ที่คำนวณสำหรับ องค์ประกอบที่เลือกไว้อยู่ในแผนผัง DOM ในแผงองค์ประกอบ รวมถึงองค์ประกอบ ในแผนผังการช่วยเหลือพิเศษ

ลองดู A11ycast ของ Rob Dodson เกี่ยวกับการติดป้ายกำกับที่ด้านล่างเพื่อดูแผงการช่วยเหลือพิเศษในการใช้งาน

อัตราส่วนคอนทราสต์ในตัวเลือกสี

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

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

รูปที่ 5 การตรวจสอบอัตราส่วนคอนทราสต์ขององค์ประกอบ h1 ที่ไฮไลต์

ในรูปที่ 5 เครื่องหมายถูก 2 อันถัดจาก 4.61 หมายความว่าองค์ประกอบนี้เป็นไปตาม อัตราส่วนคอนทราสต์ที่แนะนำ (AAA) หากเครื่องหมายดังกล่าวมีเครื่องหมายเดียว แสดงว่าเป็นไปตาม อัตราส่วนคอนทราสต์ขั้นต่ำที่แนะนำ (AA)

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

รูปที่ 6 ส่วนอัตราส่วนคอนทราสต์ที่ขยาย

ฟีเจอร์ที่เกี่ยวข้อง

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

โปรดดูเรียกใช้ Lighthouse ใน Chrome DevTools หรือดู A11ycast ด้านล่างนี้เพื่อดูวิธีใช้ แผงการตรวจสอบเพื่อทดสอบการช่วยเหลือพิเศษ

การตรวจสอบใหม่

Chrome 65 มาพร้อมกับหมวดหมู่การตรวจสอบ SEO ใหม่ทั้งหมด และการตรวจสอบประสิทธิภาพใหม่ๆ อีกมากมาย

การตรวจสอบ SEO ใหม่

การตรวจสอบว่าหน้าเว็บผ่านการตรวจสอบแต่ละรายการในหมวดหมู่ SEO ใหม่อาจช่วยปรับปรุง การจัดอันดับของเครื่องมือค้นหา

รูปที่ 7 หมวดหมู่การตรวจสอบใหม่ของ SEO

การตรวจสอบประสิทธิภาพใหม่

Chrome 65 ยังมาพร้อมกับการตรวจสอบประสิทธิภาพใหม่ๆ มากมาย ดังนี้

• เวลาเปิดเครื่อง JavaScript สูง
• ใช้นโยบายแคชที่ไม่มีประสิทธิภาพกับเนื้อหาคงที่
• หลีกเลี่ยงการเปลี่ยนเส้นทางหน้าเว็บ
• เอกสารใช้ปลั๊กอิน
• ลดขนาด CSS
• ลดขนาด JavaScript

ประสิทธิภาพเป็นสิ่งสำคัญ หลังจากที่ Mynet เพิ่มความเร็วในการโหลดหน้าเว็บได้ถึง 4 เท่า ผู้ใช้ก็ใช้เวลามากขึ้น 43% บน มีการดูหน้าเว็บเพิ่มขึ้น 34% อัตราตีกลับลดลง 24% และมีรายได้เพิ่มขึ้น 25% ต่อบทความ การดูหน้าเว็บ ดูข้อมูลเพิ่มเติม

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

ข้อมูลอัปเดตอื่นๆ

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

การใช้งานโค้ดที่เชื่อถือได้ด้วยผู้ปฏิบัติงานและโค้ดอะซิงโครนัส

Chrome 65 มีอัปเดตต่างๆ ในขั้นตอนสู่ เมื่อก้าวเข้าไปใน โค้ดที่ส่งข้อความระหว่างชุดข้อความกับโค้ดแบบอะซิงโครนัส หากคุณต้องการดูขั้นตอนก่อนหน้า คุณสามารถใช้ขั้นตอนใหม่ ปุ่มแทน

การใช้โค้ดที่ส่งข้อความระหว่างชุดข้อความ

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

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

รูปที่ 8 การใช้โค้ดส่งผ่านข้อความใน Chrome 65

เมื่อคุณก้าวเข้าสู่การเขียนโค้ดเช่นนี้ใน Chrome เวอร์ชันก่อนหน้า Chrome จะแสดงเฉพาะ ด้านชุดข้อความหลักของโค้ด ดังที่แสดงในรูปที่ 9

รูปที่ 9 การใช้โค้ดส่งผ่านข้อความใน Chrome 63

การใช้โค้ดแบบอะซิงโครนัส

เมื่อเข้าใช้โค้ดอะซิงโครนัส ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะสันนิษฐานว่าคุณต้องการหยุดชั่วคราวใน โค้ดแบบอะซิงโครนัสที่จะทำงานในท้ายที่สุด

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

รูปที่ 10 การใช้โค้ดแบบอะซิงโครนัสใน Chrome 65

เมื่อคุณใช้งานโค้ดเช่นนี้ใน Chrome 63 เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวในโค้ดตามลำดับเวลา ทำงานอย่างที่คุณเห็นในรูปที่ 11

รูปที่ 11 การใช้โค้ดแบบอะซิงโครนัสใน Chrome 63

การบันทึกหลายรายการในแผงประสิทธิภาพ

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

รูปที่ 12 การเลือกระหว่างการบันทึกวิดีโอหลายรายการในแผงประสิทธิภาพ

โบนัส: ทำให้การทำงานกับเครื่องมือสำหรับนักพัฒนาเว็บทำงานโดยอัตโนมัติด้วย Puppeteer 1.0

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

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

นอกจากนี้ยังมี API สำหรับงานอัตโนมัติที่เป็นประโยชน์โดยทั่วไปจำนวนมาก เช่น การสร้าง PDF

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

โปรดดูข้อมูลเพิ่มเติมที่คู่มือเริ่มต้นฉบับย่อ

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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