Javascript Console (Web Console) là gì? Hướng dẫn sử dụng | Series Javascript căn bản | Bài 4

Chào mừng bạn đã dến với bài giảng tiếp theo của series Javascript căn bản!

Ở bài giảng trước, ta đã tìm hiểu về những phương pháp chèn Javascript vào HTML để nó có thể hoạt động. Trong bài giảng này, chúng ta sẽ đi tìm hiểu về một công cụ có mặt trên hầu hết các trình duyệt web dành cho những người phát triển website khi họ viết các đoạn mã Javascript: đó là Javascript Console (Browser Console)

Vậy Console là gì? Làm thế nào để có thể sử dụng công cụ này? Cách thức sử dụng nó ra sao? Hoccode.org sẽ giải đáp những câu hỏi đó trong bài giảng này.

Nào, cùng bắt đầu thôi!

Giới thiệu về Javascript Console (Browser Console) của trình duyệt web

Javascript Console (Browser Console) là gì?

Javascript Console (có thể gọi là Browser Console, Web Console hoặc Console) là một công cụ mặc định dành cho những nhà phát triển web được tích hợp sẵn bên trong trình duyệt web (Chrome, Firefox, Safari, Opera...). Đây là công cụ ghi lại và xuất ra màn hình các dòng log (dòng thông tin, thông báo) về lỗi code, cảnh báo hoặc những dòng thông tin tuỳ chỉnh được lập trình bằng Javascript.

Javascript Console thường xuất hiện dưới dạng một tab trong giao diện Devtool (công cụ dành cho những nhà phát triển) của các trình duyệt (Elements, Console, Sources, Network...)

Web Console (Browser Console) captured by Google

Ảnh chụp giao diện Javascript Console trên trình duyệt Google Chrome

Các loại trình duyệt web hỗ trợ công cụ Javascript Console

Hầu hết các trình duyệt web chạy trên các hệ điều hành dành cho máy tính (desktop) đều hỗ trợ công cụ Javascript Console. Trong khi đó chưa có trình duyệt web nào trên mobile hỗ trợ công cụ này.

Các trình duyệt web hỗ trợ công cụ Javascript Console Các trình duyệt web chưa hỗ trợ công cụ Javascript Console
Chrome (desktop) Chrome (mobile)
Safari (desktop) Safari (mobile)
Firefox (desktop) Firefox (mobile)
Opera (desktop) Opera (mobile)
Edge (desktop)
Internet Explorer (desktop)

Hướng dẫn sử dụng các chức năng cơ bản của Javascript Console

Cách mở giao diện Javascript Console

Đối với trình duyệt Chrome, Firefox, Opera, Edge, Internet Explorer

Cách 1 (Trên MacOS): Trên cửa sổ trình duyệt bạn chọn Menu ViewDeveloper → Javascript Console

Cách 2: Sử dụng phím tắt: Ctr + Shift + J (trên Windows) hoặc Cmd + Option + J (trên MacOs)

Đối với trình duyệt Safari (MacOs)

Bước 1: Mở tính năng dành cho nhà phát triển Web trên Safari (Nếu bạn đã thực hiện trước đó rồi thì bỏ qua bước này)

  1. Trên cửa sổ Safari bạn chọn Menu Safari → Preferences
  2. Hộp thoại cài đặt hiện ra, bạn chuyển sang Tab Advanced → Tick vào mục Show Developer menu in menu bar

Bước 2: Mở giao diện Javascript Console

  • Cách 1: Trên cửa sổ Safari bạn chọn Menu Develop → Show Javascript Console
  • Cách 2: Sử dụng phím tắt: Cmd + Option + C

Làm quen với giao diện Javascript Console

Giao diện của Javascript Console sẽ lập tức mở lên sau khi bạn thực hiện thao tác mở như hướng dẫn phía trên.

Lưu ý: Màu nền của giao diện Javascript Console có thể là màu sáng (trắng), đen xám (tối) tùy theo thiết lập của giao diện hệ điều hành (theme) hoặc giao diện của trình duyệt web.

Bạn có thể click vào nút  để điều chỉnh nó hiển thị theo chiều ngang, chiều dọc hoặc trên một cửa sổ riêng biệt.

Nhận biết error log (lỗi) trên Javascript Console

Mặc định, khi một statement trong Javascript xảy ra lỗi (cú pháp, thiếu các thành phần bắt buộc, không tìm thấy...), lập tức Javascript Console sẽ hiển thị dòng error log màu đỏ như hình dưới đây:

Javascript console error log

Thông tin về lỗi cùng vị trí lỗi được hiển thị trên error log

Ngoài ra, bạn cũng có thể tự tạo ra các dòng error log bằng cách sử dụng function (hàm):

console.error('Nội dung log')

Ví dụ, mình tạo ra một kịch bản Javascript với 2 statement dưới đây và thu được kết quả như sau:

Source code Javascript Console
console.error('Đã có lỗi xảy ra!');
console.error('Custom error here!');
Javascript console custom error log

Nhận biết warning log (cảnh báo) trên Javascript Console

Đôi lúc Javascript console sẽ hiển thị các dòng warning log màu vàng (cú pháp của bạn thiếu một số thành phần không bắt buộc, thư viện code đã outdate (lỗi thời), cảnh báo liên quan đến bảo mật...) để các developer nhận biết và thực hiện bổ sung, điều chỉnh cho code Javascript của mình.

Javascript console warning log

Thông tin về cảnh báo và vị trí phát sinh cảnh báo được hiển thị trên warning log

Ngoài ra, bạn cũng có thể tự tạo ra các dòng warning log bằng cách sử dụng function (hàm):

console.warn('Nội dung log')

Ví dụ, mình tạo ra một kịch bản Javascript với 2 statement dưới đây và thu được kết quả như sau:

Source code Javascript Console
console.warn('Đây là một cảnh báo!');
console.warn('This is a custom warning log');
Javascript console warning log

Nhận biết và print (in) informative log (log thông tin) lên Javascript Console

Informative log là một dạng log được hiển thị dưới sự điều chỉnh của người viết code Javascript, cụ thể là thông qua function (hàm):

console.log('Nội dung log')

Ví dụ, mình tạo ra một kịch bản Javascript với 3 statement dưới đây và thu được kết quả như sau:

Source code Javascript Console

console.log('Hello World');
console.log(100);
console.log(true);


Đăng ký để nhận được thông báo mỗi khi có bài viết mới!