Google Chrome không chỉ là trình duyệt tiêu dùng nhanh – nó còn giấu đầy tính năng dành cho nhà phát triển dưới vỏ bọc. Bạn có thể tiết lộ một phần sức mạnh đó với công cụ "Kiểm tra" (Inspect). Mặc dù ban đầu có vẻ choáng ngợp, công cụ này cho bạn cái nhìn sâu vào cách trang web được xây dựng, và có thể giúp bạn gỡ lỗi trang của riêng mình.
Truy cập công cụ Kiểm tra
Công cụ Kiểm tra có thể tìm thấy trong menu ngữ cảnh của Chrome.
Chuột phải vào bất kỳ phần tử nào trong trình duyệt và click "Kiểm tra" (Inspect) trong menu ngữ cảnh.
Một cửa sổ sẽ trượt ra từ bên của trình duyệt Chrome như hình dưới. Đây gọi là bảng DevTools. Nếu bạn từng dùng Firebug trên Firefox, bạn có thể nhận ra một số phần của nó.
Ở đây có nhiều thứ, nên hãy xem xét các phần riêng lẻ.
Kiểm tra trình kiểm tra
Bảng kiểm tra được chia thành một số tab khác nhau 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ụ Kiểm tra phần tử (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ị (Device Preview). Ở chế độ này bạn có thể thấy 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 click nút đó, bạn sẽ thấy trang web của mình chuyển sang khung nhìn mới.
Sau đó bạn có thể dùng menu thả xuống phía trên khung xem trước hoặc các tay cầm ở hai bên khung xem trước để thay đổi kích thước cửa sổ xem trước thiết bị.
Chế độ xem HTML
Phần lớn tab DevTools được chiếm bởi khung HTML.
Khung này giống như "Xem nguồn" (View Source) siêu cấp. Nó được cấu trúc theo DOM, với các phần tử lồng bên trong phần tử cha của chúng.
Bạn sẽ thấy phần tử bạn "kiểm tra" ở đầu được tự động nổi bật với nền xám hoặc xanh. Ở đây, tôi đã kiểm tra một hình ảnh nằm trong một liên kết. Như mong đợi, tôi thấy thẻ neo (anchor) được nổi bật.
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 lồng trong thẻ neo bằng cách click tam giác tiết lộ bên cạnh <a>. Trong trường hợp này mũi tên tiết lộ thẻ <img> tôi mong đợi.
Bạn cũng sẽ nhận thấy một thanh menu nhỏ ở dưới khung HTML.
Điều này gọi là dấu vết bánh mì (breadcrumb trail), và nó cho thấy tất cả các phần tử cha của phần tử được chọn. Để điều hướng đến một trong những phần tử đó, chỉ cần click vào nó.
Kiểu dáng (Styles)
Dưới khung HTML chúng ta cũng thấy khung hiển thị bất kỳ quy tắc CSS nào áp dụng cho phần tử của chúng ta. Điều này gọi là khung Kiểu dáng (Styles), và trong trường hợp này chúng ta thấy tất cả quy tắc áp dụng cho thẻ neo tôi đã kiểm tra trước đó.
Bạn có thể bật/tắt quy tắc bằng cách di chuột qua và click hộp kiểm bên cạnh nó.
Bạn sẽ thấy thay đổi này phản ánh ngay lập tức trong khung xem trước trang. Và nếu bạn click 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 quy tắc cụ thể bằng hộp tìm kiếm Filter.
Khung Kiểu dáng có khả năng nhiều hơn thế, tuy nhiên. Hãy xem tài liệu của Google để có giải thích đầy đủ về các chức năng của khung Style.
Mô hình hộp (Box Model) và Kiểu dáng đã tính toán (Computed Style)
Bên cạnh khung kiểu dáng là mô hình hộp cho phần tử được chọn. Nếu bạn không quen, mô hình hộp là hình ảnh trừu tượng của margin, border, padding, và kích thước nội dung áp dụng cho một phần tử cụ thể.
Trong trường hợp này tôi thấy phần tử của mình có kích thước chính 461 x 209 pixel. Nó không chứa quy tắc margin, border, hay padding, nên các hộp đó trống.
Nếu bạn chọn phần tử có một số quy tắc vị trí, margin, border, hoặc padding, mô hình hộp của bạn có thể trông giống như này.
Bạn cũng có thể thấy mô hình hộp in situ nếu di chuột qua các phần tử DOM với công cụ Kiểm tra phần tử được bật.
Dưới mô hình hộp là danh sách tất cả quy tắc kiểu dáng áp dụng cho phần tử cụ thể này. Điều này hơi khác với khung Styles. Nó không hiển thị các dòng CSS thực tế – chỉ hiển thị hiệu ứng của những quy tắc đó. Điều này gọi là "kiểu dáng đã tính toán" (computed style) của đối tượng, và đó là kết quả kết hợp của CSS của bạn.
Cuối cùng, bạn có thể tìm kiếm quy tắc cụ thể bằng cách gõ vào hộp Filter.
Kết luận
Nếu bạn thường làm việc với trang web, 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ể vô giá cho nhà phát triển. Có nhiều hơn thế chúng ta có thể bao quát ngay bây giờ, nhưng tài liệu riêng của Google rất kỹ lưỡng và hữu ích.