เกริ่นนำ
Google Chrome คือเว็บเบราว์เซอร์ที่สมบูรณ์และทรงประสิทธิภาพ ซึ่งบุกเบิกสิ่งที่เป็นไปได้สำหรับแอปพลิเคชันบนเว็บ Google ได้พยายามอย่างเต็มที่เพื่อมอบประสบการณ์การท่องเว็บที่เร็ว มีความเสถียรมาก และสมบูรณ์แบบให้แก่ผู้ใช้ปลายทาง Google ยังรับประกันด้วยว่านักพัฒนาซอฟต์แวร์เช่นคุณจะได้รับประสบการณ์ที่ยอดเยี่ยมจาก Chrome เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่รวมอยู่ในชุดและพร้อมใช้งานใน Chrome และ Safari ช่วยให้นักพัฒนาเว็บและโปรแกรมเมอร์เข้าถึงการทำงานภายในของเบราว์เซอร์และเว็บแอปพลิเคชันได้
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เป็นส่วนหนึ่งของโครงการ Webkit แบบโอเพนซอร์ส การสนทนาส่วนใหญ่ในบทความนี้ใช้กับทั้ง Google Chrome และ Safari แต่ภาพหน้าจอเหล่านี้ถ่ายโดยใช้ Google Chrome 6 เบราว์เซอร์จึงอาจแตกต่างกันเล็กน้อย
ในบทความนี้ เราจะแนะนำทัวร์ชมภาพรวมของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และชี้ให้เห็นฟีเจอร์ที่ได้รับความนิยมและมีประโยชน์มากที่สุด กลุ่มเป้าหมายของเราคือนักพัฒนาเว็บที่ไม่รู้จักหรือยังไม่ได้ตรวจสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ อย่างไรก็ตาม เรามั่นใจว่าแม้ว่าคุณจะเป็นนักพัฒนาเว็บที่มีประสบการณ์ แต่คุณก็ควรมีเคล็ดลับ
หากอินสแตนซ์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไม่ตรงกับภาพหน้าจอที่พบในบทความนี้ เราขอแนะนำให้คุณอัปเกรดเป็น 5 เพื่อให้สามารถติดตามและรับสิทธิ์เข้าถึงฟีเจอร์ทั้งหมดที่อธิบายไว้ที่นี่ได้
ภาพรวม
โดยรวมแล้ว เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะมีกลุ่มหลัก 8 กลุ่ม และช่วยเพิ่มขีดความสามารถให้ไปพร้อมๆ กับแต่ละรุ่น Chrome 5 มีองค์ประกอบ ทรัพยากร สคริปต์ ไทม์ไลน์ โปรไฟล์ พื้นที่เก็บข้อมูล การตรวจสอบ และคอนโซล
องค์ประกอบ
เครื่องมือ "องค์ประกอบ" ช่วยให้คุณเห็นหน้าเว็บอย่างที่เบราว์เซอร์เห็น กล่าวคือ คุณสามารถดูข้อมูลดิบของ HTML, รูปแบบ CSS ดิบ, Document Object Model และในแบบเรียลไทม์โดยใช้เครื่องมือ Elements
แหล่งข้อมูล
ใช้เครื่องมือทรัพยากรเพื่อเรียนรู้ว่าหน้าเว็บหรือแอปพลิเคชันของคุณกำลังขอองค์ประกอบใดบ้างจากเว็บเซิร์ฟเวอร์ คำขอใช้เวลานานเท่าใด และแบนด์วิดท์ที่ต้องใช้ นอกจากนี้ คุณยังดูส่วนหัวคำขอ HTTP และส่วนหัวการตอบกลับสำหรับทรัพยากรแต่ละรายการได้ด้วย เครื่องมือทรัพยากรมีประโยชน์อย่างยิ่งในการช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ
สคริปต์
ในการเพียร์ภายใน JavaScript สำหรับหน้า คุณจะต้องใช้เครื่องมือสคริปต์ คุณสามารถดูรายการสคริปต์ที่หน้าเว็บต้องใช้ได้ที่นี่ พร้อมด้วยโปรแกรมแก้ไขข้อบกพร่องของสคริปต์ที่มีทั้งหมด คุณยังสามารถเปลี่ยน JavaScript ได้ทันที!
ไทม์ไลน์
สำหรับการวิเคราะห์เวลาและความเร็วขั้นสูง เครื่องมือไทม์ไลน์ช่วยให้เห็นกิจกรรมเบื้องหลังต่างๆ ของ Chrome แบบเจาะลึก คุณดูระยะเวลาที่เบราว์เซอร์ใช้ในการจัดการเหตุการณ์ DOM, แสดงผลเลย์เอาต์หน้าเว็บ และวาดหน้าต่างได้
Profiles
เครื่องมือโปรไฟล์ช่วยให้คุณบันทึกและวิเคราะห์ประสิทธิภาพของสคริปต์ JavaScript ได้ เช่น คุณสามารถเรียนรู้ว่าฟังก์ชันใดใช้เวลามากที่สุดในการดำเนินการและพุ่งเป้าไปที่ตำแหน่งที่ควรเพิ่มประสิทธิภาพ
พื้นที่เก็บข้อมูล
เว็บแอปพลิเคชันสมัยใหม่ต้องการการคงอยู่มากกว่าคุกกี้ และเครื่องมือพื้นที่เก็บข้อมูลจะช่วยคุณติดตาม ค้นหา และแก้ไขข้อบกพร่องพื้นที่เก็บข้อมูลของเบราว์เซอร์ในเครื่อง เครื่องมือนี้สามารถแสดงและค้นหาข้อมูลที่เก็บไว้ในฐานข้อมูลในเครื่อง พื้นที่เก็บข้อมูลในเครื่อง พื้นที่เก็บข้อมูลเซสชัน และคุกกี้
ตรวจสอบ
เครื่องมือตรวจสอบก็เหมือนกับการมีที่ปรึกษาด้านการเพิ่มประสิทธิภาพเว็บอยู่ข้างๆ คุณ เครื่องมือนี้สามารถวิเคราะห์หน้าเว็บในขณะที่โหลด รวมถึงให้คำแนะนำและเพิ่มประสิทธิภาพในการลดเวลาในการโหลดหน้าเว็บและเพิ่มการตอบสนองที่รับรู้ได้ (และเป็นแบบเรียลไทม์)
คอนโซล
สุดท้ายแต่ไม่ท้ายสุด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ก็มีคอนโซลแนะนำอย่างครบถ้วน จากคอนโซล คุณจะป้อน JavaScript ที่กําหนดเองและโต้ตอบกับหน้าเว็บโดยใช้โปรแกรมได้
เริ่มต้น
การเริ่มใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เป็นเรื่องง่ายขณะอยู่ใน Chrome
สำหรับระบบปฏิบัติการใดๆ ก็แค่คลิกขวาที่องค์ประกอบในหน้า แล้วเลือกตัวเลือก "ตรวจสอบองค์ประกอบ" จากเมนูบริบท ซึ่งจะเป็นการเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเจาะไปที่องค์ประกอบที่คุณคลิกโดยตรง
ดูการใช้งานจริงได้ที่ http://www.google.com ในเบราว์เซอร์ Chrome คลิกขวาที่โลโก้ Google แล้วคุณจะเห็นตัวเลือกต่อไปนี้
การเลือก "ตรวจสอบองค์ประกอบ" จะเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ขึ้นมา ซึ่งควรมีลักษณะดังนี้
สังเกตลักษณะที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดในแท็บองค์ประกอบ และเจาะลึกและไฮไลต์แท็ก <img> สำหรับโลโก้ Google โดยอัตโนมัติ ซึ่งจะเป็นประโยชน์มากเมื่อคุณสงสัยว่า HTML ใดที่สร้างองค์ประกอบของหน้าหนึ่งๆ
คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ด้วยแป้นพิมพ์ลัดง่ายๆ ได้ด้วย ลองทำตามขั้นตอนต่อไปนี้ ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการของคุณ
- ใน Windows และ Linux ให้เลือกคีย์
Control-Shift-J - ใน Mac ให้เลือกแป้น
Command-Option-J
ประการสุดท้าย คุณสามารถเลือกเปิดเครื่องมือจากเมนูเบราว์เซอร์หลักได้
ใน Mac และเลือกมุมมอง นักพัฒนาซอฟต์แวร์ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จากแถบเมนูของแอปพลิเคชันหลัก
สำหรับ PC ที่ใช้ Windows คุณควรใช้เมนู "หน้า" ที่ด้านขวาบน แล้วเลือก "นักพัฒนาซอฟต์แวร์" หรือ "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์"
ตอนนี้คุณได้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และพร้อมใช้งานแล้ว เรามาเริ่มด้วยการสำรวจองค์ประกอบต่างๆ ในหน้าแรกของ Google
องค์ประกอบ
แท็บแรกในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คือองค์ประกอบ นี่คือหน้าต่างที่คุณเข้าสู่โครงสร้างของหน้าเว็บ ซึ่งแสดงในลักษณะที่เบราว์เซอร์ของคุณมองเห็น
การเรียกดู DOM
บ่อยครั้งคุณจะต้องไปที่แท็บองค์ประกอบเมื่อคุณต้องการระบุข้อมูลโค้ด HTML สำหรับบางส่วนของหน้า เช่น คุณอาจสงสัยว่ารูปภาพมีแอตทริบิวต์รหัส HTML หรือไม่ และค่าของแอตทริบิวต์นั้นคืออะไร
ในบางครั้ง แท็บองค์ประกอบก็อาจเป็นวิธีที่ดีกว่าในการ "ดูแหล่งที่มา" สำหรับหน้าเว็บ ภายในแท็บองค์ประกอบ DOM ของหน้าเว็บจะได้รับการจัดรูปแบบอย่างสวยงามเพื่อให้แสดงองค์ประกอบ HTML, องค์ประกอบพื้นฐาน และองค์ประกอบสืบทอดได้อย่างง่ายดาย บ่อยครั้งที่หน้าเว็บที่คุณเข้าชมจะถูกลดขนาดลงหรือเป็น HTML ที่ไม่น่าเกลียด HTML ทำให้มองเห็นได้ยากว่าหน้าเว็บมีโครงสร้างอย่างไร แท็บองค์ประกอบคือโซลูชันสำหรับดูโครงสร้างพื้นฐานที่แท้จริงของหน้าเว็บ
ตัวอย่างเช่น ต่อไปนี้เป็นเอาต์พุตจาก "ดูซอร์สโค้ด" ของหน้าแรกของ Google
อ่านแหล่งที่มาด้านบนได้ยากเนื่องจากมีการเพิ่มประสิทธิภาพและลดขนาด รูปแบบดีสำหรับไคลเอ็นต์และเซิร์ฟเวอร์ แต่ยากสำหรับนักพัฒนาซอฟต์แวร์!
เมื่อคุณต้องการอ่านแหล่งที่มาของหน้าเว็บ ให้ใช้แท็บองค์ประกอบเพื่อดูลำดับชั้นขององค์ประกอบที่มีการไฮไลต์โดยไวยากรณ์ที่พิมพ์ออกมาแล้ว
นอกจากนี้ แท็บองค์ประกอบยังช่วยให้คุณเรียกดู โต้ตอบ และบางครั้งยังเปลี่ยนรูปแบบ เมตริก คุณสมบัติ และ Listener เหตุการณ์สำหรับองค์ประกอบใดๆ บนหน้าเว็บได้อีกด้วย
การเรียกดูรูปแบบ
ลักษณะการเรียงต่อกันของ CSS ทำให้เบราว์เซอร์ "สไตล์" ในแท็บองค์ประกอบมีประโยชน์มาก บางครั้งรูปแบบอาจยุบตัวลงเอง และภาพที่ไม่ต้องการจะปรากฏขึ้น การทราบว่ากฎการจัดรูปแบบใดที่เบราว์เซอร์ใช้กับองค์ประกอบนั้นๆ จะช่วยคุณแก้ไขข้อบกพร่องของปัญหาดังกล่าวได้
การคลิกองค์ประกอบใดก็ตามในแท็บองค์ประกอบจะแสดงรูปแบบทั้งหมดที่แนบมากับองค์ประกอบนั้น
คุณจะเห็นในภาพหน้าจอด้านบน ว่าเราสามารถบอกแอตทริบิวต์รูปแบบทั้งหมดที่กำลังนำไปใช้อยู่ได้ เช่น ระยะห่างจากขอบมาจากแอตทริบิวต์รูปแบบขององค์ประกอบ <img> โดยตรง แต่ความกว้างและความสูงจะมาจากแอตทริบิวต์เนทีฟที่เกี่ยวข้อง สิ่งที่น่าสนใจคือ บอกได้ว่าสไตล์นี้ยังรับค่ามาจากแท็ก <center>, แท็ก <body> และอื่นๆ ด้วย
แม้การได้เห็นสไตล์แต่ละสไตล์และที่มาของแต่ละสไตล์อาจเป็นเรื่องที่ยอดเยี่ยม แต่การดูชุดรูปแบบสุดท้ายหลังจากคำนวณและนำไปใช้กับองค์ประกอบแล้วก็มีประโยชน์อย่างยิ่ง คุณดูผลิตภัณฑ์ขั้นสุดท้ายได้โดยเลือกเมนูรูปแบบที่คำนวณตามที่แสดงในภาพหน้าจอด้านล่าง
ต่อไป เราจะมาดูสั้นๆ เกี่ยวกับฟีเจอร์อื่นๆ ที่มีในแท็บองค์ประกอบ เราจะอธิบายรายละเอียดเพิ่มเติมต่อไปนี้ในบทความในอนาคต
โมเดล Box
คุณดูรูปแบบกล่องที่นำไปใช้กับองค์ประกอบที่เลือกได้โดยการเลือกเมนูเมตริก ดังนี้
คุณสมบัติขององค์ประกอบ
คุณสามารถดูคุณสมบัติทั้งหมดขององค์ประกอบแบบที่ JavaScript และ DOM เห็น โดยเลือกเมนู "คุณสมบัติ" ดังนี้
Listener เหตุการณ์
และสุดท้าย คุณยังสามารถดู Listener เหตุการณ์ที่แนบอยู่หรือที่ฟองอากาศนั้นผ่านองค์ประกอบผ่านเมนู Listener เหตุการณ์ โดยทำดังนี้
สรุป
มีฟังก์ชันการทำงานมากมายที่สามารถใช้งานได้ผ่านแท็บองค์ประกอบ และบทความในอนาคตจะเจาะลึกเกี่ยวกับแต่ละเมนู
คุณควรใช้แท็บองค์ประกอบเมื่อต้องการดูลักษณะของหน้าเว็บในเบราว์เซอร์ ปัญหาทั่วไป เช่น "สไตล์นี้คำนวณอย่างไร" หรือ "แท็ก HTML ใดสร้างคอมโพเนนต์นี้" สามารถตอบได้อย่างรวดเร็วและง่ายดายผ่านแท็บองค์ประกอบ
ให้คิดว่าแท็บองค์ประกอบเป็น "แหล่งที่มาของการดู" ของ Uber และทำให้หน้าเว็บมีความคมชัดมากขึ้น
หลังจากที่ตรวจสอบหน้าเว็บแล้ว คุณอาจสงสัยว่า HTML, CSS และรูปภาพมาอยู่ในหน้าแรกได้อย่างไร แท็บทรัพยากร (แท็บทรัพยากร) จะอธิบายต่อไปเกี่ยวกับวิธีการที่เบราว์เซอร์ของไคลเอ็นต์และเว็บเซิร์ฟเวอร์สื่อสารกันเพื่อส่งทรัพยากรเหล่านั้น
แหล่งข้อมูล
เมื่อแอปพลิเคชันของคุณใช้งานได้แล้ว ขั้นตอนถัดไปควรเป็นการเพิ่มประสิทธิภาพเครือข่ายและแบนด์วิดท์ คุณควรมุ่งทำให้การโอนแอปพลิเคชันจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์ทำได้รวดเร็วและมีประสิทธิภาพมากที่สุด ผู้ใช้จะขอบคุณสำหรับการโหลดหน้าเว็บที่เร็ว ช่วยประหยัดทั้งแบนด์วิดท์และทรัพยากรของเซิร์ฟเวอร์ และยังทำคะแนนได้มากขึ้นในอันดับผลการค้นหาของ Google (ซึ่งตอนนี้คำนึงถึงความเร็วเว็บไซต์ด้วย)
แท็บทรัพยากรในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คือหน้าต่างสู่การสื่อสารระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์ของไคลเอ็นต์ คุณสามารถดูทรัพยากรทั้งหมดที่เบราว์เซอร์ขอได้ (ซึ่งเป็นเรื่องที่น่าประหลาดใจเสมอ) เวลาที่ใช้ในการรับทรัพยากรจากเซิร์ฟเวอร์ และปริมาณแบนด์วิดท์ที่ใช้ระหว่างการโอน
ตามหลักแล้ว การเรียกใช้แท็บทรัพยากรจะส่งผลต่อประสิทธิภาพของการโหลดหน้าเว็บ ดังนั้นจึงปิดใช้งานโดยค่าเริ่มต้น ครั้งแรกที่คุณเข้าถึงฟังก์ชันการทำงาน คุณจะต้องเปิดใช้ฟังก์ชันสำหรับหน้าเว็บที่คุณกำลังดูอยู่
เราขอแนะนำให้คุณเลือก "เปิดใช้สำหรับเซสชันนี้เท่านั้น" ซึ่งเป็นค่าเริ่มต้นไว้ เนื่องจากคุณไม่ต้องการเสียประสิทธิภาพเล็กน้อยโดยไม่จำเป็น เมื่อคุณคลิก "เปิดใช้การติดตามทรัพยากร" หน้าจะโหลดซ้ำ และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะตรวจสอบและแสดงทรัพยากรที่ส่งจากเซิร์ฟเวอร์
ภาพหน้าจอต่อไปนี้แสดงทรัพยากรที่จำเป็นและโหลดสำหรับหน้าแรกของ Google
หน้าจอนี้มีข้อมูลมากมาย ดังนั้นลองมาดูข้อมูลทีละส่วน
ลักษณะการทำงานเริ่มต้นคือการแสดงให้คุณเห็นระยะเวลาที่ใช้ในการส่งคำขอและโหลดทรัพยากรทั้งหมดของหน้า การเลื่อนลงมาที่รายการทรัพยากรอาจทำให้คุณประหลาดใจ เนื่องจากคุณอาจไม่ทราบว่ามีคำขอแต่ละรายการจากลูกค้ามากน้อยเพียงใด คำขอจำนวนมากจากลูกค้าอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ การได้เห็นข้อมูลว่าสิ่งที่ขอไปจริงๆ คืออะไรเป็นขั้นตอนแรกในการเพิ่มประสิทธิภาพและการลดทรัพยากรในท้ายที่สุด
หากคุณสนใจเฉพาะภาพหรือสไตล์ชีต คุณสามารถกรองประเภททรัพยากรโดยใช้เมนูโดยตรงในหน้าต่างแท็บหลัก
และจะเห็นลำดับการขอทรัพยากรด้วย เมื่อใช้การแสดงไทม์ไลน์ คุณจะเข้าใจมากขึ้นว่าเหตุใดองค์ประกอบบางอย่างในหน้าเว็บจึงปรากฏหลังองค์ประกอบอื่น
หลังจากได้เห็นภาพรวมของทรัพยากรที่ขอทั้งหมดและวิธีที่ทรัพยากรเหล่านั้นเขียนลำดับเวลาคำขอทั้งหมดแล้ว คุณจะต้องเจาะลึกไปที่ทรัพยากรแต่ละรายการ
หากคุณพบว่ามีการขอทรัพยากรบางรายการทุกครั้งที่คุณเข้าถึงหน้าเว็บ นั่นเป็นสัญญาณว่าส่วนหัวการแคชของคุณกำหนดค่าไว้ไม่ถูกต้อง คุณสามารถดูส่วนหัวทั้งหมดของแหล่งข้อมูลได้โดยคลิกแหล่งข้อมูลในรายการด้านซ้ายมือ
ใช้การแสดงผลส่วนหัวเพื่อให้แน่ใจว่ามีการตั้งค่าโค้ดตอบกลับ HTTP ที่คาดหวังไว้แล้ว และมีการระบุส่วนหัวที่เหมาะสม ตัวอย่างเช่น หากทรัพยากรแทบไม่มีการเปลี่ยนแปลงหรือไม่เคยมีการเปลี่ยนแปลง เซิร์ฟเวอร์ของคุณควรตั้งค่าส่วนหัว "วันหมดอายุ" ให้ไกลออกไปในอนาคต ซึ่งจะแจ้งให้เบราว์เซอร์ทราบว่าไม่ควรขอทรัพยากรอีกจนกว่าจะถึงวันดังกล่าว ซึ่งจะช่วยลดปริมาณการเชื่อมต่อ HTTP ที่จำเป็นสำหรับหน้าเว็บและช่วยให้เว็บไซต์ทำงานได้เร็วขึ้น
สรุป
ยังมีสิ่งอื่นๆ อีกมากมายในแท็บแหล่งข้อมูล ซึ่งเราจะพูดถึงในบทความในอนาคต
ใช้แท็บทรัพยากรเพื่อดูข้อมูลว่าเบราว์เซอร์ของไคลเอ็นต์ของคุณสื่อสารกับเว็บเซิร์ฟเวอร์อย่างไร เมื่อใช้ข้อมูลนี้ เช่น เวลาส่งคำขอ ขนาดคำขอ และลำดับคำขอ คุณจะสามารถทำการเพิ่มประสิทธิภาพอัจฉริยะเพื่อลดภาระงานของเซิร์ฟเวอร์ ต้นทุน รวมถึงเพิ่มความเร็วและปรับปรุงประสบการณ์ของผู้ใช้
ความเร็วเป็นสิ่งที่สำคัญมากต่อเว็บไซต์ ผู้ใช้ และเครื่องมือค้นหาของคุณ เมื่อคุณลดจำนวนและขนาดของทรัพยากรลง และมีการสนทนาผ่าน HTTP ที่เหมาะสมแล้ว ขั้นตอนต่อไปคือการตรวจสอบและเพิ่มประสิทธิภาพสคริปต์ที่ทำงานในหน้าเว็บของคุณ แต่โชคดีที่แท็บสคริปต์ซึ่งจะกล่าวถึงในลำดับต่อไป
แหล่งข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ดังนี้
- วิดีโองานนำเสนอและสไลด์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome จาก Google I/O 2010
- บทแนะนำเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome
และแน่นอนว่า โปรดติดตาม html5rocks.com สำหรับส่วนที่ 2 ของบทความนี้ ตลอดจนเนื้อหา HTML5 และ Chrome ที่ยอดเยี่ยมอื่นๆ อีกมากมาย