หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

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

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

หมายเหตุ: ตรวจสอบเวอร์ชัน Chrome ที่คุณใช้อยู่ที่ chrome://version หากคุณกำลังใช้เวอร์ชันก่อนหน้า จะไม่มีฟีเจอร์เหล่านี้อยู่ หากคุณกำลังใช้เวอร์ชันที่ใหม่กว่า ฟีเจอร์เหล่านี้อาจมีการเปลี่ยนแปลง Chrome จะอัปเดตโดยอัตโนมัติเป็นเวอร์ชันหลักใหม่ทุกๆ 6 สัปดาห์

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

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

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

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

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

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

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

เปิดแผงแหล่งที่มา
เปิดแท็บการลบล้าง

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

ข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้โค้ดเพื่อส่งข้อความระหว่างชุดข้อความ

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

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

การใช้โค้ดสำหรับส่งข้อความใน Chrome 65

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

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

การใช้โค้ดสำหรับส่งข้อความใน Chrome 63

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

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

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

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

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

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

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

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

รูปที่ 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

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

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