JavaScript: Cách sử dụng Console dành cho nhà phát triển JavaScript

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Giới thiệu

Các trình duyệt hiện đại có các công cụ phát triển được tích hợp sẵn để hoạt động với JavaScript và các công nghệ web khác. Các công cụ này bao gồm Console (Bảng điều khiển) tương tự như giao diện shell, cùng với các công cụ để kiểm tra DOM, gỡ lỗi và phân tích hoạt động mạng.

Bảng điều khiển có thể được sử dụng để ghi lại thông tin như một phần của quá trình phát triển JavaScript, cũng như cho phép bạn tương tác với một trang web bằng cách thực hiện các biểu thức JavaScript trong ngữ cảnh của trang. Về cơ bản, Bảng điều khiển cung cấp cho bạn khả năng viết, quản lý và giám sát JavaScript theo yêu cầu.

Hướng dẫn này sẽ trình bày về cách làm việc với Bảng điều khiển bằng JavaScript trong ngữ cảnh của trình duyệt và cung cấp tổng quan về các công cụ phát triển tích hợp sẵn khác mà bạn có thể sử dụng như một phần của quy trình phát triển web của mình.

Làm việc với Bảng điều khiển trong Trình duyệt

Hầu hết các trình duyệt web hiện đại hỗ trợ HTML và XHTML dựa trên tiêu chuẩn sẽ cung cấp cho bạn quyền truy cập vào Bảng điều khiển dành cho nhà phát triển nơi bạn có thể làm việc với JavaScript trong giao diện tương tự như giao diện đầu cuối. Chúng ta sẽ xem xét cách truy cập Bảng điều khiển trong Firefox và Chrome.

Firefox

Để mở Bảng điều khiển Web trong FireFox, bạn có thể điều hướng đến menu ☰ ở góc trên cùng bên phải bên cạnh thanh địa chỉ.

Từ đó, nhấp vào nút Developer được ký hiệu bằng biểu tượng cờ lê, nút này sẽ mở menu Web Developer. Khi mở, nhấp vào mục menu Web Console.

Mục Menu Bảng điều khiển Web Firefox

Khi bạn làm như vậy, một khay sẽ mở ra ở cuối cửa sổ trình duyệt của bạn:

Mục Khay Bảng điều khiển Web Firefox

Bạn cũng có thể vào Web Console bằng phím tắt CTRLSHIFTK trên Linux và Windows hoặc COMMAND OPTION K trên macOS.

Bây giờ chúng ta đã truy cập Bảng điều khiển, chúng ta có thể bắt đầu làm việc bên trong nó bằng JavaScript.

Trình duyệt Chrome

Để mở Bảng điều khiển JavaScript trong Chrome, bạn có thể điều hướng đến menu ở trên cùng bên phải của cửa sổ trình duyệt của bạn được biểu thị bằng ba dấu chấm dọc liên tiếp. Từ đó, bạn có thể chọn More Tools rồi chọn Developer Tools.

Mục menu Công cụ dành cho nhà phát triển Chrome

Thao tác này sẽ mở ra một bảng nơi bạn có thể nhấp vào Console (Bảng điều khiển) dọc theo thanh menu trên cùng để hiển thị Bảng điều khiển JavaScript nếu nó chưa được đánh dấu:

Mục menu Công cụ dành cho nhà phát triển Chrome

Bạn cũng có thể truy cập vào Bảng điều khiển JavaScript bằng cách sử dụng phím tắt CTRL SHIFT J trên Linux hoặc Windows hoặc COMMAND OPTION J trên macOS, thao tác này sẽ tập trung ngay lập tức vào Bảng điều khiển.

Bây giờ chúng ta đã truy cập Bảng điều khiển, chúng ta có thể bắt đầu làm việc bên trong nó bằng JavaScript.

Làm việc trong Bảng điều khiển

Trong Bảng điều khiển, bạn có thể nhập mã JavaScript.

Hãy bắt đầu với một alert in ra chuỗi Hello, World!:

alert("Hello, World!");

Khi bạn nhấn phím ENTER sau dòng JavaScript của mình, bạn sẽ thấy cửa sổ bật lên cảnh báo sau trong trình duyệt của mình:

Ví dụ về cảnh báo bảng điều khiển JavaScript

Lưu ý rằng Bảng điều khiển cũng sẽ in kết quả đánh giá một biểu thức, kết quả này sẽ dạng như undefined khi biểu thức không trả về một cách rõ ràng một thứ gì đó.

Thay vì có các cảnh báo bật lên mà chúng ta cần tiếp tục nhấp ra, chúng ta có thể làm việc với JavaScript bằng cách đăng nhập nó vào Bảng điều khiển với console.log.

Để in chuỗi Hello, World!, chúng ta có thể nhập như sau vào Bảng điều khiển:

console.log("Hello, World!");

Trong bảng điều khiển, bạn sẽ nhận được kết quả sau:

Hello, World!

Chúng ta cũng có thể sử dụng JavaScript để thực hiện phép toán trong Bảng điều khiển:

console.log(2 + 6);
Output

8

Bạn cũng có thể thử một số phép toán phức tạp hơn:

console.log(34348.2342343403285953845 * 4310.23409128534);
Output

148048930.17230788

Ngoài ra, chúng ta có thể làm việc trên nhiều dòng với các biến:

let d = new Date();
console.log("Today's date is " + d);
Output

Today's date is Tue Nov 09 2021 16:57:36 GMT+0700 (Giờ Đông Dương)

Nếu bạn cần sửa đổi lệnh mà bạn đã truyền qua Bảng điều khiển, bạn có thể gõ phím mũi tên lên ↑ trên bàn phím để truy xuất lệnh trước đó. Điều này sẽ cho phép bạn chỉnh sửa lệnh và gửi lại.

Bảng điều khiển JavaScript cung cấp cho bạn không gian để thử mã JavaScript trong thời gian thực bằng cách cho phép bạn sử dụng môi trường tương tự như giao diện trình bao đầu cuối.

Làm việc với tệp HTML

Bạn cũng có thể làm việc trong ngữ cảnh của tệp HTML hoặc trang được hiển thị động trong Bảng điều khiển. Điều này cung cấp cho bạn cơ hội thử nghiệm với mã JavaScript trong ngữ cảnh của HTML, CSS và JavaScript hiện có.

Hãy nhớ rằng ngay sau khi bạn tải lại một trang sau khi sửa đổi nó bằng Bảng điều khiển, nó sẽ trở lại trạng thái trước khi bạn sửa đổi tài liệu, vì vậy hãy đảm bảo lưu mọi thay đổi bạn muốn giữ ở nơi khác.

Hãy lấy một tài liệu HTML trống, chẳng hạn như file index.html sau đây để hiểu cách sử dụng Bảng điều khiển để sửa đổi nó. Trong trình soạn thảo văn bản yêu thích của bạn, hãy tạo một file index.html và thêm các dòng HTML sau:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Nếu bạn lưu tệp HTML ở trên và tải nó vào trình duyệt bạn chọn, bạn sẽ thấy một trang trống với tiêu đề của trang là Today's Date.

Sau đó, bạn có thể mở Bảng điều khiển và bắt đầu làm việc với JavaScript để sửa đổi trang. Chúng ta sẽ bắt đầu bằng cách sử dụng JavaScript để chèn một tiêu đề vào HTML.

let d = new Date();

document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

Bạn sẽ nhận được kết quả sau trên Bảng điều khiển:

Output

"<h1>Today's date is Tue Nov 09 2021 16:32:24 GMT+0700 (Giờ Đông Dương)</h1>"

Và tại thời điểm này, trang của bạn sẽ trông giống như sau:

Ví dụ về JavaScript Console Plain Date

Chúng ta cũng có thể tiếp tục sửa đổi kiểu của trang, chẳng hạn như màu nền:

document.body.style.backgroundColor = "lightblue";
Output

"lightblue"

Cũng như màu sắc của văn bản trên trang:

document.body.style.color = "white";
Output

"white"

Bây giờ trang của bạn sẽ trông giống như sau:

Ví dụ về kiểu ngày trong bảng điều khiển JavaScript

Từ đây, bạn có thể tạo một phần tử <p> đoạn văn:

let p = document.createElement("P");

Với phần tử này được tạo, sau đó bạn có thể tiếp tục tạo một nút văn bản mà sau đó chúng ta có thể thêm vào đoạn văn bản:

let t = document.createTextNode("Paragraph text.");

Chúng ta sẽ thêm nút văn bản bằng cách thêm nó vào biến p:

p.appendChild(t);

Và cuối cùng nối p với phần tử <p> đoạn văn của nó và nối nút văn bản vào tài liệu:

document.body.appendChild(p);

Khi bạn đã hoàn thành các bước này, trang HTML index.html của bạn sẽ trông giống như sau:

Bảng điều khiển JavaScript Ngày với Ví dụ về Đoạn văn

Bảng điều khiển cung cấp cho bạn không gian để thử nghiệm việc sửa đổi các trang HTML, nhưng điều quan trọng cần lưu ý là bạn không thay đổi tài liệu HTML khi thực hiện mọi việc trên Bảng điều khiển. Trong trường hợp này, khi bạn tải lại trang, nó sẽ trở lại tài liệu trống.

Hiểu các công cụ phát triển khác

Tùy thuộc vào công cụ phát triển của trình duyệt mà bạn sử dụng, bạn sẽ có thể sử dụng các công cụ khác để trợ giúp quy trình phát triển web của mình. Hãy xem qua một vài công cụ này.

DOM - Mô hình đối tượng tài liệu

Mỗi khi một trang web được tải, trình duyệt trong đó sẽ tạo ra một Document Object Model, hoặc DOM, của trang.

DOM là một cây các đối tượng và hiển thị các phần tử HTML trong chế độ xem phân cấp. Cây DOM có sẵn để xem trong bảng Inspector trong Firefox hoặc bảng Elements trong Chrome.

Các công cụ này cho phép bạn kiểm tra và chỉnh sửa các phần tử DOM và cũng cho phép bạn xác định HTML liên quan đến một khía cạnh của một trang cụ thể. DOM có thể cho bạn biết liệu một đoạn văn bản hoặc hình ảnh có thuộc tính ID hay không và có thể cho phép bạn xác định giá trị của thuộc tính đó.

Trang mà chúng ta đã sửa đổi ở trên sẽ có chế độ xem DOM giống như trang này trước khi chúng ta tải lại trang:

Ví dụ về JavaScript DOM

Ngoài ra, bạn sẽ thấy các kiểu CSS trong bảng điều khiển bên hoặc bên dưới bảng điều khiển DOM, cho phép bạn xem những kiểu nào đang được sử dụng trong tài liệu HTML hoặc thông qua bảng định kiểu CSS. Đây là trang mẫu của chúng ta ở trên trông như thế nào trong Trình kiểm tra Firefox:

Ví dụ về JavaScript CSS

Để chỉnh sửa trực tiếp một nút DOM, hãy nhấp đúp vào phần tử đã chọn và thực hiện thay đổi. Ví dụ: để bắt đầu, bạn có thể sửa đổi một thẻ <h1> và biến nó thành một thẻ <h2>.

Như với Bảng điều khiển, nếu bạn tải lại trang, bạn sẽ quay lại trạng thái đã lưu của tài liệu HTML.

Network (Mạng)

Tab Network của trình duyệt được xây dựng trong các công cụ phát triển có thể giám sát và yêu cầu mạng kỷ lục. Tab này hiển thị cho bạn các yêu cầu mạng mà trình duyệt thực hiện, bao gồm thời điểm tải một trang, thời gian mỗi yêu cầu mất và cung cấp thông tin chi tiết của từng yêu cầu này. Điều này có thể được sử dụng để tối ưu hóa hiệu suất tải trang và gỡ lỗi các vấn đề yêu cầu.

Bạn có thể sử dụng tab Mạng cùng với Bảng điều khiển JavaScript. Nghĩa là, bạn có thể bắt đầu gỡ lỗi một trang bằng Bảng điều khiển sau đó chuyển sang tab Mạng để xem hoạt động mạng mà không cần tải lại trang.

Để tìm hiểu thêm về cách sử dụng tab Mạng, bạn có thể đọc về cách làm việc với Trình theo dõi mạng của Firefox hoặc bắt đầu phân tích hiệu suất Mạng với Công cụ phát triển của Chrome.

Thiết kế đáp ứng (Responsive Design)

Khi các trang web đáp ứng, chúng được thiết kế và phát triển để vừa có giao diện vừa hoạt động bình thường trên nhiều thiết bị khác nhau: điện thoại di động, máy tính bảng, máy tính để bàn và máy tính xách tay. Kích thước màn hình, mật độ điểm ảnh và cảm ứng hỗ trợ là những yếu tố cần xem xét khi phát triển trên các thiết bị. Là một nhà phát triển web, điều quan trọng là phải ghi nhớ các nguyên tắc thiết kế đáp ứng để trang web của bạn luôn sẵn sàng cho mọi người bất kể họ có quyền truy cập vào thiết bị nào.

Cả Firefox và Chrome đều cung cấp cho bạn các chế độ để đảm bảo rằng các nguyên tắc thiết kế đáp ứng được chú ý khi bạn tạo và phát triển các trang web và ứng dụng cho web. Các chế độ này sẽ mô phỏng các thiết bị khác nhau mà bạn có thể điều tra và phân tích như một phần của quá trình phát triển của mình.

Đọc thêm về Chế độ thiết kế đáp ứng của Firefox hoặc Chế độ thiết bị của Chrome để tìm hiểu thêm về cách tận dụng các công cụ này để đảm bảo truy cập cân bằng hơn vào các công nghệ web.

Phần kết luận

Hướng dẫn này cung cấp tổng quan về cách làm việc với Bảng điều khiển JavaScript trong các trình duyệt web hiện đại, cũng như một số thông tin về các công cụ phát triển khác mà bạn có thể sử dụng trong quy trình làm việc của mình.

» Tiếp: Cách thêm JavaScript vào HTML
« Trước: Bài tập phần hàm
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!