วันอาทิตย์ที่ 27 เมษายน พ.ศ. 2557

การใช้ Firebug ตรวจสอบองค์ประกอบเว็บไซต์

         ถ้ากำลังสร้างเว็บไซต์หรือ ศึกษาโครงสร้างการเรียกใช้ภาพ, Script, CSS ฯลฯ สามารถแก้ไขค่าต่างๆ ได้เสมือนกับแก้ไขค่าในไฟล์จริง โดยไม่กระทบกับไฟล์จริงเป็นเพียงการจำลอง
 ตัว Add on คู่บุญของ Browser  Firefox จะช่วยให้ทุกสิ่งดูง่ายขึ้น สามารถ Dowload และติดตั้งได้เองจากเว็บไซต์ https://getfirebug.com/ เปิด Browser ขึ้นมาแล้วกด F12 หรือ คลิกไอคอน
1. คลิกที่ไอคอนดังรูป แล้วเลือกจุดหรือ Element ที่ต้องการตรวจสอบ
2. แท็บ Style คือส่วนที่เราใช้ดูว่า Element ดังกล่าวเรียกใช้ CSS ตัวไหนอยู่คุณสามารถทำการ Hide หรือแก้ไขตัวเลขได้
3. คือไฟล์เต็มที่เรียกมาใช้ ตามตัวอย่างเมื่อคลิกจะไปที่แท็บ CSS ซึ่งบางครั้งไฟล์อาจถูกเรียกมาจากที่อื่นมันจะขึ้นข้อความว่า "<system>" อย่างที่พอจะเข้าใจว่าเป็น Ghost file
4. ในส่วนนี้เป็น HTML เราสามารถจะแก้ไขไฟล์ได้เช่นกัน เป็น index ที่เรียกใช้ไฟล์ทุกชนิด มีการเรียกใช้ในแท็ก  <head> ดังนี้
  <head>
  <title>Money management</title>
    <script type="text/javascript" src="js/jquery.selectBox.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
 </head>


ถ้าเรียกใช้ไฟล์ .css จะเป็น <link> ถ้าเป็นไฟล์ .js ของ Jquery จะใช้ <script>


ไม่มีความคิดเห็น:

แสดงความคิดเห็น