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

Kayce Basques

Phần hướng dẫn có tính tương tác này cho bạn biết cách chạy JavaScript trong Bảng điều khiển Công cụ của Chrome cho nhà phát triển. Hãy xem bài viết Bắt đầu sử dụng thông báo ghi nhật ký để tìm hiểu cách ghi nhật ký thông báo vào Console. Hãy xem bài viết Bắt đầu với tính năng gỡ lỗi JavaScript để tìm hiểu cách tạm dừng mã JavaScript và lần lượt duyệt qua từng dòng một.

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

Tổng quan

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

Thiết lập Công cụ cho nhà phát triển

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ả các quy trình làm việc. Khi theo dõi thực tế, bạn có nhiều khả năng sẽ nhớ các quy trình công việc sau này.

1. Nhấn tổ hợp phím Command+Option+J (máy Mac) hoặc Control+Shift+J (Windows, Linux, ChromeOS) để mở Bảng điều khiển ngay tại đây trên chính trang này.

   

   Hình 2. Hướng dẫn này ở bên trái và Công cụ cho nhà phát triển ở bên phải.

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

Khi tạo 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ú ý văn bản trong nút bên dưới.

   Chào các bạn!

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

   

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

   Bên dưới đoạn mã mà bạn đã đánh giá, bạn sẽ thấy "Hello, Console!". Nhớ lại 4 bước của REPL: đọc, đánh giá, in, lặp lại. Sau khi đánh giá mã của bạn, REPL in kết quả của biểu thức. Vì vậy, "Hello, Console!" phải là kết quả của quá trình đá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 có một sân chơi mã để có thể kiểm thử một số mã hoặc dùng thử các tính năng JavaScript mới mà bạn chưa quen dùng. Console là một nơi hoàn hảo cho những loại thử nghiệm như vậ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. Console sẽ in kết quả của biểu thức bên dưới mã. Hình 4 dưới đây cho thấy Bảng điều khiển của bạn sẽ trông như thế nào 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ự một thay vì sao chép rồi dán.

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

   Hãy xem phần xác định giá trị mặc định cho đối số hàm nếu bạn chưa hiểu rõ về cú pháp b=20.

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

   add(25);
   

   

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

   add(25) cho kết quả là 45 vì khi hàm add được gọi mà không có đối số thứ hai, b được đặt mặc định thành 20.

Bạn sẽ không thể chạy bất kỳ mã nào trong phiên điều khiển này cho đến khi hàm của bạn trả về. Nếu mất quá nhiều thời gian, bạn có thể sử dụng Task Manager (Trình quản lý tác vụ) để huỷ phép tính 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 không thành công và mọi dữ liệu bạn đã nhập sẽ bị mất.

Các bước tiếp theo

Xem phần Chạy JavaScript để khám phá thêm các tính năng liên quan đến việc chạy JavaScript trong Console.

Công cụ cho nhà phát triển cho phép bạn tạm dừng tập lệnh vào giữa quá trình thực thi. Trong 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 quy trình gỡ lỗi mạnh mẽ. Xem phần 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 số thông số định dạng. Vui lòng xem phần Định dạng và tạo kiểu cho thông báo trong Play Console để tìm hiểu toàn bộ phương pháp đị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ó bộ chức năng tiện lợi giúp bạn tương tác với trang dễ dàng hơn. 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à bí danh của document.querySelector().
• debug(function) đặt điểm ngắt trên dòng đầu tiên của hàm đó một cách hiệu quả.
• keys(object) trả về một mảng chứa các khoá của đối tượng đã chỉ định.

Xem 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 chức năng tiện lợi.