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

Kayce Basques

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

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

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

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

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

รูปที่ 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) ที่ปรับปรุงแล้ว หากเครื่องหมายถูกเพียง 1 เครื่องหมาย แสดงว่าเป็นไปตามอัตราส่วนคอนทราสต์ขั้นต่ำที่แนะนำ (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% ต่อการดูหน้าเว็บ 1 บทความ ดูข้อมูลเพิ่มเติม

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

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

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

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

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

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools