1. DOCUMENT OBJECT MODEL – DOM

DOM là viết tắt của Document Object Model. Trang web là một tài liệu, có thể được hiển thị trong trình duyệt hoặc dưới dạng mã nguồn HTML trong một chương trình. DOM là một đại diện đối tượng của trang web đó – một giao diện lập trình cho phép ngôn ngữ kịch bản, chẳng hạn như JavaScript, thay đổi cấu trúc tài liệu, kiểu và nội dung của trang web. DOM là một API về cơ bản được tải trong trình duyệt, “đại diện cho tài liệu dưới dạng cây nút, trong đó mỗi nút đại diện cho một phần của tài liệu (ví dụ: một phần tử , chuỗi văn bản hoặc nhận xét).” Nó “cho phép mã chạy trong trình duyệt truy cập và tương tác với mọi nút trong tài liệu. Các nút có thể được tạo, di chuyển và thay đổi. Trình nghe sự kiện có thể được thêm vào các nút và được kích hoạt khi xảy ra một sự kiện nhất định. ”(https://developer.mozilla.org/en-US/docs/Glossary/DOM )

Vì vậy, DOM có liên quan gì với Chrome DevTools? Xin lưu ý, công cụ chính mà tôi sẽ sử dụng để giúp viết mã JavaScript và tương tác với DOM là Chrome DevTools!

2. DEVTOOLS CHROME LÀ GÌ?

DevTools là một bộ công cụ dành cho nhà phát triển web được tích hợp trực tiếp vào trình duyệt Google Chrome. DevTools cho phép bạn xem và thay đổi/thao tác DOM, thay đổi kiểu trang (CSS) trong môi trường xem trước và làm việc với JavaScript bằng cách cho phép bạn gỡ lỗi, xem thông báo và chạy mã JavaScript trong bảng điều khiển.

TRUY CẬP DEVTOOLS

Option + ⌘ + J (trên macOS) hoặc Shift + CTRL + J (trên Windows / Linux) mở trực tiếp vào bảng điều khiển DevTools trong cửa sổ trình duyệt.

Mở bảng điều khiển Chrome DevTools bằng option + command + J

Một cách khác để mở DevTools là nhấp chuột trái vào một phần tử trên trang và chọn “kiểm tra” (Ctrl + Shift + I). Điều này cho phép bạn kiểm tra một phần tử và các thuộc tính của nó trên một trang. Ở chế độ xem này, bạn sẽ có quyền truy cập ngay vào các phần tử và kiểu của trang. Như bạn có thể thấy bên dưới, DevTools mở ra và bạn đang xem phần tử biểu trưng và một số kiểu CSS của nó trong ngăn Phần tử và Kiểu.

ảnh chụp màn hình mở Chrome DevTools bằng cách nhấp chuột trái vào một phần tử

XEM VÀ THAY ĐỔI NỘI DUNG (HTML) VÀ KIỂU (CSS) CỦA TRANG

Nếu bạn muốn thực hiện một số tạo mẫu CSS— hãy chọn phần tử trong Cây DOM và thêm khai báo cho phần tử đó trong Kiểu – Style. Bạn có thể thay đổi các thuộc tính phông chữ như màu sắc, kích thước và họ. Bạn có thể thay đổi hình ảnh, màu nền, màu nút, v.v.

Bạn cũng có thể chỉnh sửa HTML của mình. Điều này có thể được thực hiện theo 2 cách: trong bảng điều khiển bằng cách chọn phần tử hoặc trực tiếp trong ngăn HTML của DevTools bằng cách nhấp đúp vào nội dung bạn muốn thay đổi.

Miễn là nó là một phần tử trên trang, phong cách và nội dung của nó có thể được thay đổi ở chế độ xem trước. Điều này vĩnh viễn không làm thay đổi trang của bạn và bạn sẽ thấy rằng khi nhấp vào nút làm mới của trình duyệt, trang web của bạn sẽ trở lại trạng thái ban đầu. Không hại, không hôi!

Như bạn có thể thấy bên dưới, tôi đã thay đổi một trang web bằng cách thay đổi màu sắc và nội dung văn bản của một số phần tử nhất định.

DEBUGGING JAVASCRIPT

Khi bạn đặt debugger vào mã JavaScript của mình, làm mới trình duyệt và tạo sự kiện, trình gỡ lỗi sẽ tạm dừng mã của bạn và đưa bạn trực tiếp vào bảng console gỡ lỗi. Điều này cho phép bạn nhanh chóng xác định sự cố, tìm hiểu sâu hơn về mã của bạn, gỡ lỗi và kiểm tra mã mới trực tiếp trong bảng điều khiển của trang web của bạn. Sau đó, bạn có thể sử dụng mã làm việc mới bằng cách sao chép và dán nó vào tệp JavaScript của mình, xóa trình gỡ lỗi và làm mới trình duyệt của bạn. Một thủ thuật khá tiện lợi!

Chế độ xem trình gỡ lỗi đang hoạt động khi sử dụng Chrome DevTools

XEM THÔNG BÁO VÀ CHẠY JS TRONG CONSOLE

Chrome DevTools rất hữu ích để chạy mã trực tiếp trong bảng điều khiển hoặc gửi tin nhắn tới bảng điều khiển cho mục đích thử nghiệm. Dưới đây, tôi đã tự gửi cho mình một thông báo để xem liệu nút gửi biểu mẫu có hoạt động chính xác hay không. Khi làm mới trình duyệt, nếu tôi nhấp vào nút Create New Toy, thông báo của tôi sẽ xuất hiện trong bảng điều khiển. Điều này cho tôi biết tôi có thể lắng nghe sự kiện nhấp chuột và viết một số JavaScript cập nhật thông tin trên trang khi biểu mẫu được gửi. Một cách sử dụng rất tiện dụng cho DevTools!

Ví dụ về DevTools về việc xem thông báo cho trình xử lý sự kiện trong JavaScript

KẾT LUẬN

Như đã chứng minh, Chrome DevTools là một công cụ rất hữu ích để phát triển ứng dụng web. Nó cho phép bạn làm việc trực tiếp trong trình duyệt và xem kết quả trong thời gian thực. Bạn có thể sử dụng nó để xem trước các thay đổi kiểu, thay đổi HTML hoặc giúp viết mã JavaScript của bạn và thực hiện một số gỡ lỗi. Có rất nhiều cách khác để sử dụng Chrome DevTools – có quá nhiều cách để liệt kê ở đây.

Xem bài viết gốc Tiếng Anh tại đây.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Copy link
Powered by Social Snap