Công cụ nhà phát triển của Google Chrome kiểm tra các kiểu phần tử không hiển thị

Bắt đầu từ vài tuần trước .... trên một số trang web của chúng tôi, nhưng không phải tất cả, khi kiểm tra một phần tử, tab kiểu chỉ hiển thị "hộp kiểu", nhưng không hiển thị kiểu thực tế liên quan đến css ?? - Một lần nữa, điều này CHỈ có trên một số trang web - kỳ lạ

Nó sẽ giống như thế này (với các kiểu hiển thị ở bên phải liên quan đến css)

NHƯNG ...... thay vào đó, trên MỘT SỐ trang web của chúng tôi, trang này mới bắt đầu vài tuần trước trông giống như thế này .... không có css hiển thị trong tab kiểu:

LƯU Ý: nó đã hoạt động được 2 năm - Trang trông ổn và tất cả các kiểu đang được áp dụng cho DOM, nhưng KHÔNG hiển thị trong tab kiểu khi kiểm tra phần tử.

Có ý kiến ​​gì không ??

Tôi vừa gặp sự cố tương tự này và để giải quyết nó, tôi đã vào Công cụ dành cho nhà phát triển Chrome -> Cài đặt -> Cuộn xuống dưới cùng và nhấp vào "Khôi phục mặc định và tải lại" sau đó mọi thứ trở lại một cách kỳ diệu!

Tôi đã không thay đổi bất cứ điều gì giữa nó hoạt động và khi nó dừng nên không chắc tại sao nó bị hỏng nhưng hy vọng điều này cũng giúp bạn.

Tôi chỉ cần đóng tab và mở lại, sau đó nhấp chuột phải> kiểm tra phần tử. Không cần khôi phục toàn bộ công cụ dành cho nhà phát triển về cài đặt mặc định. Đó là một sự lãng phí. Hãy thử nó, nó hoạt động! :)

Tôi phải truy cập Chrome Developer Tools -> Settings -> Enable JavaScript source mapsvà sau đó tắt hộp kiểm đó. Nó có lẽ đã làm với sourcemaps và thực tế là tôi đang xây dựng scssđến css.

thứ gì đó phù hợp với tôi: chrome: flags> Bật thử nghiệm Công cụ dành cho nhà phát triển> Tắt. Tôi đã kích hoạt nó tại một số điểm, sử dụng nó trong nhiều năm với vấn đề, sau đó không thể nhìn thấy bất kỳ chi tiết kiểu dáng nào như OP đã mô tả. Sau khi cập nhật, đặt lại các prefs của devtools về mặc định, thậm chí thử chế độ ẩn danh, đây là một điều dường như khiến nó hoạt động trở lại. Có một số thí nghiệm gọn gàng, nhưng tôi muốn có thể làm công việc của mình ...

Tôi cũng đang phải đối mặt với vấn đề này, ngoài các đề xuất mà những người dùng khác đã thực hiện để tôi truy cập:

Công cụ dành cho nhà phát triển Chrome -> CSS -> Nạp lại Trang tính kiểu được liên kết

Hình ảnh Điều chỉnh quy trình

Tôi chỉ có cùng một vấn đề kỳ lạ. Tôi không chắc 100% điều gì đã kích hoạt điều này xảy ra nhưng chúng tôi sử dụng các công cụ xây dựng để xây dựng SCSS thành CSS. Tôi đã truy cập tệp CSS của mình và xóa tham chiếu bản đồ nguồn -

/*# sourceMappingURL=myCSS.map */

Và đột nhiên nó bắt đầu hiển thị trở lại. Sau đó, tôi đã thêm nó trở lại và tôi vẫn có thể nhìn thấy nó. Tôi không chắc đây có phải là do một phiên bản của bản đồ được lưu vào bộ nhớ cache bây giờ hay không nhưng điều này đã làm việc cho tôi.

Ngay cả tôi cũng phải đối mặt với vấn đề này !!!

tệp style.css đã gây ra sự cố này ..

Tôi vừa tạo một tệp css mới (Ví dụ: style1.css) và cắt dán nội dung tệp css cũ hơn (tất cả các dòng trong style.css) vào tệp style1.css. Nó hoạt động

Lưu ý: Đừng quên cập nhật thẻ liên kết đang tải tệp css.

Tôi nghĩ rằng các tệp CSS của bạn không được tải đúng cách. Chỉ cần kiểm tra cú pháp để tham chiếu các bảng định kiểu bên ngoài.

Nó phải như thế này

<link rel="stylesheet" type="text/css" href="mystyle.css">

Nếu bạn đang bỏ qua rel = "stylesheet", trình duyệt có thể nghĩ rằng nó là một tệp thuần túy. Để xác nhận việc tải biểu định kiểu, hãy truy cập Trình kiểm tra Chrome -> Nguồn

Kiểm tra tài nguyên trang web

Không cần đặt lại bất cứ điều gì. Hy vọng nó giúp :)

Tôi sử dụng Dreamweaver và Breckets. Có thể thấy rằng sự cố chỉ xảy ra khi tôi sử dụng Dreamweaver. Giải quyết vấn đề bằng cách thay đổi tùy chọn của Dreamweaver

-> Định dạng mã -> Loại ngắt dòng -> CR LF (Windows)

Một biến khác cho hỗn hợp - sử dụng các biến CSS nhưng một trong các biến đang tham chiếu đến một biến khác không tồn tại.

Các phần tử sử dụng biến bị thiếu đó trong chuỗi hoàn toàn không hiển thị trong chromium (nó ẩn tất cả các tham chiếu đến h2s trong trường hợp trang web của tôi).

Điều thú vị là nó vẫn hiển thị các phần tử trong bảng công cụ dành cho nhà phát triển của Firefox.

Tìm lỗi trong tệp CSS, trong trường hợp của tôi là lỗi trên các biến CSS chung, việc sửa lỗi đã giải quyết được vấn đề.

Công cụ này có thể giúp bạn tìm ra lỗi: https://jigsaw.w3.org/css-validator/

Tôi nghĩ điều này có thể hữu ích .. Nếu đó là một dự án góc cạnh> thì chỉ cần chạy

ng phục vụ --extract-css.