Khám phá các quy trình làm việc mới trong tài liệu tham khảo toàn diện này về các tính năng của Chrome DevTools liên quan đến việc xem và thay đổi CSS.
Hãy xem phần Xem và thay đổi CSS để tìm hiểu kiến thức cơ bản.
Chọn một phần tử
Bảng điều khiển Elements (Thành phần) của DevTools cho phép bạn xem hoặc thay đổi CSS của một thành phần tại một thời điểm.
Trên ảnh chụp màn hình, phần tử h1 được làm nổi bật màu xanh dương trong Cây DOM là phần tử đã chọn.
Ở bên phải, các kiểu của phần tử sẽ xuất hiện trong thẻ Kiểu. Ở bên trái, phần tử được làm nổi bật trong khung nhìn, nhưng chỉ vì chuột đang di chuột qua phần tử đó trong Cây DOM.
Hãy xem phần Xem CSS của một phần tử để biết hướng dẫn.
Có nhiều cách để chọn một phần tử:
- Trong khung nhìn, hãy nhấp chuột phải vào phần tử rồi chọn Kiểm tra.
- Trong DevTools, hãy nhấp vào biểu tượng Chọn một phần tử
hoặc nhấn tổ hợp phím Command+Shift+C (Mac) hoặc Control+Shift+C (Windows, Linux), sau đó nhấp vào phần tử trong khung nhìn.
- Trong DevTools, hãy nhấp vào phần tử trong DOM Tree (Cây DOM).
- Trong DevTools, hãy chạy một truy vấn như
document.querySelector('p')trong Console (Bảng điều khiển), nhấp chuột phải vào kết quả rồi chọn Reveal in Elements panel (Hiện trong bảng điều khiển Elements (Phần tử)).
hoặc nhấn tổ hợp phím Command+Shift+C (Mac) hoặc Control+Shift+C (Windows, Linux), sau đó nhấp vào phần tử trong khung nhìn.Xem CSS
Sử dụng thẻ Elements (Thành phần) > Styles (Kiểu) và Computed (Đã tính toán) để xem các quy tắc CSS và chẩn đoán các vấn đề về CSS.
Điều hướng bằng đường liên kết
Thẻ Kiểu hiển thị các đường liên kết ở nhiều vị trí đến nhiều vị trí khác, bao gồm nhưng không giới hạn ở:
- Bên cạnh các quy tắc CSS, trang tính kiểu và nguồn CSS. Những đường liên kết như vậy sẽ mở bảng điều khiển Nguồn. Nếu trang tính kiểu được rút gọn, hãy xem phần Làm cho tệp rút gọn có thể đọc được.
- Trong phần Kế thừa từ ..., đến các phần tử mẹ.
- Trong lệnh gọi
var(), đến phần khai báo thuộc tính tuỳ chỉnh. - Trong các thuộc tính viết tắt
animation, thành@keyframes. - Đường liên kết Tìm hiểu thêm trong chú giải công cụ của tài liệu.
- Và hơn thế nữa.
Sau đây là một số điểm nổi bật:
Các đường liên kết có thể được tạo kiểu khác nhau. Nếu bạn không chắc một nội dung nào đó có phải là đường liên kết hay không, hãy thử nhấp vào nội dung đó để tìm hiểu.
Xem chú giải công cụ có tài liệu CSS, mức độ cụ thể và giá trị thuộc tính tuỳ chỉnh
Elements (Phần tử) > Styles (Kiểu) hiển thị chú giải công cụ có thông tin hữu ích khi bạn di chuột qua các phần tử cụ thể.
Xem tài liệu về CSS
Để xem chú giải công cụ có nội dung mô tả ngắn về CSS, hãy di chuột qua tên thuộc tính trong thẻ Styles (Kiểu).
Nhấp vào Tìm hiểu thêm để chuyển đến Tài liệu tham khảo CSS của MDN về thuộc tính này.
Để tắt chú giải công cụ, hãy đánh dấu vào Không hiển thị.
Để bật lại các tính năng này, hãy đánh dấu vào Cài đặt > Lựa chọn ưu tiên > Thành phần >
Hiện chú giải công cụ tài liệu CSS.
Tính cụ thể của bộ chọn chế độ xem
Di chuột qua một bộ chọn để xem chú giải công cụ có trọng số cụ thể.
Xem giá trị của thuộc tính tuỳ chỉnh
Di chuột qua --custom-property để xem giá trị của biểu tượng đó trong chú giải công cụ.
Xem CSS không hợp lệ, bị ghi đè, không hoạt động và các CSS khác
Thẻ Kiểu nhận dạng nhiều loại vấn đề về CSS và làm nổi bật các vấn đề đó theo nhiều cách.
Xem phần Tìm hiểu về CSS trong thẻ Kiểu.
Chỉ xem CSS thực sự được áp dụng cho một phần tử
Thẻ Styles (Kiểu) cho bạn thấy tất cả các quy tắc áp dụng cho một phần tử, bao gồm cả các nội dung khai báo đã bị ghi đè. Khi bạn không quan tâm đến các nội dung khai báo bị ghi đè, hãy sử dụng thẻ Computed (Đã tính toán) để chỉ xem CSS thực sự đang được áp dụng cho một phần tử.
- Chọn một phần tử.
- Chuyển đến thẻ Computed (Đã tính toán) trong bảng điều khiển Elements (Thành phần).
Đánh dấu vào hộp đánh dấu Hiện tất cả để xem tất cả tài sản.
Xem phần Tìm hiểu về CSS trong thẻ Đã tính toán.
Xem các thuộc tính CSS theo thứ tự bảng chữ cái
Sử dụng thẻ Đã tính toán. Xem phần Chỉ xem CSS thực sự được áp dụng cho một phần tử.
Xem các thuộc tính CSS kế thừa
Đánh dấu vào hộp đánh dấu Show All (Hiện tất cả) trong thẻ Computed (Đã tính toán). Xem phần Chỉ xem CSS thực sự được áp dụng cho một phần tử.
Ngoài ra, hãy di chuyển thẻ Styles (Kiểu) và tìm các phần có tên Inherited from <element_name>.
Xem quy tắc at-rules của CSS
Quy tắc tại là các câu lệnh CSS cho phép bạn kiểm soát hành vi của CSS. Elements (Phần tử) > Styles (Kiểu) hiển thị các quy tắc at-rules sau đây trong các phần chuyên biệt:
Xem quy tắc tại @property
Quy tắc tại @property CSS cho phép bạn xác định rõ ràng các thuộc tính tuỳ chỉnh CSS và đăng ký các thuộc tính đó trong một trang kiểu mà không cần chạy JavaScript.
Di chuột qua tên của thuộc tính đó trong thẻ Kiểu để xem chú giải công cụ có giá trị, nội dung mô tả của thuộc tính và đường liên kết đến thông tin đăng ký thuộc tính đó trong phần @property có thể thu gọn ở cuối thẻ Kiểu.
Để chỉnh sửa quy tắc @property, hãy nhấp đúp vào tên hoặc giá trị của quy tắc đó.
Xem quy tắc tại @supports
Thẻ Kiểu cho bạn thấy các quy tắc tại CSS @supports nếu chúng được áp dụng cho một phần tử. Ví dụ: hãy kiểm tra phần tử sau:
Nếu trình duyệt của bạn hỗ trợ hàm lab(), phần tử này sẽ có màu xanh lục, nếu không thì sẽ có màu tím.
Xem quy tắc tại @scope
Thẻ Kiểu cho bạn thấy quy tắc tại @scope CSS nếu các quy tắc này được áp dụng cho một phần tử.
Quy tắc tại @scope mới là một phần của quy cách CSS cấp 6 về Lớp kế thừa và xếp chồng. Nói cách khác, các quy tắc này cho phép bạn xác định phạm vi của kiểu CSS, tức là áp dụng kiểu một cách rõ ràng cho các phần tử cụ thể.
Xem quy tắc @scope trong bản xem trước sau:
- Kiểm tra văn bản trên thẻ trong bản xem trước.
- Trên thẻ Kiểu, hãy tìm quy tắc
@scope.
Trong ví dụ này, quy tắc @scope ghi đè phần khai báo background-color CSS toàn cục cho tất cả phần tử <p> bên trong các phần tử có lớp card.
Để chỉnh sửa quy tắc @scope, hãy nhấp đúp vào quy tắc đó.
Xem quy tắc tại @font-palette-values
Quy tắc tại @font-palette-values CSS cho phép bạn tuỳ chỉnh các giá trị mặc định của thuộc tính font-palette. Elements (Phần tử) > Styles (Kiểu) hiển thị quy tắc tại này trong một phần chuyên biệt.
Xem phần @font-palette-values trong bản xem trước tiếp theo:
- Kiểm tra dòng văn bản thứ hai trong bản xem trước.
- Trong Kiểu, hãy tìm phần
@font-palette-values.
Trong ví dụ này, các giá trị bảng màu phông chữ --New sẽ ghi đè các giá trị mặc định của phông chữ màu.
Để chỉnh sửa giá trị tuỳ chỉnh, hãy nhấp đúp vào giá trị đó.
Xem quy tắc tại @position-try
Quy tắc CSS @position-try cùng với thuộc tính position-try-options cho phép bạn xác định các vị trí neo thay thế cho các phần tử. Để tìm hiểu thêm, hãy xem bài viết Giới thiệu API định vị neo CSS.
Elements (Phần tử) > Styles (Kiểu) sẽ phân giải và liên kết những phần sau:
- Giá trị thuộc tính
position-try-optionsvào một phần@position-try --namechuyên dụng. - Giá trị thuộc tính
position-anchorvà đối sốanchor()cho các phần tử tương ứng có thuộc tínhpopovertarget.
Kiểm tra các giá trị position-try-options và phần @position-try trong bản xem trước tiếp theo:
popover- Trong bản xem trước, hãy mở trình đơn phụ, tức là nhấp vào TÀI KHOẢN CỦA BẠN rồi nhấp vào GIAN HÀNG.
- Kiểm tra phần tử có
id="submenu"trong bản xem trước. - Trong Kiểu, hãy tìm thuộc tính
position-try-optionsrồi nhấp vào giá trị--bottomcủa thuộc tính đó. Thẻ Kiểu sẽ đưa bạn đến phần@position-trytương ứng. - Nhấp vào đường liên kết giá trị
position-anchorhoặc các đối sốanchor()giống nhau. Bảng điều khiển Elements (Phần tử) sẽ chọn phần tử có thuộc tínhpopovertargettương ứng và thẻ Styles (Kiểu) sẽ hiển thị CSS của phần tử đó.
Để chỉnh sửa giá trị, hãy nhấp đúp vào giá trị đó.
Xem mô hình hộp của một phần tử
Để xem mô hình hộp của một phần tử, hãy chuyển đến thẻ Kiểu rồi nhấp vào nút 
Để thay đổi một giá trị, hãy nhấp đúp vào giá trị đó.
Tìm kiếm và lọc CSS của một phần tử
Sử dụng hộp Filter (Lọc) trên thẻ Styles (Kiểu) và Computed (Đã tính toán) để tìm kiếm các thuộc tính hoặc giá trị CSS cụ thể.
Để tìm kiếm cả các thuộc tính kế thừa trong thẻ Đã tính toán, hãy đánh dấu vào hộp đánh dấu Hiện tất cả.
Để điều hướng thẻ Đã tính toán, hãy nhóm các thuộc tính đã lọc trong các danh mục có thể thu gọn bằng cách đánh dấu vào Nhóm.
Mô phỏng một trang được đặt tiêu điểm
Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số thành phần lớp phủ sẽ tự động ẩn nếu được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn Mô phỏng một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang ở tiêu điểm.
Hãy thử mô phỏng một trang được đặt tiêu điểm trên trang minh hoạ này:
- Đặt tiêu điểm vào phần tử đầu vào. Một phần tử khác sẽ xuất hiện bên dưới phần tử đó.
- Mở Công cụ cho nhà phát triển. Cửa sổ DevTools hiện đang ở tiêu điểm thay vì trang, vì vậy phần tử này lại biến mất.
- Trong Elements (Phần tử) > Styles (Kiểu), hãy nhấp vào :hov, đánh dấu vào Emulate a focused page (Mô phỏng một trang được lấy tiêu điểm) và đảm bảo phần tử đầu vào được chọn. Giờ đây, bạn có thể kiểm tra phần tử bên dưới.
Bạn cũng có thể tìm thấy tuỳ chọn tương tự trên bảng điều khiển Rendering (Hiển thị).
Để khám phá thêm các cách đóng băng phần tử, hãy xem bài viết Đóng băng màn hình và kiểm tra các phần tử biến mất.
Bật/tắt lớp giả
Cách bật/tắt lớp giả:
- Chọn một phần tử.
- Trên bảng điều khiển Elements (Thành phần), hãy chuyển đến thẻ Styles (Kiểu).
- Nhấp vào :hov.
- Đánh dấu vào lớp giả mà bạn muốn bật.
Trong ví dụ này, bạn có thể thấy rằng DevTools áp dụng phần khai báo background-color cho phần tử, mặc dù phần tử này không thực sự được di chuột qua.
Thẻ Styles (Kiểu) hiển thị các lớp giả sau đây cho tất cả các phần tử:
Ngoài ra, một số phần tử có thể có lớp giả riêng. Khi bạn chọn một phần tử như vậy, thẻ Styles (Kiểu) sẽ hiển thị phần Force specific element state (Buộc thực thi trạng thái cụ thể của phần tử). Bạn có thể mở rộng và bật các lớp giả dành riêng cho phần tử đó.
Hãy xem phần Thêm trạng thái giả vào một lớp để xem hướng dẫn tương tác.
Xem các phần tử giả lập làm nổi bật được kế thừa
Phần tử giả cho phép bạn tạo kiểu cho các phần cụ thể của phần tử. Các phần tử giả lập làm nổi bật là các phần tài liệu có trạng thái "được chọn" và được tạo kiểu là "được làm nổi bật" để cho người dùng biết trạng thái này. Ví dụ: các phần tử giả như vậy là ::selection, ::spelling-error, ::grammar-error và ::highlight.
Như đã đề cập trong quy cách, khi nhiều kiểu xung đột, kiểu thác nước sẽ xác định kiểu chiến thắng.
Để hiểu rõ hơn về tính kế thừa và mức độ ưu tiên của các quy tắc, bạn có thể xem các phần tử giả làm nổi bật được kế thừa:
-
Tôi đã kế thừa kiểu của phần tử giả lập làm nổi bật của phần tử mẹ. Hãy chọn tôi!
Chọn một phần văn bản ở trên.
Trong thẻ Styles (Kiểu), hãy di chuyển xuống để tìm phần
Inherited from ::selection pseudo of....
