Chạy JavaScript trong Bảng điều khiển

Kayce Basques

Hướng dẫn tương tác này sẽ hướng dẫn bạn cách chạy JavaScript trong Bảng điều khiển của Chrome DevTools. Hãy xem bài viết Bắt đầu ghi nhật ký thông báo để tìm hiểu cách ghi nhật nhật ký thông báo vào Bảng điều khiển. Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript để tìm hiểu cách tạm dừng mã JavaScript và từng bước thực hiện mã đó.

Hình 1. Bảng điều khiển.

Tổng quan

The Bảng điều khiển là một REPL, viết tắt của Read, Evaluate, Print và Loop (Đọc, Đánh giá, In và Lặp). Bảng điều khiển đọc JavaScript mà bạn nhập vào, đánh giá mã của bạn, in kết quả của biểu thức, sau đó lặp lại bước đầu tiên.

Thiết lập DevTools

Hướng dẫn này được thiết kế để bạn có thể mở bản minh hoạ và tự mình thử tất cả quy trình làm việc. Khi làm theo hướng dẫn, bạn sẽ có nhiều khả năng nhớ được các quy trình làm việc sau này.

1. Nhấn Command+Option+J (Mac) hoặc Control+Shift+J (Windows, Linux, ChromeOS) để mở Bảng điều khiển ngay tại trang này.

   

   Hình 2. Hướng dẫn này ở bên trái và DevTools ở bên phải.

Xem và thay đổi JavaScript hoặc DOM của trang

Khi xây dựng hoặc gỡ lỗi một trang, bạn thường nên chạy các câu lệnh trong Bảng điều khiển để thay đổi giao diện hoặc cách chạy của trang.

1. Hãy chú ý đến văn bản trong nút bên dưới.

   Hello, World!

2. Nhập document.getElementById('hello').textContent = 'Hello, Console!' vào Bảng điều khiển và sau đó nhấn Enter để đánh giá biểu thức. Hãy chú ý cách văn bản bên trong nút thay đổi.

   

   Hình 3. Giao diện của Bảng điều khiển sau khi đánh giá biểu thức ở trên.

   Bên dưới mã mà bạn đã đánh giá, bạn sẽ thấy "Hello, Console!". Hãy nhớ lại 4 bước của REPL: đọc, đánh giá, in, lặp. Sau khi đánh giá mã của bạn, REPL sẽ in kết quả của biểu thức. Vì vậy, "Hello, Console!" phải là kết quả của việc đánh giá document.getElementById('hello').textContent = 'Hello, Console!'.

Chạy JavaScript tuỳ ý không liên quan đến trang

Đôi khi, bạn chỉ muốn một sân chơi mã để kiểm thử một số mã hoặc thử các tính năng mới của JavaScript mà bạn chưa quen. Bảng điều khiển là nơi hoàn hảo cho những loại thử nghiệm này.

1. Nhập 5 + 15 vào Bảng điều khiển. Kết quả 20 sẽ xuất hiện bên dưới biểu thức của bạn (trừ phi biểu thức của bạn mất quá nhiều thời gian để đánh giá).
2. Nhấn Enter để đánh giá biểu thức. Bảng điều khiển in kết quả của biểu thức bên dưới mã của bạn. Hình 4 bên dưới cho thấy giao diện của Bảng điều khiển sau khi đánh giá biểu thức này.

3. Nhập mã sau vào Bảng điều khiển. Hãy thử nhập từng ký tự thay vì sao chép và dán.

   function add(a, b=20) {
     return a + b;
   }
   

4. Bây giờ, hãy gọi hàm mà bạn vừa xác định.

   add(25);
   

   

   Hình 4. Giao diện của Bảng điều khiển sau khi đánh giá các biểu thức ở trên.

   add(25) đánh giá thành 45 vì khi hàm add được gọi mà không có đối số thứ hai, b sẽ mặc định là 20.

Bạn sẽ không thể chạy bất kỳ mã nào trong phiên bảng điều khiển này cho đến khi hàm của bạn trả về. Nếu quá trình này mất quá nhiều thời gian, bạn có thể sử dụng Trình quản lý tác vụ để huỷ tính toán tốn nhiều thời gian; tuy nhiên, thao tác này cũng sẽ khiến trang hiện tại gặp lỗi và tất cả dữ liệu bạn đã nhập sẽ bị mất.

Các bước tiếp theo

Hãy xem bài viết Chạy JavaScript để khám phá thêm các tính năng liên quan đến việc chạy JavaScript trong Bảng điều khiển.

DevTools cho phép bạn tạm dừng một tập lệnh ở giữa quá trình thực thi. Khi tạm dừng, bạn có thể sử dụng Bảng điều khiển để xem và thay đổi window hoặc DOM của trang tại thời điểm đó. Điều này tạo ra một quy trình gỡ lỗi mạnh mẽ. Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript để biết hướng dẫn tương tác.

Bảng điều khiển cũng hỗ trợ một tập hợp các thông số định dạng. Hãy xem bài viết Định dạng và tạo kiểu cho thông báo trong Bảng điều khiển để khám phá tất cả phương thức định dạng và tạo kiểu cho thông báo trên bảng điều khiển.

Ngoài ra, Bảng điều khiển cũng có một tập hợp các hàm tiện lợi giúp bạn dễ dàng tương tác với một trang. Ví dụ:

• Thay vì nhập document.querySelector() để chọn một phần tử, bạn có thể nhập $(). Cú pháp này được lấy cảm hứng từ jQuery, nhưng thực ra không phải là jQuery. Đây chỉ là một email đại diện cho document.querySelector().
• debug(function) sẽ đặt một điểm ngắt trên dòng đầu tiên của hàm đó.
• keys(object) trả về một mảng chứa các khoá của đối tượng được chỉ định.

Hãy xem bài viết Tài liệu tham khảo API Tiện ích Bảng điều khiển để khám phá tất cả các hàm tiện lợi.