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