Google Chrome không chỉ là một trình duyệt dành cho người 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. Bạn có thể tiết lộ một số sức mạnh này với công cụ "Kiểm tra". Mặc dù ban đầu áp đảo, nhưng 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à nó có thể giúp bạn gỡ lỗi các trang web của chính 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 ngoài trình duyệt Chrome như hình bên dưới. Đây được gọi là bảng 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 thứ ở đây, vì vậy chúng ta hãy xem xét từng phần.
Kiểm tra Thanh tra
Bảng thanh tra được chia thành nhiều tab khác nhau có thể nhìn thấy ở đầu cửa sổ. Chúng tôi sẽ tập trung vào tab Thành phần 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ụ Kiểm tra phần tử.
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ị. Trong 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 chuyển sang 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 nút điều khiển ở các 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 tab DevTools bị chiếm bởi ngăn HTML.
Ngăn này giống như một “Nguồn xem” siêu hỗ trợ. Nó được cấu trúc theo DOM, với các phần tử được lồng vào bên trong các phần tử mẹ của chúng.
Bạn sẽ thấy rằng phần tử bạn đã “kiểm tra” lúc đầu 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ó trong một liên kết. Như mong đợi, tôi thấy một thẻ liên kết đượ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ẻ liên kết 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 tiết lộ thẻ mà tôi muốn tìm.
Bạn cũng sẽ nhận thấy một thanh menu nhỏ ở cuối ngăn HTML.
Đây được gọi là đường dẫn breadcrumb và nó hiển thị cho bạn tất cả các phần tử chính 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 ngăn 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 tôi thấy tất cả các quy tắc áp dụng cho thẻ liên kết mà tôi đã kiểm tra trước đó.
Bạn có thể bật và tắt một quy tắc bằng cách di chuột qua nó và nhấp vào hộp kiểm bên cạnh nó.
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 một 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.
Tuy nhiên, ngăn Styles có nhiều khả năng hơn thế. Xem tài liệu của Google để biết giải thích đầy đủ về nhiều chức năng của ngăn Kiểu.
Mô hình hộp và kiểu 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, mô hình hộp là mô tả trừu tượng về kích thước lề, đường viền, phần đệm và 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 mình có kích thước chính là 461 x 209 pixel. Nó không chứa quy tắc lề, đường viền hoặc khoảng đệm, vì vậy những hộp đó trống.
Nếu bạn chọn một phần tử có một số quy tắc về vị trí, lề, đường viền hoặc khoảng đệm, thì 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ột tại chỗ mô hình hộp nếu bạn di chuột qua các phần tử DOM có bật công cụ Kiểm tra phần 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. Đây là hình thức hơi khác của ngăn Kiểu. Nó không hiển thị các dòng CSS thực sự - chỉ ảnh hưởng của các quy tắc đó. Đây được gọi là "kiểu tính toán" của đối tượng và nó là kết quả tổng 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.
Kết luận
Nếu bạn thường xuyên làm việc với các trang web, thì công cụ Kiểm tra của Chrome rất đáng để khám phá. Và các tab khác trong DevTools, như Console và Network, có thể là vô giá đối với các nhà phát triển. Còn nhiều điều hơn chúng tôi có thể đề cập ngay bây giờ, nhưng tài liệu của riêng Google rất kỹ lưỡng và hữu ích.