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

Kayce Basques

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

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

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

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

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

รูปที่ 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 เกี่ยวกับการติดป้ายกำกับด้านล่างเพื่อดูแผงการช่วยเหลือพิเศษที่ใช้งานจริง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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