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

Phần hướng dẫn mang tính tương tác này trình bày 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à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 phần Bắt đầu gỡ lỗi JavaScript để tìm hiểu cách tạm dừng mã JavaScript và thực hiện từng bước một.

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

Tổng quan

Bảng điều khiển là một REPL, là viết tắt của Read (Đọc), Review (Đánh giá), Print (In) và Loop (Vòng lặp). Trình phân tích cú pháp đọc JavaScript mà bạn nhập vào, đánh giá mã, in kết quả của biểu thức 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. Khi theo dõi thực tế, bạn sẽ có nhiều khả năng ghi nhớ quy trình làm 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ở Console (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 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ú ý phần văn bản trong nút bên dưới.

   Chào mọi người!

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 chú ý đến cách văn bản bên trong nút thay đổi.

   

   Hình 3. Cách Console kiểm tra 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 lại. Sau khi đánh giá mã, 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 có một sân chơi lập trình nơi bạn có thể thử nghiệm một số mã hoặc dùng thử các tính năng JavaScript mới mà bạn chưa quen thuộc. Console là nơi hoàn hảo cho những loại thử nghiệm này.

1. Nhập 5 + 15 vào Console. Kết quả 20 sẽ xuất hiện bên dưới biểu thức của bạn (trừ khi 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ã của bạn. Hình 4 dưới đây cho thấy bảng điều khiển của bạn nên xem xét như thế nào sau khi đánh giá biểu thức này.

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

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

   Xem nội dung 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 mà bạn vừa xác định.

   add(25);
   

   

   Hình 4. Cách Console kiểm tra sau khi đánh giá các biểu thức ở trên.

   add(25) đánh giá thành 45 vì khi gọi hàm add 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 cứ mã nào trong phiên điều khiển này cho đến khi hàm của bạn được 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, điều này cũng sẽ khiến trang hiện tại không thành công 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á các tính năng khác liên quan đến việc chạy JavaScript trong Bảng điều khiển.

Công cụ cho nhà phát triển cho phép bạn tạm dừng tập lệnh khi đang 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 nên một quy trình gỡ lỗi hiệu quả. Xem bài viết Bắt đầu gỡ lỗi JavaScript để xem hướng dẫn tương tác.

Console (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 phần Định dạng và định kiểu cho thông báo trong Bảng điều khiển để khám phá tất cả các phương thức định dạng và tạo kiểu cho thông báo trong bảng điều khiển.

Ngoài ra, Bảng điều khiển còn có một tập hợp các hàm 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 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.

Hãy xem Tài liệu tham khảo API Console tiện ích để khám phá tất cả các hàm tiện lợi.