หน้านี้จะอธิบายว่าคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน 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 โดยตรงในคอนโซล