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ư trình bao đầ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 Nhà phát triển được ký hiệu bằng biểu tượng cờ lê, nút này sẽ mở menu Nhà phát triển web. Khi mở, nhấp vào mục menu Bảng điều khiển Web.
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ờ chúng tôi đã truy cập Bảng điều khiển, chúng tôi có thể bắt đầu làm việc bên trong nó bằng JavaScript.
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 Công cụ khác rồi chọn Công cụ dành cho nhà phát triển.
Thao tác này sẽ mở ra một bảng nơi bạn có thể nhấp vào 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:
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ẽ đưa tiêu điểm ngay lập tức đến Bảng điều khiển. Bây giờ chúng tôi đã truy cập Bảng điều khiển, chúng tôi 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 cảnh báo 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:
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 ghi nó vào Bảng điều khiển bằng console.log.
Để in Hello, World! chuỗi, chúng ta có thể nhập thông tin 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:
Output Hello, World!
Chúng tôi 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 tôi 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 Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)
Nếu bạn cần sửa đổi lệnh mà bạn đã chuyể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ư tệp 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 tệp 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à Ngày hôm nay.
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 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 Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"
Và tại thời điểm này, trang của bạn sẽ trông giống như sau:
Chúng tôi 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"
Now your page will look something like this:
Từ đây, bạn có thể tạo một phần tử đoạn văn bản <p>:
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 tôi sẽ thêm nút văn bản bằng cách thêm nút đó 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à thêm 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 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 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 trang web được tải, trình duyệt trong đó sẽ tạo ra Mô hình đối tượng tài liệu 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 Thanh tra trong Firefox hoặc bảng Thành phần 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 tôi đã sửa đổi ở trên sẽ có chế độ xem DOM giống như trang này trước khi chúng tôi tải lại trang:
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à kiểu nội dung của trang mẫu ở trên của chúng tôi trông như thế nào trong Trình kiểm tra Firefox:
Để 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 thẻ <h1> và biến nó thành thẻ <h2>.
Giống như với Bảng điều khiển, nếu bạn tải lại trang, bạn sẽ trở lại trạng thái đã lưu của tài liệu HTML.
Network
Tab Mạng của các công cụ phát triển tích hợp trong trình duyệt của bạn có thể theo dõi và ghi lại các yêu cầu mạng. 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 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 bằng Công cụ dành cho nhà phát triển của Chrome.
Thiết kế đáp ứng
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ô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 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.
