คำแนะนำในการติดตั้ง Firebug ในเบราว์เซอร์หลักและอุปกรณ์ iOS

Firebug เป็น Firefox add-on พร้อมเครื่องมือสุดเจ๋งในการตรวจสอบองค์ประกอบของหน้าเว็บตรวจแก้จุดบกพร่องและพัฒนาหน้าเว็บ อย่างไรก็ตามไม่มีวิธีที่คุณสามารถมีเครื่องมือเหล่านี้ในเว็บเบราว์เซอร์อื่นนอกเหนือจาก Firefox.

การพัฒนาเครื่องมือที่คล้ายกันสำหรับเบราว์เซอร์อื่นอาจทำงานหนัก แต่มันจะช่วยได้มากถ้าคุณสามารถให้ Firebug ทำงานบนเบราว์เซอร์อื่นได้เช่นกันเนื่องจากทุกคนมีเบราว์เซอร์ที่ต้องการ.

นี่คือที่ที่ Firebug Lite เข้ามาเพื่อแก้ไขความต้องการของคุณ Firebug Lite เป็นเวอร์ชั่นที่ง่ายกว่าของ Firebug แต่สามารถใช้กับ IE, Opera, Chrome, Safari, iPad และ iPhone ในขณะที่ยังคงคุณสมบัติและคุณสมบัติที่คล้ายกัน.

การติดตั้ง Firebug Lite บน Opera, Safari & Chrome

ด้วย Firebug Lite ไม่จำเป็นต้องติดตั้งใด ๆ เขียนใน Java Script คุณสามารถบุ๊กมาร์กลิงก์ Firebug Lite และพร้อมสำหรับการตรวจสอบหน้าเว็บ ดังนั้นสิ่งที่คุณต้องทำก็คือทำบุ๊กมาร์กลิงค์ด้านล่าง (คุณสามารถลากลิงค์ไปยังแถบบุ๊กมาร์กของเบราว์เซอร์ของคุณ).

Firebug Lite

หากคุณใช้เบราว์เซอร์ Chrome บุ๊คมาร์คควรปรากฏดังด้านล่างหากแถบบุ๊กมาร์กของคุณมองเห็นได้.

เพียงเท่านี้ Firebug Lite ของคุณควรทำงานเมื่อคุณต้องการใช้งาน.

ใช้ Firebug Lite บน Opera, Safari & Chrome

ตอนนี้คุณสามารถใช้ Firebug Lite เพื่อตรวจสอบหน้าเว็บใด ๆ สำหรับตัวอย่างนี้เราจะใช้ Wikipedia.org.

เมื่อโหลดหน้าเว็บแล้วให้คลิกที่บุ๊คมาร์ค Firebug Lite ที่คุณบันทึกไว้ก่อนหน้านี้และคุณจะเห็นกล่องคอนโซลปรากฏขึ้นที่ด้านล่างของหน้าเว็บ.

หากเราใกล้ชิดนี่คือสิ่งที่คุณจะเห็นที่ด้านล่างซ้ายของหน้า.

ตอนนี้คุณสามารถดู (+) และ (-) ที่จุดเริ่มต้นของหลายบรรทัด (+) หมายถึงมีบรรทัดปิดมากกว่าหนึ่งบรรทัดของ html และถ้าคุณเน้นบรรทัดคุณจะเห็นว่าส่วนใดของหน้า.

แต่ถ้าคุณต้องการทำให้ง่ายต่อการมองเห็นเส้นที่แสดงโดยข้อความรูปภาพลิงก์หรือองค์ประกอบอื่น ๆ บนหน้าเว็บเองให้คลิกที่ปุ่ม 'ตรวจสอบ'.

ตอนนี้คุณสามารถเลื่อนเคอร์เซอร์ของเมาส์ไปที่ส่วนใด ๆ ขององค์ประกอบที่มีอยู่บนหน้าเว็บและคุณจะเห็นบรรทัด html ที่ไฮไลต์ วิธีนี้ช่วยให้คุณทำการตรวจสอบได้ง่ายขึ้น.

การติดตั้ง Firebug Lite บน iPad & iPhone

Bookmarklets ทำงานได้ไม่ดีกับ iPad และ iPhone หากต้องการติดตั้ง Firebug Lite บน iPad และ iPhone นี่คือวิธี:

1. คั่นหน้านี้ไว้บน iPad หรือ iPhone ของคุณ.

   

2. เปลี่ยนชื่อบุ๊คมาร์คเป็น "Firebug".

   

3. เลือกและคัดลอกสคริปต์ทั้งหมดด้านล่าง.

   javascript: (ฟังก์ชั่น (F, I, R, E, B, U, G, L, I, T, E) if (F.getElementById (ข)) ผลตอบแทน; E = F [i + 'NS'] && F ? documentElement.namespaceURI; E = E F [i + 'NS'] (E 'สคริปต์'): F [I] ( 'สคริปต์'); E [r] ( 'id' b); E [r] ( 'src' ผม + G + T); E [r] (ขมึง); (F [อี] ( 'หัว') [0] || F [อี] ( 'ร่างกาย') [0]) appendChild (E); E =% ใหม่ 20Image; E [r] ( 'src' ผม + L);) (เอกสาร 'createElement', 'setAttribute', 'getElementsByTagName', 'FirebugLite', '4' 'วางเพลิง-lite.js', 'รุ่น / Lite / ล่าสุด / ผิว / XP / sprite.png', 'https: //getfirebug.com/','#startOpened');

4. ไปที่ตัวเลือกบุ๊กมาร์กแล้วกด "แก้ไข" จากนั้นเลือกบุ๊คมาร์ค "Firebug".

   

5. ลบ URL เดิมและวาง bookmarklet.

   

6. เลือก “เสร็จสิ้น” บนคีย์บอร์ดของคุณ.

ตอนนี้ลองเปิดเว็บไซต์ใด ๆ แล้วเลือกบุ๊กมาร์ก "Firebug" และคุณจะเห็นการทำงานของ Firebug ที่ด้านล่างของหน้าจอ iPad ของคุณ.

ข้อสรุป

Firebug Lite นั้นดีพอที่จะทำการตรวจสอบหน้าเว็บอย่างรวดเร็ว คุณสามารถดู html, css และสคริปต์ใด ๆ ที่ใช้สร้างเว็บเพจ แม้ว่า Chrome จะมีส่วนต่อขยายสำหรับนักพัฒนาเว็บของตัวเอง แต่ Firebug Lite ก็ไม่ทำให้ผิดหวังสักไมล์.