You are here
Home > General > มาจับ Bug ด้วย Firebug กันเถอะ ^^/

มาจับ Bug ด้วย Firebug กันเถอะ ^^/

มาจับ Bug ด้วย Firebug กันเถอะ

firebug_header_picture

วันนี้ผมจะแนะนำตัว add-on ดีๆจากหมาไฟของพวกเรา ( เฮ้… ) โดย add-on ตัวนี้นั้น เรา้ต้องไปทำความรู้จักกับมันไว้มากๆ เพราะว่ามันช่วยเหลือเราหลายเรื่องหลายอย่างกันเลยทีเดียว อย่างเช่นหลายๆคนนั้นชอบเขียน javascript แล้วไม่ทราบว่ามัน error ตรงไหน แต่ถ้าคุณยิ่งใช้ IE ด้วยแล้วนั้นไซร์ คุณต้องเจอกับคำแสดงข้อผิดพลาดที่ยากต่อการเดาว่าควรจะแก้ไขตรงไหน แต่วันนี้คุณไม่ต้องปวดหัวอีกแล้วรับ เพราะเรามาแนะนำสิ่งดีๆ ( เอ๊ะ ! คุ้นๆนะเหมือนเคยได้ยินจากไหน ) ให้คุณแล้วติดตามโลดดดดดดดด

เขียนไว้หัวเรื่องว่าเป็นการจับบัค แต่มันก็ยังมีฟังก์ชั่นอื่นมาช่วยให้เราทำงานสะดวกขึ้นด้วยนะครับ สิ่งที่เราต้องเตรียมก่อนคือ Firefox และพระเอกของเราคือ firebug วิธีการติดตั้ง add-on งั้นเรามาเริ่มกับการจับ Bug ( บัค )  กันก่อนเลยแล้วกัน สมมติว่าผมเขียน javascript มาหนึ่งตัวอย่าง ซึ่งด้านล่างเป็นสคิร์ปที่หลายๆคนนั้นชอบทำเป็นประจำคือการเช็คค่าว่า user ใส่ค่าที่ต้องการหรือว่าไม่อยากให้ค่านั้นเป็นค่าว่าง

[php]
<html>
<head>
<script type="text/javascript">

function test()
{
var name =
if(name == "")
{
alert("Please, input value into Name’s text box.");
}
}
function test2()
{
var m = 2;
alert(m);
}

</script>

<title>Test firebug</title>
</head>
<body>
<input type="text" name="name" value="" onclick="test();" />

</body>
</html>

[/php]

จากตัวอย่างแล้วถ้าคุณไปเปิดใน IE คุณจะพบกับข้อความเตือนข้อผิดพลาดอย่างนี้

ซึ่งจะอ่านลำบากมาก ไม่เข้าใจว่าให้ไปตามที่ไฟล์นั้น ถ้าอย่างนั้นเรามาลองดูการรายงานของ firebug เปิด firefox แล้วกด F12 หรือคลิกรูปแมลงด้านล่างขวามือ จะเห็นว่าตัวแมลงเป็นสีขาวดำอยู่ ให้ทำการคลิกที่ตัวหรือกด F12 ตัวแมลงจะเป็นสีส้มครับ แล้วทำการเรียกหน้าเพจที่ต้องการเช็ค ดูได้จากรูปด้านล่าง

สวยและอ่านง่ายกว่ากันเยอะเลยฮ่าๆ ทีนี้เข้าใจแล้วหรือยังว่าทำไมมัีนน่าใช้ ยังครับ ยังไม่หมด !! ที่มันเจ๋งคือเราสามารถตรวจการส่งข้อมูลเวลาที่คุณใช้เทคโนโลยี Ajax ซึ่งหลายคนที่ผมเจอนั้นชอบทำแบบ Form แบบเลือก select menu แล้วเรียกข้อมูลมาใส่ใน Form ด้านล่างอีกทีซึ่งผมจะทำตัวอย่างแบบง่ายๆและ การเกิด error ให้ดูครับ ติดตาม มาจับ Bug ด้วย Firebug กันเถอะ part 2

admin
เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวด้วย www.readraide.in.th
//www.oxygenyoyo.com
  • เยี่ยมครับ อยากให้แนะนำคำสั่งเจ๋งๆของ firebug กับ developer toolbar จัง ^^

  • developer tool นั่นคืออะไรหว่า ใช่ของ chrome เปล่าอ่ะ = = '

  • Web Developer มีทั้ง Chrome ทั้ง Firefox

  • โอ้วว ท่านเทพ @dominixz มาแว้ว ฮ่าๆ

  • Poxy

    เห

  • Casxoon

    good job!!! bug หาง่าย แถมยัง สามารถปรับ layout ที่ฝั่ง client ช่วยประหยัดเวลาในการ design layout กับ หา bug ไปได้เยอะเลย
    แต่ปกติใช้ developer tool ของ ie จัด layout ซะส่วนใหญ่

Top