เกริ่นนำ
Google Chrome เป็นเว็บเบราว์เซอร์ที่สมบูรณ์และทรงประสิทธิภาพ ซึ่งริเริ่มสิ่งที่เป็นไปได้สำหรับแอปพลิเคชันบนเว็บ Google ทำงานอย่างหนักเพื่อมอบประสบการณ์การท่องเว็บที่รวดเร็ว มีความเสถียร และมีฟีเจอร์มากมายสำหรับผู้ใช้ปลายทาง Google ยังดำเนินการให้นักพัฒนาซอฟต์แวร์เช่นคุณได้รับประสบการณ์การใช้งาน Chrome ที่ดีเยี่ยมอีกด้วย เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ซึ่งรวมอยู่ใน Chrome และ Safari ช่วยให้นักพัฒนาเว็บและโปรแกรมเมอร์สามารถเข้าถึงการทำงานภายในของเบราว์เซอร์และเว็บแอปพลิเคชันได้
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เป็นส่วนหนึ่งของโครงการ Webkit แบบโอเพนซอร์ส หัวข้อสนทนาส่วนใหญ่ในบทความนี้ใช้กับทั้ง Google Chrome และ Safari อย่างไรก็ตาม ภาพหน้าจอบันทึกโดยใช้ Google Chrome 6 จึงอาจมีความแตกต่างเล็กน้อยในเบราว์เซอร์ของคุณ
ในบทความนี้ เราจะดูภาพรวมของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และชี้ให้เห็นฟีเจอร์ที่ได้รับความนิยมและมีประโยชน์มากที่สุด กลุ่มเป้าหมายของเราคือนักพัฒนาเว็บที่ยังไม่ทราบหรือยังไม่ได้ตรวจสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ อย่างไรก็ตาม เรามั่นใจว่าแม้ว่าคุณจะเป็นนักพัฒนาเว็บที่มีประสบการณ์ คุณก็จะมีเคล็ดลับดีๆ สักข้อ
หากอินสแตนซ์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไม่ตรงกับภาพหน้าจอที่พบในบทความนี้ เราขอแนะนำให้คุณอัปเกรดเป็น 5 เพื่อให้คุณสามารถทำตามและรับสิทธิ์เข้าถึงฟีเจอร์ทั้งหมดที่อธิบายไว้ที่นี่
ภาพรวม
โดยรวมแล้ว จะมีกลุ่มเครื่องมือหลัก 8 กลุ่มที่ใช้ได้ในมุมมองเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และขีดความสามารถจะเพิ่มขึ้นในทุกๆ รุ่น ตอนนี้ Chrome 5 มีองค์ประกอบ ทรัพยากร สคริปต์ ไทม์ไลน์ โปรไฟล์ พื้นที่เก็บข้อมูล การตรวจสอบ และคอนโซล
องค์ประกอบ
เครื่องมือ "องค์ประกอบ" ช่วยให้คุณเห็นหน้าเว็บอย่างที่เบราว์เซอร์เห็น กล่าวคือ เมื่อใช้เครื่องมือองค์ประกอบ คุณจะสามารถดู HTML ดิบ, รูปแบบ CSS ดิบ, Document Object Model และจัดการได้แบบเรียลไทม์
แหล่งข้อมูล
ใช้เครื่องมือทรัพยากรเพื่อเรียนรู้ว่าหน้าเว็บหรือแอปพลิเคชันของคุณร้องขอคอมโพเนนต์ใดจากเว็บเซิร์ฟเวอร์ คำขอเหล่านี้ใช้เวลานานเท่าใด และปริมาณแบนด์วิดท์ที่ต้องใช้ คุณยังดูคำขอ 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 แบบย่อหรือน่าเกลียดซึ่งทำให้ดูได้ยากว่าหน้าเว็บมีโครงสร้างอย่างไร แท็บองค์ประกอบคือทางออกสำหรับการดูโครงสร้างพื้นฐานที่แท้จริงของหน้า
ตัวอย่างเช่น ต่อไปนี้เป็นเอาต์พุตจาก "ดูแหล่งที่มา" ของหน้าแรกของ Google
แหล่งที่มาด้านบนนี้อ่านได้ยากเนื่องจากมีการเพิ่มประสิทธิภาพและลดขนาดแล้ว รูปแบบนี้เหมาะกับไคลเอ็นต์และเซิร์ฟเวอร์ แต่นักพัฒนาซอฟต์แวร์อาจดูได้ยาก
แต่เมื่อต้องการอ่านซอร์สโค้ดของหน้าเว็บ ให้ใช้แท็บองค์ประกอบเพื่อดูลำดับชั้นขององค์ประกอบที่ไฮไลต์ด้วยไวยากรณ์ที่สวยงาม
นอกจากนี้ แท็บ องค์ประกอบ ยังช่วยให้คุณเรียกดู โต้ตอบ และบางครั้งยังสามารถเปลี่ยนแปลงรูปแบบ เมตริก พร็อพเพอร์ตี้ และ Listener เหตุการณ์สำหรับองค์ประกอบใดๆ ในหน้าได้อีกด้วย
การเรียกดูสไตล์
ลักษณะการต่อเรียงของ CSS ทำให้เบราว์เซอร์รูปแบบในแท็บองค์ประกอบมีประโยชน์อย่างมาก บางครั้ง รูปแบบจะถล่มลงมาทับตัวเอง แล้วภาพโดยไม่ได้ตั้งใจ การรู้ว่ากฎการจัดรูปแบบที่เบราว์เซอร์นำไปใช้กับองค์ประกอบใดจะช่วยให้คุณแก้ไขข้อบกพร่องของปัญหาดังกล่าวได้
การคลิกองค์ประกอบใดก็ตามในแท็บองค์ประกอบจะแสดงรูปแบบทั้งหมดที่แนบไปกับองค์ประกอบนั้น
คุณจะเห็นในภาพหน้าจอด้านบนว่าเราสามารถบอกแอตทริบิวต์ของสไตล์ทั้งหมดที่ใช้อยู่ได้ ตัวอย่างเช่น ระยะห่างจากขอบมาจากแอตทริบิวต์รูปแบบขององค์ประกอบ <img> โดยตรง อย่างไรก็ตาม ความกว้างและความสูงจะมาจากแอตทริบิวต์เนทีฟของแต่ละรายการ ที่น่าสนใจก็คือคุณจะเห็นได้ว่ามีรูปแบบที่รับช่วงมาจากแท็ก <center>, แท็ก <body> และรูปแบบอื่นๆ ด้วย
แม้ว่าการได้ดูแต่ละสไตล์และแหล่งที่มาของสไตล์ต่างๆ จะเป็นเรื่องดี แต่การเห็นชุดรูปแบบสุดท้ายหลังจากที่คำนวณและนำไปใช้กับองค์ประกอบแล้วก็มีประโยชน์มากเช่นกัน คุณดูผลิตภัณฑ์สุดท้ายได้โดยเลือกเมนู "รูปแบบที่คำนวณ" ดังที่แสดงในภาพหน้าจอด้านล่าง
ต่อไป เราจะมาดูฟีเจอร์อื่นๆ ที่มีให้ในแท็บองค์ประกอบกันบ้าง เราจะอธิบายเรื่องต่อไปนี้โดยละเอียดยิ่งขึ้นในบทความต่อๆ ไป
โมเดล Box
คุณสามารถดูรูปแบบช่องตามที่ใช้กับองค์ประกอบที่เลือกได้โดยเลือกเมนูเมตริก ดังนี้
คุณสมบัติขององค์ประกอบ
คุณสามารถดูคุณสมบัติทั้งหมดขององค์ประกอบในแบบ JavaScript และ DOM จะเห็นได้โดยการเลือกเมนู คุณสมบัติ ดังต่อไปนี้
Listener เหตุการณ์
และสุดท้าย คุณยังดู Listener เหตุการณ์ที่แนบมาหรือลูกโป่งนั้นผ่านองค์ประกอบผ่านทางเมนู Listener เหตุการณ์ได้ โดยทำดังนี้
สรุป
แท็บองค์ประกอบมีฟังก์ชันให้ใช้งานมากมาย และบทความอื่นๆ ในอนาคตจะเจาะลึกลงไปในแต่ละเมนู
คุณควรใช้แท็บองค์ประกอบเมื่อต้องการดูว่าเบราว์เซอร์มองเห็นหน้าในลักษณะใด ปัญหาที่พบบ่อย เช่น "รูปแบบนี้คำนวณอย่างไร" หรือ "แท็ก HTML ใดสร้างคอมโพเนนต์นี้" จะได้รับคำตอบอย่างรวดเร็วและง่ายดายผ่านแท็บองค์ประกอบ
ลองจินตนาการว่าแท็บองค์ประกอบเป็นเหมือน "แหล่งที่มาของข้อมูลพร็อพเพอร์ตี้" uber และเพิ่มการเข้าถึงหน้าเว็บของคุณได้อย่างมีประสิทธิภาพ
หลังจากที่ตรวจสอบหน้านั้นแล้ว คุณอาจสงสัยว่า HTML, CSS และรูปภาพมาอยู่ที่นั่นได้อย่างไรตั้งแต่แรก แท็บทรัพยากร (ดังที่อธิบายในถัดไป) จะแสดงวิธีที่เบราว์เซอร์ของไคลเอ็นต์และเว็บเซิร์ฟเวอร์สื่อสารกันเพื่อส่งทรัพยากรเหล่านั้น
แหล่งข้อมูล
เมื่อแอปพลิเคชันทำงานแล้ว ขั้นตอนถัดไปคือการเพิ่มประสิทธิภาพเครือข่ายและแบนด์วิดท์ คุณควรมุ่งทำให้การโอนแอปพลิเคชันของคุณระหว่างเซิร์ฟเวอร์ถึงไคลเอ็นต์เป็นไปอย่างรวดเร็วและมีประสิทธิภาพที่สุดเท่าที่จะเป็นไปได้ ผู้ใช้จะขอบคุณสำหรับการโหลดหน้าเว็บที่รวดเร็ว คุณจะประหยัดแบนด์วิดท์และทรัพยากรของเซิร์ฟเวอร์ และคุณจะได้รับคะแนนในผลการค้นหาของ Google (ซึ่งตอนนี้คำนึงถึงความเร็วไซต์ด้วย)
แท็บทรัพยากรในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เป็นหน้าต่างสำหรับสื่อสารระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์ไคลเอ็นต์ คุณสามารถดูทรัพยากรทั้งหมดที่เบราว์เซอร์ร้องขอได้ (ซึ่งเป็นเรื่องน่าประหลาดใจเสมอ) ระยะเวลาที่ใช้ในการรับทรัพยากรจากเซิร์ฟเวอร์ และปริมาณแบนด์วิดท์ที่ใช้ในระหว่างการโอน
ตามปกติแล้ว การเรียกใช้แท็บทรัพยากรจะส่งผลต่อประสิทธิภาพการโหลดหน้าเว็บ ดังนั้นจึงปิดใช้โดยค่าเริ่มต้น ครั้งแรกที่เข้าถึงฟังก์ชันนี้ คุณต้องเปิดใช้ฟังก์ชันดังกล่าวสำหรับหน้าที่กำลังดูอยู่
เราขอแนะนําให้เลือก "เปิดใช้สําหรับเซสชันนี้เท่านั้น" ซึ่งเป็นค่าเริ่มต้นไว้ เนื่องจากจะไม่ต้องการให้เกิดผลกระทบกับประสิทธิภาพการทำงานเล็กน้อยโดยไม่จำเป็น เมื่อคุณคลิก "เปิดใช้การติดตามทรัพยากร" หน้าเว็บจะโหลดซ้ำ และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะตรวจสอบและแสดงทรัพยากรที่ส่งจากเซิร์ฟเวอร์
ภาพหน้าจอต่อไปนี้แสดงทรัพยากรที่จำเป็นและโหลดสำหรับหน้าแรกของ Google
หน้าจอนี้มีข้อมูลมากมาย ลองมาดูกันทีละส่วน
ลักษณะการทำงานเริ่มต้นคือการแสดงระยะเวลาที่ใช้ในการขอและโหลดทรัพยากรทั้งหมดสำหรับหน้านั้น การเลื่อนลงตามรายการแหล่งข้อมูลอาจทำให้คุณประหลาดใจ เนื่องจากคุณอาจไม่ทราบจำนวนคำขอแต่ละรายการของลูกค้า คำขอจำนวนมากจากลูกค้าอาจส่งผลต่อประสิทธิภาพอย่างมาก การมีระดับการเข้าถึงข้อมูลที่ขอที่แน่นอนเป็นขั้นตอนแรกในการเพิ่มประสิทธิภาพและการลดทรัพยากรในขั้นสุดท้าย
หากคุณสนใจเฉพาะภาพหรือสไตล์ชีต คุณสามารถกรองประเภททรัพยากรโดยใช้เมนูโดยตรงใต้หน้าต่างแท็บหลัก
นอกจากนี้ คุณจะเห็นลำดับการส่งคำขอทรัพยากรด้วย เมื่อใช้การแสดงเส้นควบคุมเวลา คุณอาจเข้าใจถึงสาเหตุที่องค์ประกอบบางอย่างบนหน้าเว็บแสดงช้ากว่าองค์ประกอบอื่นๆ
หลังจากที่คุณเห็นภาพรวมของทรัพยากรที่ขอทั้งหมดและวิธีที่ทรัพยากรเหล่านั้นเขียนไทม์ไลน์คำขอทั้งหมดแล้ว คุณจะต้องเจาะลึกลงไปที่ทรัพยากรแต่ละรายการ
หากคุณพบว่ามีการขอทรัพยากรบางอย่างทุกครั้งที่คุณเข้าถึงหน้าเว็บ นั่นเป็นสัญญาณว่าส่วนหัวการแคชของคุณมีการกำหนดค่าไม่ถูกต้อง คุณสามารถดูส่วนหัวทั้งหมดของทรัพยากรหนึ่งได้โดยคลิกทรัพยากรในรายการทางซ้าย
ใช้การแสดงส่วนหัวเพื่อให้มั่นใจว่ามีการตั้งค่าโค้ดตอบกลับ HTTP ที่คาดหวังไว้ และมีการระบุส่วนหัวที่เหมาะสมแล้ว ตัวอย่างเช่น หากทรัพยากรแทบไม่มีการเปลี่ยนแปลงหรือไม่เคยมีการเปลี่ยนแปลง เซิร์ฟเวอร์ของคุณควรตั้งค่าส่วนหัว Expiration ให้ในอนาคตไกลมาก ซึ่งจะเป็นการแจ้งให้เบราว์เซอร์ทราบว่าไม่ควรขอทรัพยากรอีกจนกว่าจะถึงวันดังกล่าว วิธีนี้ช่วยลดปริมาณการเชื่อมต่อ HTTP ที่จำเป็นสำหรับหน้าเว็บ จึงช่วยเพิ่มความเร็วเว็บไซต์ได้
สรุป
แท็บแหล่งข้อมูลยังมีสิ่งต่างๆ มากมายซึ่งเราจะกล่าวถึงในบทความต่อๆ ไป
ใช้แท็บทรัพยากรเพื่อดูข้อมูลเกี่ยวกับวิธีที่เบราว์เซอร์ของไคลเอ็นต์สื่อสารกับเว็บเซิร์ฟเวอร์ การใช้ข้อมูลนี้ ซึ่งรวมถึงเวลาของคำขอ ขนาดคำขอ และลำดับคำขอ ทำให้คุณสามารถทำการเพิ่มประสิทธิภาพอย่างชาญฉลาดเพื่อลดปริมาณงานของเซิร์ฟเวอร์ ต้นทุน และเพิ่มความเร็วและปรับปรุงประสบการณ์ของผู้ใช้
ความเร็วเป็นสิ่งสำคัญมากสำหรับเว็บไซต์ ผู้ใช้ และเครื่องมือค้นหาของคุณ เมื่อคุณลดจำนวนและขนาดของทรัพยากรลง และมีการสนทนาผ่าน HTTP ที่เหมาะสม ขั้นตอนต่อไปคือการตรวจสอบและเพิ่มประสิทธิภาพสคริปต์ที่ทำงานอยู่ในหน้าเว็บ โชคดีที่แท็บสคริปต์ที่จะพูดถึงต่อไป เราสามารถทำเช่นนั้นได้
แหล่งข้อมูลเพิ่มเติม
หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เราขอแนะนำสิ่งต่อไปนี้
- วิดีโอและสไลด์งานนำเสนอเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome จากงาน Google I/O 2010
- บทแนะนำเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
และแน่นอนว่า โปรดติดตาม html5rocks.com สำหรับส่วนที่ 2 ของบทความนี้ รวมถึงเนื้อหา HTML5 และ Chrome ที่ยอดเยี่ยมอื่นๆ อีกมากมาย