Trang này được dịch bởi Cloud Translation API.

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. Xem 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. Xem phần Bắt đầu Với Gỡ lỗi JavaScript để tìm hiểu cách tạm dừng mã JavaScript và duyệt qua một dòng tại một lúc.

Bảng điều khiển.

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

Tổng quan

Bảng điều khiển là một REPL, viết tắt của Đọc, Đánh giá, In và Vòng lặp. Trình thu thập thông tin này đọc JavaScript mà bạn nhập vào đó, đánh giá mã của bạn, in kết quả của expression rồi 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. Thời gian bạn theo dõi thực tế, bạn có nhiều khả năng sẽ nhớ quy trình làm việc sau này.

Nhấn Command+Option+J (Mac) hoặc Control+Shift+J (Windows, Linux, ChromeOS) để mở Console, ngay tại đâ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 trang, thông thường, bạn 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 hoạt động của trang.

Hãy chú ý văn bản trong nút bên dưới.
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 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 một sân chơi mã nơi bạn có thể thử nghiệm một số mã hoặc thử JavaScript mới mà bạn không quen dùng. Console là một nơi hoàn hảo cho những loại thử nghiệm như vậy.

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á).
Nhấn Enter để đánh giá biểu thức. Console 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 cách Bảng điều khiển của bạn sau khi đánh giá biểu thức này.
Nhập mã sau vào Bảng điều khiển. Hãy thử nhập từng ký tự một, so với thao tác sao chép và dán nó.
```
function add(a, b=20) {
  return a + b;
}
```
Xem phần xác định giá trị mặc định cho đối số hàm nếu bạn không quen thuộc với b=20 của bạn.
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, Mặc định b là 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 quá trình này 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 khiến trang hiện tại không truy cập được và tất cả 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 khiến để có quy trình gỡ lỗi hiệu quả. Xem phần Bắt đầu với gỡ lỗi JavaScript để biết của chúng tôi.

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 $(). Chiến dịch này được lấy cảm hứng từ jQuery, nhưng thực sự 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.