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