Cách sử dụng control panel dành cho nhà phát triển JavaScript
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 Control panel 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.Control panel được dùng để ghi 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, Control panel 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 làm việc với Control panel 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 bạn .
Làm việc với Control panel 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 Control panel 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 terminal . Ta sẽ xem xét cách truy cập Control panel trong Firefox và Chrome.
Firefox
Để mở Control panel Web trong FireFox, bạn có thể chuyển đế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 Control panel 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ờ ta đã truy cập Control panel , ta có thể bắt đầu làm việc bên trong nó bằng JavaScript.
Trình duyệt Chrome
Để mở Control panel JavaScript trong Chrome, bạn có thể chuyển đến menu ở 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 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 Control panel dọc theo thanh menu trên cùng để hiển thị Control panel JavaScript nếu nó chưa được đánh dấu:
Bạn cũng có thể truy cập vào Control panel 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 Control panel .
Bây giờ ta đã truy cập Control panel , ta có thể bắt đầu làm việc bên trong nó bằng JavaScript.
Làm việc trong Control panel
Trong Control panel , 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 ENTER sau dòng JavaScript của bạn , bạn sẽ thấy cửa sổ bật lên cảnh báo sau trong trình duyệt của bạn :
Lưu ý Control panel cũng sẽ in kết quả đánh giá một biểu thức, kết quả này sẽ được đọc là 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à ta cần tiếp tục nhấp ra, ta có thể làm việc với JavaScript bằng cách đăng nhập nó vào Control panel bằng console.log .
Để in Hello, World! chuỗi, ta có thể nhập thông tin sau vào Control panel :
- console.log("Hello, World!");
Trong console , bạn sẽ nhận được kết quả sau:
OutputHello, World! Ta cũng có thể sử dụng JavaScript để thực hiện phép toán trong Control panel :
- console.log(2 + 6);
Output8 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);
Output148048930.17230788 Ngoài ra, 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);
OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT) Nếu bạn cần sửa đổi một lệnh mà bạn đã chuyển qua Control panel , 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.
Control panel 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 shell terminal .
Làm việc với file HTML
Bạn cũng có thể làm việc trong ngữ cảnh của file HTML hoặc trang được hiển thị động trong Control panel . Đ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ó.
Lưu ý ngay khi bạn reload một trang sau khi sửa đổi nó bằng Control panel , nó sẽ trở về 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 trang HTML trống, chẳng hạn như index.html sau để hiểu cách sử dụng Control panel để sửa đổi nó:
<!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 file 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ở Control panel và bắt đầu làm việc với JavaScript để sửa đổi trang. 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 Control panel :
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 web sẽ trông giống như sau:
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 web sẽ trông giống như sau:
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 đó ta có thể thêm vào đoạn văn:
- let t = document.createTextNode("Paragraph text.");
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à 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 bạn sẽ trông giống như sau:
Control panel 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 trang HTML khi thực hiện mọi việc trên Control panel . Trong trường hợp này, khi bạn reload 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 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 bạn . 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 D ocument O bject M odel, 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.
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ể cho phép bạn xác định giá trị của thuộc tính đó.
Trang mà ta đã sửa đổi ở trên sẽ có chế độ xem DOM giống như trang này trước khi ta reload trang:
Ngoài ra, bạn sẽ thấy các kiểu CSS trong console bên hoặc bên dưới console DOM, cho phép bạn xem những kiểu nào đang được sử dụng trong trang HTML hoặc qua bảng định kiểu CSS. Đây là kiểu nội dung của trang mẫu ở trên của ta 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 <h1> và biến nó thành <h2> .
Như với Control panel , nếu bạn reload trang, bạn sẽ quay lại trạng thái đã lưu của trang HTML .
Mạng lưới
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 của mỗi yêu cầu 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 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 Control panel JavaScript. Tức là, bạn có thể bắt đầu gỡ lỗi một trang bằng Control panel sau đó chuyển sang tab Mạng để xem hoạt động mạng mà không cần reload 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 giám sát 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
Khi các trang web đáp ứng, chúng được thiết kế và phát triển để có cả giao diện và 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à notebook . 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 để các trang web luôn sẵn sàng cho mọi người dù 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 bạn .
Đọ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 Control panel 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 bạn .
Để tìm hiểu thêm về JavaScript, bạn có thể đọc về các kiểu dữ liệu hoặc thư viện jQuery hoặc D3 .
Các tin liên quan
Cách viết comment bằng JavaScript2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
