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

เกริ่นนำ

ความซับซ้อนและฟังก์ชันการทำงานของเว็บแอปพลิเคชันที่เพิ่มมากขึ้น เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ก็เพิ่มมากขึ้นเช่นกัน ในสรุปการประชุม Google I/O 2013 ของ Paul Ireland ในการพูดคุยเรื่อง Chrome DevTools Revolutions 2013 คุณจะได้เห็นคุณลักษณะล่าสุดที่กำลังปฏิวัติวิธีการสร้างและทดสอบเว็บแอปพลิเคชัน

หากคุณพลาดการพูดคุยของ Paul ติดตามได้ทางด้านบน (เราจะรอต่อไป) หรือตัดไปที่สรุปเกี่ยวกับฟีเจอร์:

• พื้นที่ทำงานช่วยให้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเป็นเครื่องมือแก้ไขซอร์สโค้ดได้
• หากคุณใช้ Sass คุณจะชื่นชอบความสามารถในการแก้ไขไฟล์ Sass (.scss) ภายในเครื่องมือสำหรับนักพัฒนาเว็บ และเห็นการเปลี่ยนแปลงที่แสดงในหน้าดังกล่าวทันที
• การแก้ไขข้อบกพร่องของหน้าใน Chrome สำหรับ Android จากระยะไกลสามารถทำได้มาระยะหนึ่งแล้ว แต่ส่วนขยาย ADB จะช่วยให้การเชื่อมต่อกับอุปกรณ์ Android เป็นเรื่องง่ายขึ้น ย้อนกลับการส่งต่อพอร์ตช่วยให้คุณเชื่อมต่อกับ localhost ในเครื่องการพัฒนาจากอุปกรณ์ของคุณได้อย่างง่ายดาย
• เว็บแอปพลิเคชันเป็นเรื่องน่ากังวลอยู่เสมอ และ DevTools มีฟีเจอร์ใหม่ๆ จำนวนมากเพื่อช่วยคุณติดตามจุดคอขวด เช่น การแสดงภาพแผนภูมิ Flame Chart สำหรับการสร้างโปรไฟล์ CPU และเครื่องมือใหม่ๆ มากมายสำหรับแก้ไขข้อบกพร่องด้านประสิทธิภาพที่เกี่ยวข้องกับการแสดงผลและการใช้หน่วยความจำ

ฟีเจอร์เหล่านี้พร้อมใช้งานแล้วใน Chrome 28 และพร้อมใช้งานในช่องทางการอัปเดตเวอร์ชันเสถียรแล้ว

พื้นที่ทำงาน

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

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

การกด Control+S หรือ Command+S จะยังคงการเปลี่ยนแปลงดิสก์อยู่ต่อไป

ในทำนองเดียวกัน การเปลี่ยนแปลงที่คุณทำกับรูปแบบขององค์ประกอบในแผงองค์ประกอบจะปรากฏในทั้งแผงแหล่งที่มาและเครื่องมือแก้ไขภายนอก โปรดทราบว่า

• ระบบไม่มีการเปลี่ยนแปลง DOM ในแผงองค์ประกอบ การเปลี่ยนแปลงรูปแบบในแผงองค์ประกอบจะยังคงอยู่เท่านั้น
• เฉพาะรูปแบบที่กำหนดไว้ในไฟล์ CSS ภายนอกเท่านั้นที่เปลี่ยนแปลงได้ การเปลี่ยนแปลงเอลิเมนต์.style หรือรูปแบบในบรรทัดจะไม่คงอยู่กลับไปยังดิสก์ หากคุณมีรูปแบบแทรกในบรรทัด คุณสามารถเปลี่ยนแปลงได้ในแผงแหล่งที่มา
• การเปลี่ยนแปลงรูปแบบในแผงองค์ประกอบจะยังคงอยู่ทันที โดยไม่จำเป็นต้องกด Control+S หรือ Command+S

การเพิ่มโฟลเดอร์พื้นที่ทำงาน

การใช้พื้นที่ทำงานมี 2 ส่วน ได้แก่ การทำให้เนื้อหาของโฟลเดอร์ในเครื่องพร้อมใช้งานสำหรับ DevTools และการแมปโฟลเดอร์นั้นกับ URL

วิธีเพิ่มโฟลเดอร์พื้นที่ทำงานใหม่

1. ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกการตั้งค่า เพื่อเปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกพื้นที่ทำงาน
3. คลิกเพิ่มโฟลเดอร์
4. เรียกดูโฟลเดอร์ที่มีไฟล์ต้นทางของโปรเจ็กต์แล้วคลิกเลือก
5. เมื่อได้รับข้อความแจ้ง ให้คลิก Allow เพื่อให้สิทธิ์เข้าถึงโฟลเดอร์อย่างเต็มรูปแบบแก่เครื่องมือสำหรับนักพัฒนาเว็บ

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

การจับคู่โฟลเดอร์กับ URL

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

วิธีแมปโฟลเดอร์พื้นที่ทำงานกับ URL

1. ในแผงแหล่งที่มา ให้คลิกขวาหรือ Control+คลิกไฟล์ในโฟลเดอร์พื้นที่ทำงาน
2. เลือกแมปกับทรัพยากรเครือข่าย

   

3. เลือกทรัพยากรเครือข่ายที่เกี่ยวข้องจากหน้าที่โหลดไว้

   

4. โหลดหน้าเว็บซ้ำใน Chrome

ตอนนี้แผงแหล่งที่มาจะแสดงเฉพาะเนื้อหาของโฟลเดอร์พื้นที่ทำงานในเครื่องของเว็บไซต์ ไม่ใช่แหล่งที่มาของ localhost ดังที่แสดงด้านล่าง

มี 2 วิธีในการลิงก์โฟลเดอร์เครือข่ายกับโฟลเดอร์พื้นที่ทำงาน ดังนี้

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

การแก้ไขข้อบกพร่องการแมปแหล่งที่มา Sass/CSS

การแก้ไขข้อบกพร่อง Sass (แผนที่แหล่งที่มาของ CSS) ช่วยให้คุณแก้ไขไฟล์ Sass (.scss) แบบสดในแผงแหล่งที่มาได้ และดูผลการค้นหาโดยไม่ต้องออกจาก DevTools หรือรีเฟรชหน้า เมื่อคุณตรวจสอบองค์ประกอบที่มีรูปแบบมาจากไฟล์ CSS ที่ Sass สร้างขึ้น แผงองค์ประกอบจะแสดงลิงก์ไปยังไฟล์ .scss ไม่ใช่ไฟล์ .css ที่สร้างขึ้น

การคลิกลิงก์จะเปิดไฟล์ SCSS (แก้ไขได้) ในแผงแหล่งที่มา คุณจะทำการเปลี่ยนแปลงกับไฟล์นี้ได้ตามต้องการ

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

การใช้การแก้ไขข้อบกพร่อง Sass

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

gem install sass -v '>=3.3.0alpha' --pre

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

1. เปิด about:flags ใน Chrome
2. เปิดเปิดใช้การทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
3. รีสตาร์ท Chrome
4. เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคลิกการทดสอบ
5. เปิดการสนับสนุนสำหรับ Sass (หรือการแก้ไขข้อบกพร่องของสไตล์ชีต Sass ทั้งนี้ขึ้นอยู่กับเวอร์ชันของเบราว์เซอร์ที่คุณใช้)

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

sass --watch **--sourcemap** sass/styles.scss:styles.css

หากคุณใช้เข็มทิศ โปรดทราบว่าเข็มทิศยังไม่รองรับ Sass เวอร์ชันก่อนเผยแพร่ คุณจึงใช้การแก้ไขข้อบกพร่องของ Sass กับเข็มทิศไม่ได้

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

สำหรับไฟล์ต้นฉบับ SCSS แต่ละไฟล์ที่ดำเนินการประมวลผลนั้น คอมไพเลอร์ Sass จะสร้างไฟล์แผนที่แหล่งที่มา (ไฟล์ .map) นอกเหนือจาก CSS ที่คอมไพล์แล้ว ไฟล์การแมปแหล่งที่มาคือไฟล์ JSON ที่กำหนดการแมประหว่างไฟล์ .scss และไฟล์ .css ไฟล์ CSS แต่ละไฟล์มีคำอธิบายประกอบที่ระบุ URL ของไฟล์แผนที่แหล่งที่มา ซึ่งฝังอยู่ในความคิดเห็นพิเศษ ดังนี้

/*# sourceMappingURL=<url>; */

ตัวอย่างเช่น ให้ไฟล์ SCSS ต่อไปนี้

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass สร้างไฟล์ CSS แบบนี้ โดยมีคำอธิบายประกอบ sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

ตัวอย่างไฟล์การแมปแหล่งที่มามีดังนี้

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

การแก้ไขข้อบกพร่องจากระยะไกลที่ง่ายขึ้นใน Chrome สำหรับ Android

ฟีเจอร์ใหม่ 2 รายการใน DevTools ทำให้การตั้งค่าสำหรับการแก้ไขข้อบกพร่องจากระยะไกลบน Chrome สำหรับ Android ทำได้ง่ายขึ้น ได้แก่ ส่วนขยาย ADB และการส่งต่อพอร์ตย้อนกลับ

ส่วนขยาย ADB ของ Chrome ช่วยให้ขั้นตอนการตั้งค่าการแก้ไขข้อบกพร่องจากระยะไกลง่ายขึ้น ซึ่งให้ประโยชน์ดังต่อไปนี้

• รวม Android Debug Bridge (ADB) ไว้ในแพ็กเกจ คุณจึงไม่ต้องติดตั้ง
• ไม่ต้องใช้การโต้ตอบในบรรทัดคำสั่ง
• UI เพื่อการเริ่มและหยุด ADB Daemon รวมถึงการดูอุปกรณ์ที่เชื่อมต่อได้อย่างง่ายดาย

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

การใช้ส่วนขยาย ADB

ขั้นแรก ให้ติดตั้งส่วนขยาย Chrome ของ ADB จาก Chrome เว็บสโตร์ คลิกเพิ่มลงใน Chrome เพื่อติดตั้งส่วนขยาย

เมื่อติดตั้งแล้ว ไอคอนเมนู Android สีเทาจะปรากฏขึ้นใน Chrome หากต้องการเริ่มใช้ ADB ให้คลิกไอคอน แล้วคลิกเริ่ม ADB

เมื่อ ADB เริ่มทำงานแล้ว ไอคอนเมนูจะเปลี่ยนเป็นสีเขียวและแสดงจำนวนอุปกรณ์ที่เชื่อมต่ออยู่ (หากมี)

คลิกดูอุปกรณ์เพื่อเปิดหน้า about:inspect ซึ่งแสดงอุปกรณ์ที่เชื่อมต่อแต่ละเครื่องและแท็บของอุปกรณ์ หากต้องการตรวจสอบแท็บในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกลิงก์ "ตรวจสอบ" ข้าง URL ของแท็บ

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

ย้อนกลับการส่งต่อพอร์ต (ทดลอง)

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

หากต้องการใช้ฟีเจอร์นี้ คุณจะต้องมีสิ่งต่อไปนี้

• ติดตั้ง Chrome 28 ขึ้นไปในเครื่องพัฒนาซอฟต์แวร์ของคุณ
• Chrome สำหรับแอนดรอยด์รุ่นเบต้าติดตั้งบนอุปกรณ์ของคุณแล้ว
• Android Debug Bridge (ส่วนขยาย ADB ใน Chrome หรือ Android SDK เวอร์ชันเต็ม) ที่ติดตั้งในเครื่องพัฒนาซอฟต์แวร์ของคุณ

หากต้องการใช้การส่งต่อพอร์ตแบบย้อนกลับ คุณจะต้องเชื่อมต่ออุปกรณ์เพื่อแก้ไขข้อบกพร่องจากระยะไกล ตามที่อธิบายไว้ใน "การใช้ส่วนขยาย ADB" จากนั้นให้เปิดใช้การส่งต่อพอร์ตแบบย้อนกลับ และเพิ่มกฎการส่งต่อพอร์ตสำหรับแอปพลิเคชัน

ขั้นแรก ให้เปิดใช้การส่งต่อพอร์ตย้อนกลับโดยทำดังนี้

1. เปิด Chrome ในเครื่องพัฒนาซอฟต์แวร์ของคุณ
2. ในส่วน about:flags ให้เปิดเปิดใช้การทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แล้วรีสตาร์ท Chrome
3. เปิด about:inspect คุณควรเห็นอุปกรณ์เคลื่อนที่และรายการแท็บที่เปิดอยู่ของอุปกรณ์เคลื่อนที่
4. คลิกลิงก์ "ตรวจสอบ" ถัดจากเว็บไซต์ใดๆ ที่แสดงรายการ
5. เปิดแผงการตั้งค่าในหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บที่เปิดอยู่
6. ในส่วนการทดสอบ ให้เปิดเปิดใช้การส่งต่อพอร์ตแบบย้อนกลับ
7. ปิดหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บกลับไปที่ about:inspect

จากนั้นเพิ่มกฎการส่งต่อพอร์ต ดังนี้

1. คลิกลิงก์ "ตรวจสอบ" อีกครั้งเพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ และเปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บอีกครั้ง
2. คลิกแท็บการส่งต่อพอร์ต
3. ในช่องพอร์ตอุปกรณ์ ให้ป้อนหมายเลขพอร์ตที่ Chrome ควรเชื่อมต่อในอุปกรณ์ Android (ค่าเริ่มต้นคือ 8080)
4. ในช่อง Target ให้เพิ่มหมายเลขพอร์ตที่เว็บแอปพลิเคชันทำงานอยู่ในเครื่องการพัฒนา

   

5. ใน Chrome สำหรับ Android ให้เปิด localhost: โดยที่ คือค่าที่คุณป้อนในช่องพอร์ตอุปกรณ์ (ค่าเริ่มต้นคือ 8080)

คุณควรจะเห็นเนื้อหาที่แสดงโดยเครื่องพัฒนาซอฟต์แวร์ของคุณ

การแสดงภาพแผนภูมิเปลวไฟสำหรับโปรไฟล์ JavaScript

มุมมองแผนภูมิ Flame ใหม่ช่วยให้เห็นภาพการประมวลผล JavaScript เมื่อเวลาผ่านไป คล้ายกับข้อมูลในแผงไทม์ไลน์และเครือข่าย

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

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

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

การคลิกบล็อกฟังก์ชันจะเปิดไฟล์ JavaScript ที่มีในแผงแหล่งที่มาตรงบรรทัดที่มีการกำหนดฟังก์ชันไว้

วิธีใช้แผนภูมิเปลวไฟ

1. คลิกแท็บโปรไฟล์ในเครื่องมือสำหรับนักพัฒนาเว็บ
2. เลือกบันทึกโปรไฟล์ JavaScript CPU แล้วคลิกเริ่ม
3. เมื่อรวบรวมข้อมูลเสร็จแล้ว ให้คลิกหยุด
4. ในมุมมองโปรไฟล์ ให้เลือกการแสดงภาพแผนภูมิ Flame

   

ฟีเจอร์การวัดผลประสิทธิภาพหลัก 5 ฟีเจอร์

การปิดท้ายแบบสำรวจเกี่ยวกับความก้าวหน้าเชิงปฏิวัติใน DevTools เป็นฟีเจอร์ใหม่หลายรายการสำหรับการตรวจสอบปัญหาด้านประสิทธิภาพ ดังนี้

• โหมดการวาดภาพแบบต่อเนื่อง
• แสดงรูปสี่เหลี่ยมสำหรับระบายสีและเส้นขอบของเลเยอร์
• เครื่องวัด FPS
• การค้นหาเลย์เอาต์แบบซิงโครนัสแบบบังคับ (การบีบเค้าโครง)
• การติดตามการจัดสรรออบเจ็กต์

โหมดการวาดภาพแบบต่อเนื่อง

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

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

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

วิธีเปิดใช้โหมดการปวดอย่างต่อเนื่อง

1. เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ 1. ในแท็บทั่วไป ในส่วนการแสดงผล ให้เปิดเปิดใช้การทาสีหน้าซ้ำอย่างต่อเนื่อง

ดูข้อมูลเพิ่มเติมได้ที่การทำโปรไฟล์ที่ใช้เวลานานในโหมดการวาดภาพแบบต่อเนื่องของ DevTools

แสดงสี่เหลี่ยมผืนผ้าระบายสีและเส้นขอบของเลเยอร์

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

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

เครื่องวัด FPS

เครื่องวัด FPS จะแสดงอัตราเฟรมปัจจุบันของหน้า อัตราเฟรมต่ำสุดและสูงสุด กราฟแท่งที่แสดงอัตราเฟรมในช่วงเวลาหนึ่ง และฮิสโตแกรมที่แสดงความผันแปรของอัตราเฟรม

วิธีแสดงเครื่องวัด FPS

1. เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกทั่วไป
3. ในส่วนการแสดงผล ให้เปิดบังคับการประกอบแบบเร่งและแสดงเครื่องวัด FPS

คุณบังคับให้ตัวตรวจสอบ FPS ปรากฏขึ้นทุกครั้งได้โดยการเปิด about:flags, เปิดตัวนับ FPS และรีสตาร์ท Chrome

การค้นหาเลย์เอาต์แบบซิงโครนัสแบบบังคับ (การบีบเค้าโครง)

เพื่อเพิ่มประสิทธิภาพการแสดงผลให้ได้สูงสุด โดยปกติ Chrome จะจัดกลุ่มการเปลี่ยนแปลงเลย์เอาต์ที่แอปพลิเคชันขอ และกำหนดเวลาการส่งผ่านเลย์เอาต์เพื่อคำนวณและแสดงผลการเปลี่ยนแปลงที่ขอในแบบไม่พร้อมกัน อย่างไรก็ตาม หากแอปพลิเคชันถามหาค่าของคุณสมบัติที่ขึ้นอยู่กับเค้าโครง (เช่น offsetHeight หรือ offsetWidth) Chrome จะถูกบังคับให้แสดงเค้าโครงหน้าเว็บในทันทีและพร้อมกัน สิ่งที่เรียกว่าเค้าโครงแบบซิงโครนัสแบบบังคับเหล่านี้อาจลดประสิทธิภาพการแสดงผลลงได้อย่างมาก โดยเฉพาะเมื่อแสดงซ้ำๆ บนแผนผัง DOM ขนาดใหญ่ สถานการณ์นี้เรียกอีกอย่างว่า "การยกเค้าโครง"

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

ป๊อปอัปนี้ยังแสดงจำนวนโหนดที่ต้องมีเลย์เอาต์ ขนาดของแผนผังรีเลย์ ขอบเขตเลย์เอาต์ และรูทของเลย์เอาต์

ดูข้อมูลเพิ่มเติมได้ที่การสาธิตไทม์ไลน์: การวินิจฉัยเลย์เอาต์แบบซิงโครนัสที่บังคับ

การติดตามการจัดสรรออบเจ็กต์

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

วิธีติดตามการจัดสรรออบเจ็กต์

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

การทำโปรไฟล์ Canvas (ทดลอง)

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

วิธีใช้การทำโปรไฟล์ Canvas

1. เปิดฟีเจอร์การตรวจสอบ Canvas ในแท็บการทดสอบของการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ (หากคุณไม่เห็นแท็บนี้ ให้เปิด about:flags, เปิดเปิดใช้การทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และรีสตาร์ท Chrome)
2. คลิกแท็บโปรไฟล์
3. เลือกจับภาพกรอบภาพพิมพ์แคนวาสแล้วคลิกถ่ายสแนปชอต
4. ตอนนี้คุณสามารถสำรวจการโทรที่ใช้ในการสร้างกรอบแคนวาสได้แล้ว