Google Chrome không chỉ là trình duyệt tiêu dùng nhanh - nó còn ẩn chứa một loạt các tính năng dành cho nhà phát triển trong phạm vi của nó. Bạn có thể tiết lộ một số quyền lực này bằng công cụ "Kiểm tra". Mặc dù ban đầu áp đảo, công cụ này cung cấp cho bạn thông tin chi tiết về cách các trang web được xây dựng và công cụ này có thể giúp bạn gỡ lỗi các trang web của riêng mình.

Truy cập Công cụ kiểm tra

Bạn có thể tìm thấy công cụ Kiểm tra trong trình đơn ngữ cảnh của Chrome.

Nhấp chuột phải vào bất kỳ phần tử nào trong trình duyệt của bạn và nhấp vào “Kiểm tra” trong menu ngữ cảnh.

Một cửa sổ sẽ bật ra bên cạnh trình duyệt Chrome như được thấy bên dưới. Điều này được gọi là bảng điều khiển DevTools. Nếu bạn đã từng sử dụng Firebug trên Firefox, bạn có thể nhận ra một số phần của nó.

Có rất nhiều ở đây, vì vậy chúng ta hãy kiểm tra các phần riêng lẻ.

Kiểm tra thanh tra

Bảng kiểm tra được chia thành nhiều tab khác nhau được hiển thị ở đầu cửa sổ. Chúng ta sẽ tập trung vào tab Elements mặc định.

Có hai nút hữu ích bên cạnh các tab này. Đầu tiên là công cụ Inspect Element.

Công cụ này cho phép bạn di chuột qua và chọn các phần tử DOM khác nhau để kiểm tra.

Nút thứ hai bật chế độ Xem trước thiết bị. Ở chế độ này, bạn có thể xem trang web của mình trông như thế nào ở các độ phân giải và kích thước màn hình khác nhau.

Nếu bạn nhấp vào nút đó, bạn sẽ thấy trang web của mình được chụp thành chế độ xem mới.

Sau đó, bạn có thể sử dụng trình đơn thả xuống phía trên bản xem trước trang hoặc các tay cầm ở hai bên của bản xem trước trang để thay đổi kích thước cửa sổ xem trước thiết bị.

Chế độ xem HTML

Hầu hết các tab DevTools bị chiếm bởi cửa sổ HTML.

Ngăn này giống như một "Nguồn xem" siêu năng lượng được cấu trúc theo DOM, với các phần tử được lồng trong các phần tử cha của chúng.

Bạn sẽ thấy rằng phần tử bạn "kiểm tra" ở đầu sẽ tự động được đánh dấu bằng nền xám hoặc xanh lam. Ở đây, tôi đã kiểm tra một hình ảnh được chứa trong một liên kết. Theo dự kiến, tôi thấy một thẻ neo được đánh dấu.

Nhưng hình ảnh của tôi đâu? Tôi có thể tiết lộ bất kỳ phần tử DOM nào được lồng trong thẻ neo bằng cách nhấp vào hình tam giác tiết lộ bên cạnh. Trong trường hợp này, mũi tên sẽ tiết lộ tôi dự kiến ​​sẽ tìm thấy.

Bạn cũng sẽ nhận thấy một thanh trình đơn nhỏ ở dưới cùng của ngăn HTML.

Điều này được gọi là đường dẫn đường dẫn, và nó cho bạn thấy tất cả các phần tử cha của phần tử đã chọn. Để điều hướng đến một trong những yếu tố đó, chỉ cần nhấp vào nó.

Kiểu

Bên dưới chế độ xem HTML, chúng tôi cũng thấy một cửa sổ hiển thị bất kỳ quy tắc CSS nào áp dụng cho phần tử của chúng tôi. Đây được gọi là ngăn Kiểu, và trong trường hợp này, chúng ta thấy tất cả các quy tắc áp dụng cho thẻ neo mà tôi đã kiểm tra trước đó.

Bạn có thể bật và tắt quy tắc bằng cách di chuột qua quy tắc và nhấp vào hộp kiểm bên cạnh quy tắc.

Bạn sẽ thấy thay đổi này được phản ánh trong bản xem trước trang ngay lập tức. Và nếu bạn nhấp trực tiếp vào quy tắc, bạn có thể thay đổi tên và giá trị của nó.

Bạn cũng có thể tìm kiếm các quy tắc cụ thể bằng cách sử dụng hộp tìm kiếm Bộ lọc.

Ngăn Kiểu có khả năng nhiều hơn thế, tuy nhiên. Xem tài liệu của Google để có giải thích đầy đủ về nhiều chức năng của khung Kiểu.

Mô hình hộp và kiểu được tính toán

Bên cạnh chế độ xem kiểu là mô hình hộp cho phần tử đã chọn của tôi. Nếu bạn không quen thuộc, mô hình hộp là một mô tả trừu tượng về lề, lề, đệm và kích thước nội dung được áp dụng cho một phần tử cụ thể.

Trong trường hợp này, tôi có thể thấy phần tử của tôi có kích thước chính là 461 x 209 pixel. Nó không chứa các lề, lề, hoặc các quy tắc đệm, vì vậy các ô này trống.

Nếu bạn chọn một phần tử với một số quy tắc vị trí, lề, đường viền hoặc đệm, mô hình hộp của bạn có thể trông giống như thế này.

Bạn cũng có thể thấy mô hình hộp tại chỗ nếu bạn di chuột qua các phần tử DOM bằng công cụ Kiểm tra phần tử được bật.

Bên dưới mô hình hộp là danh sách tất cả các quy tắc tạo kiểu áp dụng cho phần tử cụ thể này. Biểu mẫu này hơi khác một chút so với ngăn Kiểu. Nó không hiển thị các dòng CSS thực tế - chỉ tác động của các quy tắc đó. Điều này được gọi là "kiểu tính toán" của đối tượng và đó là kết quả được kết hợp của CSS của bạn.

Cuối cùng, bạn có thể tìm kiếm các quy tắc cụ thể bằng cách nhập vào hộp Bộ lọc.

Phần kết luận

Nếu bạn thường xuyên làm việc với các trang web, công cụ Kiểm tra của Chrome sẽ rất đáng để khám phá. Và các tab khác trong DevTools, như Console và Mạng, có thể là vô giá đối với nhà phát triển. Có nhiều điều hơn chúng tôi có thể bao gồm ngay bây giờ, nhưng tài liệu của riêng Google là toàn diện và hữu ích.