Xuất các thay đổi CSS từ trình kiểm tra (webkit, firebug, v.v.)

Khi tôi làm việc với CSS, tôi thường kiểm tra trong trình duyệt - chẳng hạn như Chrome - nhấp chuột phải vào một phần tử, nhấp vào Kiểm tra phần tử và chỉnh sửa CSS ngay tại đó. Việc sử dụng các phím mũi tên để thay đổi những thứ như lề và khoảng đệm giúp việc sắp xếp mọi thứ trở nên cực kỳ dễ dàng.

Không quá khó để thực hiện những thay đổi đó và áp dụng chúng vào tệp CSS, nhưng sẽ thật tuyệt nếu tôi có thể chỉ cần nhấp chuột phải vào bộ chọn trong trình kiểm tra và chọn "xuất" hoặc "sao chép" và có sẵn nội dung trong khay nhớ tạm.

Có một cái gì đó như thế này tồn tại?

Tôi đã tìm thấy câu trả lời cho điều này, ít nhất là với Chrome v14.

Khi ở trong phần Elements, chỉ cần nhấp vào liên kết "filename: linenumber" bên cạnh các quy tắc CSS. Tệp CSS hiển thị sẽ chứa tất cả các sửa đổi.

Nơi này chính xác:

Trong Chrome, bạn có thể nhấp chuột phải vào tệp CSS trong tab Nguồn và nhấp vào "Sửa đổi cục bộ"

Điều này cho bạn thấy tất cả các thay đổi cục bộ của bạn. Mỗi bản sửa đổi đều được đánh dấu thời gian và bạn có thể quay lại bất kỳ bản sửa đổi nào trước đó.

Xem phần Lịch sử sửa đổi và chỉnh sửa trực tiếp của hướng dẫn này.

Firediff là một tiện ích bổ sung Firebug theo dõi các thay đổi được thực hiện trong Firebug. Nó ghi lại mọi thứ bạn sẽ làm trong ngăn HTML (tuyệt vời) nhưng cũng như cách bạn sử dụng ngắn gọn tiện ích mở rộng Thanh công cụ dành cho nhà phát triển web (không quá tuyệt vời), giả sử Shift-Ctrl-F để lấy thông tin về kích thước phông chữ bằng px.

Tôi đã thấy tiện ích mở rộng Firebug trong Chrome nhưng không kiểm tra nó, tôi sử dụng Firediff với Firefox.

Tôi đã tạo một tiện ích mở rộng Chrome thực hiện chính xác điều này.

Nó được gọi là StyleURL - nó thực hiện bất kỳ thay đổi CSS nào bạn đã thực hiện trong Trình kiểm tra Chrome và xuất ra CSS hợp lệ dưới dạng khác biệt: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Đây là một ví dụ mà tôi đã thêm "padding-bottom: 50px" vào trang này:

Nó là mã nguồn mở và trên GitHub nữa: https://github.com/Jarred-Sumner/styleurl-extension

Trong Chrome cũng có tab Thay đổi trong ngăn điều khiển hiển thị tất cả các sửa đổi của CSS. Nó không phải là một xuất khẩu, nhưng ít nhất nó rất thuận tiện để nhanh chóng nắm bắt những gì đã thay đổi.

Tôi đã đề xuất sản phẩm này trên SO trước đây (tôi không liên kết với họ theo bất kỳ cách nào).

http://www.skybound.ca/

Sản phẩm tuyệt vời. Nghe giống chính xác những gì bạn đang tìm kiếm và hơn thế nữa.

CHỈNH SỬA: Một số câu trả lời khác ở đây đã đề cập đến khả năng của Google Chrome để liên kết với các tệp cục bộ của bạn (điều này rất tuyệt). Kiểm tra các câu trả lời khác!

Nếu bạn chỉnh sửa CSS bên ngoài, thì bạn có thể kéo bản sửa đổi mới nhất của nó ra khỏi bảng Tài nguyên vào bất kỳ trình soạn thảo văn bản nào hỗ trợ DnD (xem http://www.webkit.org/blog/1463/web-ins rà-styles-enhanced/ , phần "Các Thay đổi Duy trì" để biết thêm chi tiết.) Bạn cũng có thể hoàn nguyên các thay đổi CSS của mình về bất kỳ phiên bản nào trước đó của tài nguyên biểu định kiểu (trong menu bật lên nhấp chuột phải của bất kỳ bản sửa đổi biểu định kiểu nào.)

Như đã đề cập bởi cloudworks, câu trả lời cho điều này đã thay đổi. Điều này hiện có thể được thực hiện khá tốt bằng tiện ích mở rộng Tự động lưu của Chrome DevTools . Công cụ này theo dõi các thay đổi CSS và JavaScript được thực hiện trong bảng điều khiển Công cụ dành cho nhà phát triển Chrome và lưu chúng trở lại tệp cục bộ. Để biết hướng dẫn cài đặt và thiết lập tiện ích mở rộng, vui lòng tham khảo hướng dẫn được viết bởi @addyosmani trên blog của anh ấy, tại đây .

Ngoài ra còn có một video truyền hình tiện dụng trình bày chi tiết phần mở rộng khá tốt.

Với Workspaces, bạn có thể lưu CSS của mình khi nhập chúng vào trình kiểm tra (trong Chrome). Vấn đề là mọi thay đổi đều được lưu tự động và không có cách nào để tắt tính năng này, như đã chỉ ra trong http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ và Tắt tự động lưu các thay đổi CSS trong Công cụ dành cho nhà phát triển Chrome .

Cả Firefox và Chrome đều hỗ trợ tính năng này ngay bây giờ, nhưng cần lưu ý rằng trong một số nền tảng nếu không phải tất cả Chrome đều không hiển thị nó theo mặc định, bạn cần bật chế độ xem "Thay đổi" để xem nó (trong Kubuntu Linux 20.04 của tôi thì không theo mặc định), đây là cách bạn có thể bật nó: đi tới nút "Tùy chỉnh và kiểm soát DevTools" trong thanh Công cụ dành cho nhà phát triển> "Công cụ khác"> "Thay đổi" , sau đó tab sẽ xuất hiện ở nút:

Trong Firefox, bạn không cần phải kích hoạt nó, nhưng nếu bạn đến từ thế giới Chrom * thì có thể khó tìm thấy nó. Chỉ cần kiểm tra phần cuối cùng ở bên phải tại tab "Thanh tra":

Nếu bạn đang sử dụng các công cụ dành cho nhà phát triển chứng khoán của Firefox, bạn có thể chỉnh sửa css trực tiếp trong hộp thoại công cụ - nhấp vào nút CSS viewport (đó là nút ở trên cùng có {}biểu tượng) và chỉnh sửa css của bạn trực tiếp. Nó sẽ cập nhật theo thời gian thực trong trình duyệt và khi bạn hoàn tất, chỉ cần sao chép-dán trực tiếp vào tệp css của bạn. Đẹp!

Để thêm câu trả lời cụ thể cho Safari - điều này hoàn toàn có thể.

Khi bạn chỉnh sửa CSS trong phần Kiểu trong Trình kiểm tra cho tệp CSS hiện có, bạn có thể nhấn Cmd-Sđể lưu lại toàn bộ tệp với các thay đổi. Tuy nhiên, nếu bạn đang sử dụng một ngôn ngữ meta như Sass / tiền xử lý / tạo CSS của bạn bằng gói, v.v., tôi không nghĩ điều này thực sự giải quyết được vấn đề đó, mặc dù có thể có với bản đồ nguồn CSS.

Khi bạn chỉnh sửa CSS ở đầu phần Kiểu, bên dưới Style Attributeđể thêm kiểu nội tuyến (không liên kết với tệp CSS hiện có), dường như không thể dễ dàng xuất tất cả những thay đổi đó. Hiện tại, tôi chỉ sao chép và dán các ghi đè theo cách thủ công cho từng phần tử.

Tài liệu chính thức của Apple hơi cũ nhưng được tìm thấy ở đây: Hướng dẫn Trình kiểm tra Web - Chỉnh sửa Mã để Thay đổi Trang web của Bạn .

Trong Chrome, trong trình kiểm tra css, bạn có thể nhấp và giữ nút +, sau đó chọn thêm các thay đổi của mình vào biểu định kiểu trình kiểm tra. Nó không thuận tiện bằng việc chỉnh sửa trực tiếp trong css-selectors của bạn, nhưng những gì bạn viết đều sẽ có trong ins Inspector-stylesheet.css

Sản phẩm sắp ra mắt của tôi LIVEditor thực hiện chính xác điều này.

Để bạn dễ hiểu, bạn có thể nghĩ rằng thanh tra của Firebug được nhúng vào trình soạn thảo văn bản của bạn.

Bằng cách đó, bạn không phải thực hiện lại các thay đổi theo cách thủ công trong trình chỉnh sửa mã của mình sau khi bạn tinh chỉnh nó bằng cách sử dụng các công cụ dành cho nhà phát triển của Firebug hoặc Webkit.