มาจับ Bug ด้วย Firebug กันเถอะ
วันนี้ผมจะแนะนำตัว 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
ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ
เยี่ยมครับ อยากให้แนะนำคำสั่งเจ๋งๆของ firebug กับ developer toolbar จัง ^^
developer tool นั่นคืออะไรหว่า ใช่ของ chrome เปล่าอ่ะ = = '
Web Developer มีทั้ง Chrome ทั้ง Firefox
โอ้วว ท่านเทพ @dominixz มาแว้ว ฮ่าๆ
เห
good job!!! bug หาง่าย แถมยัง สามารถปรับ layout ที่ฝั่ง client ช่วยประหยัดเวลาในการ design layout กับ หา bug ไปได้เยอะเลย
แต่ปกติใช้ developer tool ของ ie จัด layout ซะส่วนใหญ่