หน้านี้จะอธิบายว่าคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้พัฒนาหน้าเว็บได้ง่ายขึ้นอย่างไร คอนโซลมีการใช้งานหลัก 2 อย่าง ได้แก่ การดูข้อความที่บันทึกไว้และการเรียกใช้ JavaScript
การดูข้อความที่บันทึกไว้
นักพัฒนาเว็บมักบันทึกข้อความลงใน Console เพื่อให้แน่ใจว่า 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
คอนโซลจะยังเป็นฟีเจอร์ตอบกลับอีกด้วย คุณสามารถเรียกใช้ JavaScript ใน Console เพื่อโต้ตอบกับหน้าที่จะตรวจสอบอยู่ ตัวอย่างเช่น รูปที่ 2 แสดงคอนโซลถัดจากหน้าแรกของเครื่องมือสำหรับนักพัฒนาเว็บ และรูปที่ 3 แสดงหน้าเดียวกันหลังจากใช้คอนโซลเพื่อเปลี่ยนชื่อของหน้า
รูปที่ 2 แผงคอนโซลข้างหน้าแรกของเครื่องมือสำหรับนักพัฒนาเว็บ
รูปที่ 3 ใช้คอนโซลเพื่อเปลี่ยนชื่อของหน้า
คุณอาจแก้ไขหน้าจากคอนโซลได้เนื่องจากคอนโซลมีสิทธิ์เข้าถึง window ของหน้าเว็บอย่างเต็มรูปแบบ เครื่องมือสำหรับนักพัฒนาเว็บมีฟังก์ชันอำนวยความสะดวกบางประการที่ช่วยให้ตรวจสอบหน้าได้ง่ายขึ้น ตัวอย่างเช่น สมมติว่า JavaScript ของคุณมีฟังก์ชันชื่อ hideModal การเรียกใช้ debug(hideModal) จะหยุดโค้ดชั่วคราวในบรรทัดแรกของ hideModal เมื่อมีการเรียกใช้โค้ดครั้งถัดไป
โปรดดูที่ข้อมูลอ้างอิงเกี่ยวกับ Console Utilities API เพื่อดูรายการฟังก์ชันยูทิลิตีทั้งหมด
เมื่อคุณเรียกใช้ JavaScript คุณจะไม่ต้องโต้ตอบกับหน้าเว็บ คุณสามารถใช้คอนโซลเพื่อลองใช้
โค้ดใหม่ที่ไม่เกี่ยวข้องกับหน้านั้น เช่น สมมติว่าคุณเพิ่งเรียนรู้เกี่ยวกับวิธีอาร์เรย์ JavaScript ในตัว map() และต้องการทดสอบกับวิธีการดังกล่าว Console คือพื้นที่ที่ดี
ที่จะลองใช้ฟังก์ชันนี้
โปรดดูเริ่มต้นใช้งาน JavaScript เพื่อรับประสบการณ์การใช้งาน JavaScript โดยตรงในคอนโซล