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

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

firebug_header_picture

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

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

<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>

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

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

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

6 responses to “มาจับ Bug ด้วย Firebug กันเถอะ ^^/”

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

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: