Tiêm CSS bằng công cụ nhà phát triển chrome?

Question

Tôi có thể thêm CSS vào trang tôi đang xem ở đâu? Tôi không muốn thêm trực tiếp phong cách vào một phần tử, tôi muốn thêm một 'tài liệu' vào trang để gỡ lỗi thay đổi trước khi chỉnh sửa style.css của trang web.

Lưu ý, có rất nhiều câu hỏi ở đây về 'tiêm CSS từ tiện ích mở rộng chrome', nhưng cụ thể là tôi muốn thực hiện điều đó thông qua điều 'Công cụ dành cho nhà phát triển Chrome'.

Answer 1

Đây có phải là những gì bạn đang sau ?: "Làm thế nào để Sửa Source Files trực tiếp trong Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

Answer 2

Tôi không chắc chắn nếu nó hoạt động, nhưng bạn sẽ phải cố gắng.

Nhấn F12/(Cmd +opt + tôi trên Mac) để mở Developer Console và đi đến tab Console.

Sao chép dán đoạn mã sau (chỉnh sửa đường dẫn):

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">'); 

Ngoài ra, bạn có thể chỉnh sửa một tài sản để thanh tra-stylesheet.css được tạo ra bởi Chrome, và sao chép qua nguồn CSS của bạn ở đó.

Answer 3

này nên làm việc (dán vào giao diện điều khiển, chỉnh sửa đối số trong dòng cuối cùng khi cần thiết):

(function(i,n,j,e,c,t,css){ 
    css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e; 
    t.insertAdjacentElement('beforeend',css);}) 
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head'); 

này sẽ chèn một <link>

với một href //fonts.googleapis.com/css?family=Roboto

trước khi bế mạc </head>

Nếu không có thẻ đầu trong tài liệu bạn đang cố thêm tệp css vào, tr y body làm đối số cuối cùng:

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body'); 

Answer 4

Tại sao không phải là một loại khung đơn giản bất khả tri như thế này?

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('ref', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}()) 

Dường như làm việc như một nét duyên dáng ...

Answer 5

Đến tab nguồn trong các công cụ dev và click chuột phải ở cột bên trái, sau đó thêm thư mục để không gian làm việc và sử dụng tập tin thám hiểm để chọn thư mục đó chứa tệp css của bạn. Bạn sẽ phải cho phép thực hiện thay đổi, một khi bạn làm điều này bạn sẽ thấy thư mục của bạn trong cây nguồn, mở thư mục của bạn tìm tập tin và nhấp chuột phải vào tệp css của bạn và chọn ánh xạ tới tài nguyên mạng. Khi bạn ánh xạ tệp bạn có thể mở và xem nó trong không gian làm việc và từ tệp đó, bất kỳ thay đổi nào được thực hiện sẽ ảnh hưởng đến kiểu trang. Vì vậy, về cơ bản phong cách của bạn sẽ vượt qua các phong cách phục vụ.