หากคุณเคยอยากรู้ว่าเว็บไซต์โปรดของคุณโครงสร้างอย่างไร บริการ "Inspect" ของเบราว์เซอร์สามารถเป็น आशीर्वाद (blessing) ที่ซ่อนอยู่ เราได้ครอบคลุมเครื่องมือ "Inspect" ของ Chrome และ Firefox ก็มาพร้อมกับการเสนอที่คล้ายกัน
เครื่องมือ Firefox "Inspect Element" สามารถช่วยคุณสำรวจโครงสร้างภายใต้การทำงานของเว็บไซต์ รวมถึงองค์ประกอบ HTML และ CSS ที่มันใช้ โหลดบนเครือข่าย ความหน่วงขององค์ประกอบที่โหลด และไฟล์ที่มันวางไว้ในที่จัดเก็บ เช่น คุกกี้
นักพัฒนาที่มีประสบการณ์อาจไม่พบอะไรใหม่มากในบทนำ هذا ผู้เริ่มต้นและผู้ใช้เว็บทั่วไป อย่างไรก็ตาม ควรจะพบด้านใหม่ อันทรงพลังของความสามารถของ Firefox และบ่อน้ำลึกของไฟล์และการดำเนินการที่นั่งภายใต้ทุกไซต์บนอินเทอร์เน็ต
การติดตั้ง
หากคุณใช้ Firefox คุณไม่ต้องทำอะไรเพิ่มเติม หากคุณต้องการเริ่มใช้ Firefox และคุณอยู่บน Windows, Linux, Mac, iOS หรือ Android ตามลิงก์นี้เพื่อหาเวอร์ชันล่าสุดของเบราว์เซอร์ ติดตั้งไฟล์ติดตั้งที่ดาวน์โหลดมาเหมือนปกติ โดยดับเบิลคลิกหรือแตะหากคุณอยู่บนสมาร์ทโฟน
Major Linux distros น่าจะมาพร้อม Firefox ติดตั้งไว้แล้ว หรือมีสำเนาของ Firefox ใน Software center/ซอฟต์แวร์ repository ซึ่งผู้ใช้สามารถติดตั้งได้ง่าย
เปิด "Inspect Element"
หลังจากติดตั้ง Firefox คุณสามารถหา inspector ของมันได้โดยคลิกขวาที่องค์ประกอบใดๆ บนเว็บเพจ นั่นจะแสดงเมนูดรอปดาวน์อย่างภาพด้านล่าง ซึ่ง "Inspect Element" ตั้งอยู่ใกล้ด้านล่างของรายการ
Inspector (ตัวตรวจสอบ)
การคลิก "Inspect Element" จะเปิด inspector ทันทีที่ด้านล่างของหน้าจอของคุณ ณ จุดนี้ ชื่อเรื่องอาจมีความคลุมเครือเล็กน้อย เนื่องจาก inspector จะเปิดส่วน "Inspector" ของบริการของมันอย่างเป็นทางการ
ในทุกกรณี องค์ประกอบที่คุณคลิกจะแสดงตรงกลางของเครื่องมือ และเมื่อคุณรันเมาส์เหนือองค์ประกอบนั้น - เช่น แท็ก <div> ที่ผมชี้อยู่ในภาพหน้าจอด้านล่าง - "Inspector" จะไฮไลท์องค์ประกอบภาพนั้นบนหน้าจอของคุณในเว็บเพจเอง
สิ่งนี้ทำให้ง่ายต่อการรู้ว่าคุณกำลังดูองค์ประกอบอะไร มันยังทำให้ง่ายต่อการค้นหาคุณสมบัติต่างๆ ขององค์ประกอบเหล่านั้น หากคุณดูด้านขวาของ "Inspector" คุณจะเห็นคุณสมบัติของแท็ก <div> นั้นเฉพาะเจาะจง รวมถึงการตั้งค่า margin, padding, border, font size, และ vertical alignment
หากคุณเลื่อนผ่านแผงด้านขวานั้น คุณสามารถเห็นคุณสมบัติที่มันสืบทอดมาจากองค์ประกอบอื่นๆ คุณแม้แต่สามารถเปลี่ยนคุณสมบัติในหน้าต่างนั้นและเห็นมันปรากฏบนเว็บเพจในเวลาจริง
Style Editor (ตัวแก้ไขสไตล์)
คุณสามารถเดินทางต่อไปในดินแดนของ cascading style sheets (CSS) โดยการติดตามแถบเครื่องมือที่ด้านบนของ inspector คลิกที่ "Style Editor" เพื่อเปิดไดอะล็อกใหม่ที่แสดงแผงใหม่ 3 แผงที่ด้านล่างของหน้าจอ
ที่นี่คุณสามารถเห็นไฟล์สไตล์ชีท 2 ไฟล์ที่ DuckDuckGo ใช้ องค์ประกอบของสไตล์ชีทแรกที่เลือก และกฎ "@media" ต่างๆ ของชีทนั้น ซึ่งควบคุม responsive design สำหรับหน้าจอเล็กและใหญ่
คุณสามารถแก้ไขสไตล์ชีทเหล่านี้ได้เหมือนในส่วน "Inspector" ในกรณีนี้มีกฎให้เลือกมากมาย - 1262 กฎในสไตล์ชีทแรกเพียงอย่างเดียว
หากคุณนำทางไปไกลขึ้นในแถบเครื่องมือไปที่ "Network Monitor" คุณจะพบคำขอของเว็บไซต์สำหรับไฟล์เหล่านั้นและสถานะของพวกมัน องค์ประกอบอื่นๆ เช่น รูปภาพและฟอนต์ อาจมีอยู่ในแท็บนั้น และคุณสามารถเห็นคำขอทั้งหมดและขนาดของแต่ละไฟล์หลังจากคำขอถูกประมวลผล
Performance (ประสิทธิภาพ)
เมื่อคุณเปิดแท็บ "Performance" คุณจะต้องคลิกปุ่ม "Start Recording Performance" เพื่อให้ inspector รวบรวมข้อมูล ในไม่กี่วินาที มันจะค้นพบ frames-per-second (FPS) ที่หน้าของคุณรัน document object model (DOM) เหตุการณ์ที่เกิดขึ้น และการคำนวณสไตล์ใหม่ รวมถึงเวลา (ปกติเป็นมิลลิวินาที) ที่องค์ประกอบเหล่านั้นใช้ในการโหลด
สำหรับไซต์นี้ คุณสามารถเห็น DOM event ที่ไฮไลท์ คือ mouseover ใช้เวลา 6.03 มิลลิวินาทีในระยะเวลาในการโหลด ค่าเฉลี่ย FPS สำหรับหน้านี้ประมาณ 39 และแผนภูมิที่แสดงช่วงเวลาตอบสนองของผมถึง 9000 มิลลิวินาทีสำหรับบางเหตุการณ์
Memory (หน่วยความจำ)
ในแท็บ "Memory" คุณจะต้องคลิกปุ่มอีกปุ่มหนึ่ง - "Take Snapshot" - เพื่อรวบรวมข้อมูล สำหรับผม มันสร้างแผนที่เหตุการณ์ที่แสดงประมาณ 600 Kb ของสตริง 1 Mb ของออบเจ็กต์ และ 1 Mb ของสคริปต์ที่หาทางเข้าไปในหน่วยความจำ คุณสามารถดูองค์ประกอบเหล่านี้ในสองสามวิธีโดยการคลิกเมนูดรอปดาวน์ที่พูดว่า "Tree Map" เหมือนที่คุณเห็นในภาพหน้าจอนี้
Storage (ที่จัดเก็บ)
สุดท้าย หากคุณคลิกแท็บ "Storage" คุณสามารถดูไฟล์ถาวรที่เว็บไซต์อาจวางไว้บนคอมพิวเตอร์ของคุณ เกี่ยวข้องกับผู้ใช้ส่วนใหญ่ รวมถึงคุกกี้ คุณสามารถเห็นหนึ่งตัวที่โหลดในภาพด้านล่าง
คุณสามารถเห็นในแผงด้านขวาว่า คุกกี้เฉพาะนี้หมดอายุกลางทศวรรษหน้า และว่าผมเข้าถึงมันในช่วงเซสชันของการเขียนบทความนี้
สรุป
มีอะไรมากมายที่ต้องล่าลือเมื่อใช้ Firefox inspector การแนะนำครั้งแรกนี้สำหรับส่วนต่างๆ หลายส่วนควรทำให้คุณบậnไปได้พักหนึ่ง
ลองใช้เวลาเปลี่ยนองค์ประกอบ HTML ของไซต์ เยี่ยมชมเว็บไซต์ที่ต่างกันเพื่อดูเวลาโหลด ค้นหาว่าหน้าหนึ่งพยายามเก็บคุกกี้กี่ตัวบนเครื่องของคุณ บางครั้ง ข้อมูลนั้นสามารถทำให้คุณหยุดคิด
หวังว่าการเดินทางค้นพบนี้จะให้คุณความเข้าใจที่มากขึ้นเกี่ยวกับสิ่งที่เว็บไซต์ทำ เพื่อให้พวกมันทำงานได้ตามที่คุณคาดหวัง มันอาจมากกว่าที่คุณเคยตระหนักก่อนหน้านี้
