ส่วนของ Console ที่มีมาให้ใน browser มีประโยชน์อย่างมากในการ debug
javascript code ของเรา โดยเมื่อก่อน เราจะใช้วิธีเรียกใช้คำส่ัง alert() เพื่อแสดง
ค่าตัวแปร ข้อความ หรือชุดคำสั่งที่เราต้องการตรวจสอบ เราสามารถใช้งาน console.log()
แทนได้ โดยค่าจะถูกแสดงในส่วนของ console
สร้างไฟล์ทดสอบอย่างง่าย สำหรับใช้งาน console ตัวอย่างเราจะใช้ร่วมกับ jquery
ไฟล์ console.php
ไฟล์ ajax_console.php
ไฟล์ console.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container" style="width:80%;margin:auto;">
<br><br>
<input type="button" value="Click Test" id="my_btn_1" class="btn btn-info">
<br>
<br>
<br>
<input type="button" value="Ajax Test" id="my_btn_2" class="btn btn-success">
</div>
<script type="text/javascript">
$(function(){
$("#my_btn_1").on("click",function(){
var myvar = 200;
console.log("ปุ่มถูกด");
console.log("แสดงค่าตัวแปร -> "+myvar);
});
$("#my_btn_2").on("click",function(){
var mydata = 100;
$.post("ajax_console.php",{
myvar:mydata
},function(data){ // data คือค่าที่ได้จากการ echo แสดงในไฟล์ ajax_console.lphp
console.log("แสดงค่าตัวแปร -> "+mydata);
console.log("แสดงค่าจาก ajax -> "+data);
});
});
});
</script>
</body>
</html>
ไฟล์ ajax_console.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
echo date("d-m-Y H:i:s")."|".$_POST['myvar'];
exit;
?>
จากโค้ด เรามาดูหน้าตาผลลัพธ์ และการแสดงข้อมูลจากการใช้งานคำสั่ง console.log()
ที่แสดงในส่วนของ console ของ chrome จะเป็นดังรูป
จากโค้ดคือเมื่อคลิกที่ปุ่มที่ 1 ก็จะแสดงข้อความ สองข้อความ นั่นหมายความว่า
เราสามารถเช็คได้ว่าปุ่มนั้นถูกกดจริงหรือไม่ และปุ่มนั้นรับคำสั่งจาก event เมื่อ click ถูกต้องหรือไม่
หากกรณีที่เรากดที่ปุ่ม สีฟ้า แล้วปรากฏว่า ข้อความไม่แสดง นั้นหมายความว่า ปุ่มไม่ได้รับคำสั่ง
จาก event เมื่อ click ทำให้เราสามารถตรวจสอบได้ว่า พิมพ์ข้อมูลชื่อ หรือคำสั่งไหนผิด หรือไม่ แบบนี้เป็นต้น
ส่วนโค้ดสำหรับปุ่มที่สองปุ่มสีเขียว ตัวนี้เราให้ทำงานเรียกใช้ไฟล์ ajax_console.php ในรูปแบบของการใช้งาน
ajax ผ่าน jquery เมื่อเราคลิกที่ปุ่ม ก็จะส่งค่าแบบ post ไปที่ไฟล์ ajax_console.php ไปด้วยตัวแปรชื่อ myvar
มีค่าเท่ากับตัวแปรชื่อ mydata เท่ากับ 100 ปกติการค่าแบบ ajax เราจะไม่รุ้เลยว่าค่าส่งไปถูกต้องหรือไม่ หรือไฟล์
ajax_console.php ทำงานหรือรับค่าถูกต้องหรือไม่ ดังนั้นการใช้ console ทำให้เราตรวจสอบค่าที่ส่งไปได้
จากโค้ด เมื่อส่งค่าไปที่ไฟล์ และทำงานสำเร็จแล้ว ไฟล์ ajax_console.php ของเราในที่นี้ ก็จะให้แสดงวันที่
ปัจจุบัน ต่อข้อความด้วย | และต่อข้อความอีกทีด้วยค่าตัวแปรที่ส่งมา
echo date("d-m-Y H:i:s")."|".$_POST['myvar'];
ค่าเหล่านี้จะถูกส่งกลับมาในตัวแปรชื่อ data ในส่วนของโค้ดบรรทัด
},function(data){ // data คือค่าที่ได้จากการ echo แสดงในไฟล์ ajax_console.lphp
และเพื่อให้เราตรวจสอบว่าค่าที่ได้กลับมาเป็นค่าอะไร เราก็ใช้คำสั่ง console.log() แสดงค่านั้นเพื่อตรวจสอบ
เหล่านี้คือรูปแบบการใช้งานส่วนของ console ที่ใช้บ่อย และเหมาะสำหรับการ debug javascript
เมื่อเราพอเข้าใจการใช้งานส่วนของ console แล้ว เรามาดูว่าแต่ละ browser เราจะเรียกใช้งานส่วนของ console
ได้อย่างไรบ้าง
การเปิดใช้งานส่วนของ console ใน chrome
วิธีที่ 1 คลิกขวาที่ว่างส่วนของเพจ เลือก inspect พอส่วนของ devTool แสดง ให้กดที่แท็บ console
วิธีที่ 2 กดปุ่มที่คีบอร์ดปุ่ม ctrl + shift + j พร้อมกัน
การเปิดใช้งานส่วนของ console ใน firefox
วิธีที่ 1 คลิกขวาที่ว่างส่วนของเพจ เลือก inspect elements พอส่วนของ developer แสดง ให้กดที่แท็บ console
วิธีที่ 2 กดปุ่มที่คีบอร์ดปุ่ม ctrl + shift + k พร้อมกัน
การเปิดใช้งานส่วนของ console ใน IE11 / Microsoft Edge
วิธีที่ 1 คลิกขวาที่ว่างส่วนของเพจ เลือก inspect elements พอส่วนของ developer แสดง ให้กดที่แท็บ console
วิธีที่ 2 กดปุ่ม F12 แล้วเลือกที่แท็บ console
