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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

    แท็บการลบล้าง

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

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

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

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

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

ข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การแก้ไขข้อบกพร่องของโค้ดที่เชื่อถือได้ด้วย Worker และโค้ดแบบอะซิงโครนัส

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

การเข้าสู่โค้ดที่ส่งข้อความระหว่างเธรด

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

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

การก้าวเข้าสู่โค้ดการส่งข้อความใน Chrome 65

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

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

การก้าวเข้าสู่โค้ดการส่งผ่านข้อความใน Chrome 63

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

การก้าวเข้าสู่โค้ดแบบอะซิงโครนัส

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

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

การก้าวเข้าสู่โค้ดแบบอะซิงโครนัสใน Chrome 65

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

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

การก้าวเข้าสู่โค้ดแบบอะซิงโครนัสใน Chrome 63

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

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

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

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

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

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

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

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

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

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

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

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