หน้านี้จะอธิบายว่าคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้พัฒนาหน้าเว็บได้ง่ายขึ้นอย่างไร คอนโซล มีการใช้งานหลัก 2 อย่าง ได้แก่ การดูข้อความที่บันทึกและการเรียกใช้ JavaScript
การดูข้อความที่บันทึกไว้
นักพัฒนาเว็บมักบันทึกข้อความลงในคอนโซลเพื่อให้มั่นใจว่า JavaScript ทำงานตามที่
ที่คาดไว้ ในการบันทึกข้อความ ให้แทรกนิพจน์อย่าง console.log('Hello, Console!') ลงใน
JavaScript เมื่อเบราว์เซอร์เรียกใช้ JavaScript และเห็นนิพจน์ในลักษณะนั้น เบราว์เซอร์จะรู้
จริงๆ แล้วระบบจะต้องบันทึกข้อความลงในคอนโซล ตัวอย่างเช่น สมมติว่าคุณอยู่ใน
กระบวนการเขียน HTML และ JavaScript สำหรับหน้าเว็บ:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
รูปที่ 1 แสดงลักษณะของ Console หลังจากโหลดหน้าเว็บและรอ 3 วินาที พยายาม ค้นหาว่าโค้ดบรรทัดใดที่ทำให้เบราว์เซอร์บันทึกข้อความ
รูปที่ 1 แผงคอนโซล
ข้อความในบันทึกสำหรับนักพัฒนาเว็บด้วยเหตุผลทั่วไป 2 ประการดังนี้
- ตรวจสอบว่าโค้ดทำงานตามลำดับที่ถูกต้อง
- การตรวจสอบค่าของตัวแปรในช่วงเวลาใดเวลาหนึ่ง
โปรดดูที่เริ่มต้นใช้งานข้อความการบันทึกเพื่อรับประสบการณ์ในการใช้งานการบันทึกจริง ดูคอนโซล
เอกสารอ้างอิง API เพื่อเรียกดูรายการเมธอด console ทั้งหมด ความแตกต่างหลักระหว่าง
คือการแสดงข้อมูลที่คุณบันทึก
กำลังเรียกใช้ JavaScript
คอนโซลจะยังเป็นฟีเจอร์REPLอีกด้วย คุณเรียกใช้ JavaScript ในคอนโซลเพื่อโต้ตอบกับหน้าได้ คุณกำลังตรวจสอบอยู่ ตัวอย่างเช่น รูปที่ 2 แสดงคอนโซลถัดจากหน้าแรกของเครื่องมือสำหรับนักพัฒนาเว็บ และรูปที่ 3 แสดงหน้าเดียวกันนี้หลังจากใช้ Console ในการเปลี่ยนชื่อของหน้า
รูปที่ 2 แผงคอนโซลข้างหน้าแรกของเครื่องมือสำหรับนักพัฒนาเว็บ
รูปที่ 3 ใช้คอนโซลเพื่อเปลี่ยนชื่อของหน้า
สามารถแก้ไขหน้าจากคอนโซลได้เนื่องจากคอนโซลมีสิทธิ์เข้าถึงโดยสมบูรณ์
window เครื่องมือสำหรับนักพัฒนาเว็บมีฟังก์ชันอำนวยความสะดวกบางประการที่ช่วยให้ตรวจสอบหน้าได้ง่ายขึ้น สำหรับ
ตัวอย่างเช่น สมมติว่า JavaScript ของคุณมีฟังก์ชันชื่อ hideModal กำลังดำเนินการ
debug(hideModal) จะหยุดโค้ดชั่วคราวในบรรทัดแรกของ hideModal เมื่อมีการเรียกใช้โค้ดครั้งถัดไป
โปรดดูที่ข้อมูลอ้างอิงเกี่ยวกับ Console Utilities API เพื่อดูรายการฟังก์ชันยูทิลิตีทั้งหมด
เมื่อคุณเรียกใช้ JavaScript คุณจะไม่ต้องโต้ตอบกับหน้าเว็บ คุณใช้คอนโซลเพื่อลองใช้งานได้
โค้ดใหม่ที่ไม่เกี่ยวข้องกับหน้านั้น ตัวอย่างเช่น สมมติว่าคุณเพิ่งเรียนรู้เกี่ยวกับเบราว์เซอร์
อาร์เรย์ JavaScript map() และคุณต้องการทดสอบ คอนโซลนี้
ที่สำหรับลองใช้ฟังก์ชันนี้
โปรดดูเริ่มต้นใช้งาน JavaScript เพื่อรับประสบการณ์จริงในการใช้งาน JavaScript ใน คอนโซล