Trang này giải thích cách Bảng điều khiển dành cho nhà phát triển của Chrome giúp bạn phát triển trang web dễ dàng hơn. Console có 2 mục đích sử dụng chính: xem thông báo được ghi lại và chạy JavaScript.
Xem thông báo đã ghi nhật ký
Các nhà phát triển web thường ghi nhật ký thông báo vào Console để đảm bảo JavaScript của họ đang hoạt động như mong đợi. Để ghi lại một thông điệp, bạn chèn một biểu thức như console.log('Hello, Console!') vào JavaScript. Khi trình duyệt thực thi JavaScript của bạn và thấy một biểu thức như vậy, thì trình duyệt biết rằng nên ghi nhật ký thông báo vào Console. Ví dụ: giả sử bạn đang trong quá trình viết HTML và JavaScript cho một trang:
<!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>
Hình 1 cho thấy giao diện của Console sau khi tải trang và chờ 3 giây. Hãy cố gắng tìm ra dòng mã nào khiến trình duyệt ghi nhật ký thông điệp.
Hình 1 Bảng điều khiển.
Thông điệp nhật ký của nhà phát triển web vì 2 lý do chung:
- Đảm bảo mã đang thực thi theo đúng thứ tự.
- Kiểm tra giá trị của các biến tại một thời điểm nhất định.
Xem bài viết Bắt đầu sử dụng tính năng thông báo ghi nhật ký để trực tiếp trải nghiệm tính năng ghi nhật ký. Hãy xem Tài liệu tham khảo API trên Console để duyệt xem danh sách đầy đủ các phương thức console. Điểm khác biệt chính giữa các phương thức là cách các phương thức này hiển thị dữ liệu mà bạn đang ghi nhật ký.
Đang chạy JavaScript
Console cũng là một REPL. Bạn có thể chạy JavaScript trong Console để tương tác với trang mà bạn đang kiểm tra. Ví dụ: Hình 2 hiển thị Bảng điều khiển bên cạnh trang chủ Công cụ cho nhà phát triển, còn Hình 3 cho thấy chính trang đó sau khi bạn sử dụng Console để thay đổi tiêu đề của trang.
Hình 2. Bảng điều khiển bên cạnh trang chủ Công cụ cho nhà phát triển.
Hình 3. Sử dụng Bảng điều khiển để thay đổi tiêu đề của trang.
Bạn có thể sửa đổi trang trong Console vì Console có toàn quyền truy cập vào window của trang. Công cụ cho nhà phát triển có một vài chức năng tiện lợi giúp bạn kiểm tra trang dễ dàng hơn. Ví dụ: giả sử JavaScript của bạn chứa một hàm có tên là hideModal. Việc chạy debug(hideModal) sẽ tạm dừng mã trên dòng đầu tiên của hideModal vào lần gọi tiếp theo.
Hãy xem Tài liệu tham khảo API tiện ích Console để xem danh sách đầy đủ các hàm hiệu dụng.
Khi chạy JavaScript, bạn không phải tương tác với trang đó. Bạn có thể sử dụng Console để dùng thử
mã mới không liên quan đến trang. Ví dụ: giả sử bạn vừa tìm hiểu về phương thức Mảng JavaScript tích hợp sẵn map() và bạn muốn thử nghiệm phương thức này. Bảng điều khiển là một nơi phù hợp để dùng thử chức năng này.
Hãy xem phần Bắt đầu sử dụng JavaScript để có trải nghiệm thực tế về cách chạy JavaScript trong Console.