Google Chrome ไม่ได้เป็นเพียงเบราว์เซอร์สำหรับผู้บริโภคที่รวดเร็วเท่านั้น แต่ยังซ่อนคุณลักษณะต่างๆ ของนักพัฒนาซอฟต์แวร์ไว้ภายใต้ประทุนอีกด้วย คุณสามารถเปิดเผยพลังบางอย่างได้ด้วยเครื่องมือ "ตรวจสอบ" แม้ว่าในตอนแรกจะล้นหลาม แต่เครื่องมือนี้จะให้ข้อมูลเชิงลึกเกี่ยวกับการสร้างเว็บไซต์ และสามารถช่วยคุณแก้ไขข้อบกพร่องของเว็บไซต์ได้
การเข้าถึงเครื่องมือตรวจสอบ
เครื่องมือตรวจสอบอยู่ในเมนูตามบริบทของ Chrome
คลิกขวาที่องค์ประกอบใดๆ ในเบราว์เซอร์ของคุณและคลิก "ตรวจสอบ" ในเมนูบริบท
หน้าต่างจะปรากฏขึ้นที่ด้านข้างของเบราว์เซอร์ Chrome ดังที่แสดงด้านล่าง สิ่งนี้เรียกว่าแผง DevTools หากคุณเคยใช้ Firebug บน Firefox คุณอาจรู้จักบางส่วนของมัน
มีมากมายที่นี่ ลองตรวจสอบแต่ละชิ้นกัน
ตรวจสอบสารวัตร
แผงการตรวจสอบแบ่งออกเป็นแท็บต่างๆ หลายแท็บ ซึ่งมองเห็นได้ที่ด้านบนของหน้าต่าง เราจะเน้นที่แท็บองค์ประกอบเริ่มต้น
มีปุ่มที่มีประโยชน์สองปุ่มถัดจากแท็บเหล่านี้ อย่างแรกคือเครื่องมือตรวจสอบองค์ประกอบ
เครื่องมือนี้ช่วยให้คุณวางเมาส์เหนือและเลือกองค์ประกอบ DOM ต่างๆ เพื่อตรวจสอบได้
ปุ่มที่สองจะเปิดโหมดแสดงตัวอย่างอุปกรณ์ ในโหมดนี้ คุณสามารถดูว่าหน้าเว็บของคุณมีลักษณะอย่างไรในความละเอียดและขนาดหน้าจอต่างๆ
หากคุณคลิกที่ปุ่มนั้น คุณจะเห็นหน้าเว็บของคุณจัดอยู่ในมุมมองใหม่
จากนั้น คุณสามารถใช้เมนูแบบเลื่อนลงเหนือการแสดงตัวอย่างหน้าหรือแฮนเดิลที่ด้านข้างของการแสดงตัวอย่างหน้าเพื่อปรับขนาดหน้าต่างแสดงตัวอย่างอุปกรณ์
มุมมอง HTML
แท็บ DevTools ส่วนใหญ่ถูกครอบครองโดยบานหน้าต่าง HTML
บานหน้าต่างนี้เหมือนกับ "View Source" ที่มีพลังพิเศษ มีโครงสร้างตาม DOM โดยมีองค์ประกอบซ้อนอยู่ภายในองค์ประกอบหลัก
คุณจะเห็นว่าองค์ประกอบที่คุณ "ตรวจสอบ" ในตอนเริ่มต้นจะถูกเน้นโดยอัตโนมัติด้วยพื้นหลังสีเทาหรือสีน้ำเงิน ฉันได้ตรวจสอบรูปภาพที่มีอยู่ในลิงก์แล้ว ตามที่คาดไว้ ฉันเห็นแท็กจุดยึดที่ไฮไลต์
แต่ภาพลักษณ์ของฉันอยู่ที่ไหน ฉันสามารถเปิดเผยองค์ประกอบ DOM ที่ซ้อนอยู่ในแท็ก Anchor โดยคลิกที่สามเหลี่ยมแสดงผลถัดจาก ในกรณีนี้ ลูกศรจะแสดงแท็ก ที่ฉันคาดว่าจะพบ
คุณจะสังเกตเห็นแถบเมนูเล็กๆ ที่ด้านล่างของบานหน้าต่าง HTML
สิ่งนี้เรียกว่าเส้นทางแสดงเส้นทาง และจะแสดงองค์ประกอบหลักทั้งหมดขององค์ประกอบที่เลือก หากต้องการนำทางไปยังองค์ประกอบใดองค์ประกอบหนึ่ง ให้คลิกที่องค์ประกอบนั้น
รูปแบบ
ใต้มุมมอง HTML เรายังเห็นบานหน้าต่างที่แสดงกฎ CSS ใดๆ ที่ใช้กับองค์ประกอบของเรา นี่เรียกว่าบานหน้าต่างรูปแบบ และในกรณีนี้ เราจะเห็นกฎทั้งหมดที่ใช้กับแท็กจุดยึดที่ฉันตรวจสอบก่อนหน้านี้
คุณเปิดหรือปิดกฎได้โดยวางเมาส์เหนือกฎแล้วคลิกช่องทำเครื่องหมายข้างๆ
คุณจะเห็นการเปลี่ยนแปลงนี้ปรากฏในหน้าตัวอย่างทันที และหากคุณคลิกบนกฎโดยตรง คุณจะเปลี่ยนชื่อและค่าของกฎได้
คุณยังค้นหากฎเฉพาะได้โดยใช้ช่องค้นหาตัวกรอง
อย่างไรก็ตาม บานหน้าต่างลักษณะมีความสามารถมากกว่านั้น ดูเอกสารประกอบของ Google เพื่อดูคำอธิบายแบบเต็มเกี่ยวกับฟังก์ชันต่างๆ ของบานหน้าต่างรูปแบบ
โมเดลกล่องและรูปแบบการคำนวณ
ถัดจากมุมมองสไตล์คือโมเดลกล่องสำหรับองค์ประกอบที่ฉันเลือก หากไม่คุ้นเคย รูปแบบกล่องจะเป็นภาพนามธรรมของระยะขอบ เส้นขอบ ช่องว่างภายใน และขนาดเนื้อหาที่ใช้กับองค์ประกอบเฉพาะ
ในกรณีนี้ ฉันจะเห็นว่าองค์ประกอบของฉันมีขนาดหลัก 461 x 209 พิกเซล ไม่มีกฎระยะขอบ เส้นขอบ หรือช่องว่างภายใน ดังนั้นกล่องเหล่านั้นจึงว่างเปล่า
หากคุณเลือกองค์ประกอบที่มีกฎตำแหน่ง ระยะขอบ เส้นขอบ หรือช่องว่างภายใน รูปแบบกล่องของคุณอาจมีลักษณะเช่นนี้
คุณยังสามารถดู ในแหล่งกำเนิด โมเดลกล่องหากคุณวางเมาส์เหนือองค์ประกอบ DOM โดยเปิดใช้งานเครื่องมือตรวจสอบองค์ประกอบ
ด้านล่างของโมเดลกล่องคือรายการกฎการจัดสไตล์ทั้งหมดที่ใช้กับองค์ประกอบเฉพาะนี้ ซึ่งแตกต่างจากบานหน้าต่างลักษณะเล็กน้อย ไม่แสดงบรรทัดจริงของ CSS – เฉพาะผลกระทบของกฎเหล่านั้น ซึ่งเรียกว่า "รูปแบบที่คำนวณ" ของออบเจ็กต์ และเป็นผลรวมของ CSS ของคุณ
สุดท้าย คุณสามารถค้นหากฎเฉพาะโดยพิมพ์ในช่องตัวกรอง
บทสรุป
หากคุณทำงานกับหน้าเว็บบ่อยๆ เครื่องมือตรวจสอบของ Chrome ก็คุ้มค่าที่จะสำรวจ และแท็บอื่นๆ ใน DevTools เช่น Console และ Network นั้นมีค่าสำหรับนักพัฒนา มีอะไรมากกว่าที่เราอธิบายได้ในตอนนี้ แต่เอกสารของ Google เองนั้นละเอียดและมีประโยชน์
