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