2013-04-04 31 views
10

Tôi đang tự động thêm các thẻ CSS để trang với jQuery:Có điều gì giống như bản đồ nguồn cho CSS không?

$('<style type="text/css"/>').text(css).appendTo(document.head); 

Khi xem trong Công cụ nhà phát triển Chrome, tất cả các CSS xuất hiện như "localhost", mà không phải lúc nào cũng hữu ích:

enter image description here

Có điều gì giống như Bản đồ nguồn cho CSS, điều này sẽ cho phép tôi xác định nguồn của CSS cho trình gỡ rối không?

+0

Chỉ cần tò mò và không có ý nghĩa để làm cho bạn giải thích toàn bộ dự án của bạn, nhưng tại sao chính xác là bạn thêm vào stylesheets theo cách này? Thêm các bảng định kiểu có điều kiện trước khi các mẫu được phân phối chắc chắn sẽ giải quyết vấn đề này, cũng như làm cho công việc kết xuất lại ít hơn được yêu cầu bởi trình duyệt khi CSS động như thế này được tiêm ... – joeellis

+0

Chrome thực hiện công việc xác định từ xa, trang và CSS cấp phần tử. localhost chỉ là trang mặc định của bạn và có lẽ là nguồn chính xác của CSS được thêm động của bạn. Tuy nhiên, tôi có @joeellis, tôi không thích ý tưởng tạo CSS khi đang di chuyển. Nó sẽ được thêm vào luồng phản hồi càng sớm càng tốt để trình duyệt có thể sử dụng nó để hiển thị sau thay vì phải liên tục hiển thị lại các yếu tố dựa trên các thay đổi được thêm động. – iGanja

+0

@joeellis Đó là một hệ thống plugin cho một khung công tác lớn hơn. Plugin có thể làm những việc như thêm CSS và JavaScript vào trang được đánh giá sau khi ứng dụng chính được khởi tạo nhưng trước khi nó bắt đầu vòng lặp chính của nó. Mã keo kỳ lạ đòi hỏi các giải pháp keo dính kỳ lạ :) –

Trả lời

10

Thêm nguồnURL vào thẻ kiểu nội tuyến khi bạn thêm thẻ.

/*@ sourceURL=mystyles.css */ 

Điều này sẽ cung cấp cho thẻ kiểu nội tuyến đó một tên tạm thời sẽ được sử dụng bên trong DevTools để điều hướng.

+1

Có phải làm cho nó hoạt động với các bản đồ nguồn nội tuyến không? Ví dụ. ' ' –

0

Xác định nguồn của CSS. Nó chỉ hiển thị như là localhost vì nguồn của phong cách là từ javascript nội bộ trên trang chủ localhost của bạn. nếu bạn nhấp vào liên kết đến vị trí quy tắc, nó sẽ vẫn đưa bạn đến javascript nội dòng tự động đặt kiểu của bạn.

Đối với bản đồ nguồn, bạn đã thử mở rộng phần "Kiểu được tính toán" rồi mở rộng kiểu cụ thể mà bạn muốn xem thứ bậc thừa kế?

Các vấn đề liên quan