9 phút để đọc
Các trình duyệt web hiện đại đều tích hợp sẵn các công cụ phát triển để làm việc với JavaScript và các công nghệ web khác. Những công cụ này bao gồm Console, cùng với các công cụ khác để kiểm tra DOM, gỡ lỗi và phân tích hoạt động mạng.
Console có thể được dùng để ghi lại thông tin trong 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 thi các biểu thức JavaScript trong ngữ cảnh của trang. Về cơ bản, Console 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 cách sử dụng console trong JavaScript trong trình duyệt, đồng thời 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 trong quá trình phát triển web.
Lưu ý: Khi làm theo hướng dẫn này, bạn có thể nhận thấy trình duyệt và Console của mình trông khác so với các ví dụ trong hình ảnh. Các trình duyệt thường xuyên được cập nhật và thường bao gồm các công cụ mới và có thể là một giao diện mới. Những cập nhật này sẽ không ảnh hưởng đến khả năng sử dụng Console trong trình duyệt của bạn.
Làm việc với Console trong trình duyệt
Hầu hết các trình duyệt web hiện đại hỗ trợ HTML và XHTML theo tiêu chuẩn đều cung cấp cho bạn quyền truy cập vào Developer Console, nơi bạn có thể làm việc với JavaScript trong một giao diện tương tự như terminal shell. Phần này phác thảo cách truy cập Console trong Firefox và Chrome.
Firefox
Để mở Web Console trong Firefox, điều hướng đến menu ☰ ở góc trên cùng bên phải, bên cạnh thanh địa chỉ.
Chọn “More Tools”. Sau khi mở ra, hãy nhấp vào mục Web Developer Tools.
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:
Bạn cũng có thể vào Web Console bằng phím tắt CTRL + SHIFT + K trên Linux và Windows, hoặc COMMAND + OPTION + K trên macOS.
Bây giờ bạn đã truy cập vào Console, bạn có thể bắt đầu làm việc trong đó bằng JavaScript.
Chrome
Để mở JavaScript Console trong Chrome, bạn có thể điều hướng đến menu ở phía trên cùng bên phải của cửa sổ trình duyệt, được biểu thị bằng ba dấu chấm dọc. Từ đó, bạn có thể chọn More Tools, sau đó Developer Tools.
Thao tác này sẽ mở ra một bảng điều khiển, nơi bạn có thể nhấp vào Console dọc theo thanh menu trên cùng để hiển thị JavaScript Console nếu nó chưa được tô sáng:
Bạn cũng có thể vào JavaScript Console 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, phím tắt này sẽ tập trung ngay vào Console.
Bây giờ bạn đã truy cập vào Console, bạn có thể bắt đầu làm việc trong đó bằng JavaScript.
Làm việc trong Console
Trong Console, bạn có thể gõ và thực thi mã JavaScript.
Hãy bắt đầu với một lệnh alert in ra chuỗi “Hello, World!“:
alert("Hello, World!");
Khi bạn nhấn phím ENTER sau dòng mã JavaScript của mình, một cửa sổ popup bật lên, alert sẽ xuất hiện trong trình duyệt của bạn:
Lưu ý: Console cũng sẽ in kết quả của việc đánh giá một biểu thức, kết quả sẽ là undefined khi biểu thức không trả về một giá trị cụ thể.
Thay vì phải nhấp để tắt các cửa sổ bật lên, bạn có thể làm việc với JavaScript bằng cách ghi nó vào Console với console.log.
Để in chuỗi “Hello, World!”, hãy gõ dòng sau vào Console:
console.log("Hello, World!");
Trong console, bạn sẽ nhận được kết quả sau:
Output
Hello, World!
Bạn cũng có thể thực hiện các phép toán trong Console:
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, bạn có thể làm việc trên nhiều dòng với các biến:
let today = new Date();
console.log("Today's date is " + today);
Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)
Nếu bạn cần sửa đổi một lệnh mà bạn đã thực thi thông qua Console, bạn có thể gõ phím mũi tên lên (↑) trên bàn phím để lấy lại lệnh trước đó. Thao tác này sẽ cho phép bạn chỉnh sửa lệnh và gửi lại.
JavaScript Console cung cấp cho bạn một không gian để thử mã JavaScript trong thời gian thực, cho phép bạn sử dụng một môi trường tương tự như giao diện terminal shell.
Làm việc với một tệp HTML
Bạn có thể làm việc trong ngữ cảnh của một tệp HTML hoặc một trang được hiển thị động trong Console. Điều này mang lại cho bạn cơ hội thử nghiệm 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ó trong Console, nó sẽ trở về trạng thái ban đầu trước khi bạn sửa đổi tài liệu. Hãy đảm bảo lưu bất kỳ thay đổi nào bạn muốn giữ ở nơi khác.
Lấy một tài liệu HTML, chẳng hạn như tệp index.html sau, để hiểu cách sử dụng Console để 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 tệp index.html và thêm các dòng HTML sau:
index.html
<!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 mà bạn chọn, một trang trống với tiêu đề “Today’s Date” sẽ được hiển thị trong trình duyệt.
Mở Console và bắt đầu làm việc với JavaScript để sửa đổi trang. Bắt đầu bằng cách sử dụng JavaScript để chèn một tiêu đề vào HTML.
let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"
Bạn sẽ nhận được kết quả sau trong Console:
Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"
Trang của bạn sẽ trông tương tự như sau:
Bạn có thể 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 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ẽ hiển thị một cái gì đó tương tự như thế này:
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ể tạo một text node có thể được thêm vào đoạn văn:
let t = document.createTextNode("Paragraph text.");
Thêm text node bằng cách nối nó vào biến p:
p.appendChild(t);
Và cuối cùng nối p với phần tử đoạn văn <p> của nó và text node đã được nối 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ẽ bao gồm các phần tử sau:
Console cung cấp cho bạn một không gian để thử nghiệm việc sửa đổi các trang HTML, nhưng điều quan trọng cần nhớ là bạn không thay đổi chính tài liệu HTML khi bạn làm việc trên Console. Khi bạn tải lại trang, nó sẽ trở về một 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ác công cụ phát triển của trình duyệt bạn sử dụng, bạn sẽ có thể sử dụng các công cụ khác để giúp quy trình làm việc phát triển web của mình.
DOM – Document Object Model
Mỗi khi một trang web được tải, trình duyệt sẽ tạo một Document Object Model, hay DOM, của trang.
DOM là một cây Object và hiển thị các phần tử HTML trong một 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.
Những 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ể giúp bạn xác định giá trị của thuộc tính đó.
Trang mà bạn đã sửa đổi ở trên sẽ có một chế độ xem DOM tương tự như thế này trước khi tải lại trang:
Ngoài ra, bạn sẽ thấy các kiểu CSS trong một bảng điều khiển bên hoặc bên dưới bảng DOM, cho phép bạn xem các kiểu nào đang được sử dụng trong tài liệu HTML hoặc thông qua một CSS style sheet. Ví dụ, hãy lưu ý những gì kiểu body của trang mẫu của bạn bao gồm trong Firefox Inspector:
Để chỉnh sửa trực tiếp một nút DOM, hãy nhấp đúp vào một phần tử đã chọn và thực hiện các thay đổi. Ví dụ, bạn có thể sửa đổi một thẻ <h1> và biến nó thành một thẻ <h2>.
Giống như với Console, nếu bạn tải lại trang, bạn sẽ trở về trạng thái đã lưu ban đầu của tài liệu HTML.
Network
Tab Network của các công cụ phát triển tích hợp sẵn của trình duyệt có thể giám sát và ghi lại các yêu cầu mạng. Tab này hiển thị các yêu cầu mạng mà trình duyệt thực hiện, bao gồm khi nó tải một trang, mỗi yêu cầu mất bao lâu và cung cấp 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 đề về yêu cầu.
Bạn có thể sử dụng tab Network cùng với JavaScript Console. Tức là, bạn có thể bắt đầu gỡ lỗi một trang bằng Console, sau đó chuyển sang tab Network để 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 Network, bạn có thể đọc về working with Firefox’s Network Monitor (làm việc với Network Monitor của Firefox) hoặc getting started with analyzing Network performance with Chrome’s DevTools (bắt đầu phân tích hiệu suất mạng với DevTools của Chrome).
Responsive Design
Khi các trang web có tính responsive, chúng được thiết kế và phát triển để cả hình thức và chức năng đều hoạt động đúng trên một loạt các 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 (pixel density) và hỗ trợ cảm ứng là các 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ế responsive để các trang web của bạn hoàn toàn có sẵn cho mọi người bất kể thiết bị mà họ có quyền truy cập.
Cả Firefox và Chrome đều cung cấp cho bạn các chế độ để đảm bảo các nguyên tắc thiết kế responsive đượ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ể kiểm 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ề Responsive Design Mode của Firefox hoặc Device Mode của Chrome để tìm hiểu thêm về cách tận dụng các công cụ này nhằm đảm bảo quyền truy cập công bằng hơn vào các công nghệ web.
Kết luận
Hướng dẫn này đã cung cấp một cái nhìn tổng quan về cách sử dụng console trong 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.
Để tìm hiểu thêm về JavaScript, bạn có thể đọc về các data types, hoặc các thư viện jQuery hoặc D3.
