Tôi đã gặp vấn đề này mãi mãi và cuối cùng đã quyết định rằng chúng ta không nên chỉnh sửa mọi thứ trong trình kiểm tra web và xây dựng một cái gì đó cho nó ( https://github.com/viatropos/design.io ).
Một giải pháp tốt hơn:
Trình duyệt tự động phản ánh các thay đổi CSS mà không cần tải lại khi bạn nhấn lưu trong trình soạn thảo văn bản của bạn .
Lý do chính khiến chúng tôi chỉnh sửa css trong trình kiểm tra web (tôi sử dụng webkit, nhưng FireBug nằm cùng dòng) là vì chúng tôi cần thực hiện các điều chỉnh nhỏ và mất quá nhiều thời gian để tải lại trang.
Có 2 vấn đề chính với phương pháp này. Đầu tiên, bạn được phép chỉnh sửa một yếu tố riêng lẻ có thể không có idbộ chọn. Vì vậy, ngay cả khi bạn có thể sao chép / dán CSS được tạo từ trình kiểm tra web, nó sẽ phải tạo ra một idphạm vi cho css. Cái gì đó như:
#element-127 {
background: red;
}
Điều đó sẽ bắt đầu làm cho css của bạn một mớ hỗn độn.
Bạn có thể khắc phục điều đó bằng cách chỉ thay đổi kiểu cho một bộ chọn hiện có ( .spacebộ chọn lớp trong hình ảnh trình kiểm tra webkit bên dưới).
Tuy nhiên, vấn đề thứ hai. Giao diện của thứ đó khá thô, thật khó để tạo ra những thay đổi lớn - như nếu bạn muốn thử sao chép thật nhanh khối css này vào nơi này, hoặc bất cứ điều gì.
Tôi chỉ muốn dính vào TextMate.
Lý tưởng là chỉ cần viết CSS trong trình soạn thảo văn bản của bạn và để trình duyệt phản ánh các thay đổi mà không cần tải lại trang . Bằng cách này, bạn sẽ viết css cuối cùng của mình khi bạn thực hiện những thay đổi nhỏ.
Cấp độ tiếp theo sẽ là viết bằng ngôn ngữ CSS động, như Stylus, Less, SCSS, v.v. và để cập nhật trình duyệt với CSS được tạo. Bằng cách này bạn có thể bắt đầu tạo mixin nhưbox-shadow() , loại bỏ sự phức tạp, điều mà thanh tra web chắc chắn không thể làm được.
Có một vài điều ngoài kia làm điều này, nhưng theo tôi thì không có gì thực sự hợp lý hóa nó.
- LiveReload : đẩy css lên trình duyệt mà không làm mới khi bạn nhấn lưu, nhưng đó là một ứng dụng mac , vì vậy rất khó để tùy chỉnh.
- CodeKit : cũng là một ứng dụng mac, nhưng nó làm mới trình duyệt mỗi khi bạn lưu.
Không có khả năng dễ dàng tùy chỉnh cách thức hoạt động của những công việc này là lý do chính khiến tôi không sử dụng chúng.
Tôi kết hợp https://github.com/viatropos/design.io để giải quyết vấn đề này và giải quyết vấn đề này:
- Trình duyệt phản ánh css / js / html / etc bất cứ khi nào bạn lưu mà không cần tải lại trang
- Nó có thể xử lý bất kỳ khuôn mẫu / ngôn ngữ / khung nào (Bút stylus, Ít hơn, CoffeeScript, Jade, Haml, v.v.)
- Nó được viết bằng JavaScript và bạn có thể nhanh chóng thực hiện các tiện ích mở rộng bằng JavaScript.
Bằng cách này, khi bạn cần thực hiện những thay đổi nhỏ đó cho CSS, bạn có thể nói, đặt màu nền, nhấn lưu, xem không, không hoàn toàn, điều chỉnh màu sắc bằng 10, lưu, không, điều chỉnh bằng 5, lưu, trông ổn.
Cách thức hoạt động của nó là bằng cách xem bất cứ khi nào bạn lưu tệp (ở cấp độ os), xử lý tệp (đây là nơi tiện ích mở rộng hoạt động) và đẩy dữ liệu lên trình duyệt thông qua websockets, sau đó được xử lý (phía máy khách của phần mở rộng).
Không cắm hoặc bất cứ điều gì, nhưng tôi đã đấu tranh với vấn đề này trong một thời gian dài.
Mong rằng sẽ giúp.
