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

Arthur Evans
X GitHub
Tim Statler
X

บทนำ

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

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

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

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

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

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

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

แผงแหล่งที่มา

การกด Control+S หรือ Command+S จะบันทึกการเปลี่ยนแปลงลงในดิสก์

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

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

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

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

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

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

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

แผงแหล่งที่มาที่แสดงทั้งทรัพยากร localhost และไฟล์พื้นที่ทํางาน

การแมปโฟลเดอร์กับ URL

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

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

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

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

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

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

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

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

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

แผงองค์ประกอบที่แสดงสไตล์ชีต .scss

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

แผงแหล่งที่มาที่แสดงไฟล์ .scss

เมื่อคุณบันทึกการเปลี่ยนแปลงในไฟล์ SCSS (ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์หรือที่อื่น) คอมไพเลอร์ 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 และสร้างไฟล์ Source Map สําหรับไฟล์ CSS ที่สร้างขึ้นแต่ละไฟล์ เช่น 

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

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

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

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

/*# 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 */

ด้านล่างนี้คือตัวอย่างไฟล์ Source Map

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

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

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

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

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

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

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

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

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

เมนูส่วนขยาย ADB

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

เมนูส่วนขยาย ADB ที่แสดงอุปกรณ์ที่เชื่อมต่อ

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

หน้า about:inspect ที่แสดงลิงก์สำหรับแท็บอุปกรณ์

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

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

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

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

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

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

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

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

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

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

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

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

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

แผนภูมิ Flame Chart

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

แผนภูมิ Flame Chart ที่ซูมเข้า

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

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

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

คําจํากัดความของฟังก์ชันในแผงแหล่งที่มา

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

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

ฟีเจอร์การวัดประสิทธิภาพที่สําคัญ 5 รายการ

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

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

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

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

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

หน้าจอการแจ้งเตือนเวลาในการทาสี

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

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

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

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

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

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

เว็บไซต์ที่แสดงสี่เหลี่ยมผืนผ้าสำหรับวาด

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

เว็บไซต์แสดงภาพหน้าจอแบบเต็มหน้าจอ

เครื่องวัด FPS

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

เครื่องวัด FPS

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

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

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

การค้นหาเลย์เอาต์แบบซิงค์ที่บังคับ (การบังคับใช้เลย์เอาต์)

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

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

ป๊อปอัปเลย์เอาต์แบบซิงค์แบบบังคับในมุมมองไทม์ไลน์

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

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

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

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

มุมมองโปรไฟล์การจัดสรรฮีป

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

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

การสร้างโปรไฟล์แคนวาส (ทดลอง)

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

วิธีใช้การโปรไฟล์ภาพพิมพ์แคนวาส

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