2011-01-24 26 views
5

Tôi ghét Firefox, tôi thực sự làm, nhưng với tư cách là nhà phát triển web, tôi bị xích vào b/c bộ công cụ mạnh mẽ mà Firebug cung cấp. Gần đây, các công cụ kiểm tra của Chrome và Safari cho phép người dùng chỉnh sửa mã cấu trúc đầy đủ (theo cách rất lỗi), nhưng bạn vẫn không thể chỉnh sửa bảng định kiểu đầy đủ. Thông thường, khi ai đó đưa ra điều này, các nhà phát triển Chrome và Safari nói "NHƯNG BẠN CÓ THỂ CHỈNH SỬA CSS" và điều đó đúng, ở mức độ nào đó. Bạn có thể chỉnh sửa thuộc tính CSS theo thuộc tính (sẽ mất vĩnh viễn nếu bạn có nhiều thay đổi) trong cả hai trình duyệt, nhưng không có cách nào để xem biểu định kiểu được tính đầy đủ, thực hiện các chỉnh sửa trong đó và xem kết quả ngay lập tức. Cho đến nay, chỉ có một cài đặt đầy đủ của Firebug trên Firefox cho phép bạn làm điều này.Chỉnh sửa biểu định kiểu đầy đủ trong Chrome hoặc Safari

Đã có bất kỳ động lượng nào trong một trong các trại Chrome hoặc Safari để xây dựng một plugin để phù hợp với chức năng vô song này? Plugin giá rẻ cho phép bạn chèn CSS vào trang không phải là câu trả lời. Nó thực sự đơn giản:

  1. Có một danh sách với các stylesheets hiện đang được tham chiếu
  2. Chọn một trong những bạn muốn chỉnh sửa, và nhấp vào nút chỉnh sửa
  3. Xem tất cả các mã trong stylesheet
  4. Thực hiện các thay đổi và xem chúng được phản ánh trên trang ngay lập tức

Thực sự khó có thể xây dựng điều gì đó thực hiện điều này? Tôi nghĩ rằng nó phải được, b/c lý do tại sao các cộng đồng phát triển của hai trình duyệt hoàn toàn bỏ qua nó? Nếu có điều gì đó ngoài kia cung cấp khả năng này, tôi rất muốn nghe nó; nếu không, có thể ai đó sẽ bước lên đĩa và phát triển nó cho Chrome hoặc Safari. Có vẻ như những kẻ đã phát triển ứng dụng Chỉnh sửa CSS sẽ là tất cả điều này.

+4

'Tôi ghét Firefox' - một chế độ xem không phổ biến. Bất kỳ lý do cụ thể nào? Đối với câu hỏi thực tế của bạn - tôi không * thường * tìm thấy bản thân mình bằng cách sử dụng tính năng "thay đổi văn bản CSS thực tế" của Firebug, vì vậy tôi không bỏ lỡ nó từ Chrome. Thay đổi "bất động sản" thay đổi chỉ là bản chất thứ hai đối với tôi. Rõ ràng, thật tuyệt khi có tính năng Firebug mà bạn đang nói đến trong Chrome/Safari - nhưng tôi không nghĩ đó là một thỏa thuận lớn đối với hầu hết các nhà phát triển. – thirtydot

+0

"một chế độ xem không phổ biến" - hầu như không. Firefox và công cụ hiển thị Gecko nói riêng, đang bắt đầu cho thấy tuổi của nó. Nó không phải là không phổ biến để nghe nó được gọi là "IE mới" trong số các nhà phát triển trong nhóm của tôi, mà là một nhóm khoảng 400 chuyên gia. – bjork24

+2

Tôi xin lỗi, nhưng điều đó nghe có vẻ như rác rưởi. Firefox 3.6.13, mà thậm chí không phải là phiên bản mới nhất, điểm số trong những năm 90 cao trên thử nghiệm Acid3. Tôi thực sự bị hấp dẫn - có gì sai với công cụ hiển thị khiến bạn ghét nó đủ để có những từ đầu tiên của bài đăng của bạn là 'Tôi ghét Firefox'? – thirtydot

Trả lời

9

Nhờ bạn, tôi đã tìm thấy nó!

Live Stylesheets extension dành cho Chrome là những gì bạn đang tìm kiếm. Đảm bảo khởi động lại Chrome sau khi cài đặt để sử dụng.

+0

Cảm ơn bạn! Nó hoạt động hoàn hảo! – bjork24

+0

+1, có vẻ hoàn hảo cho thời gian kỳ lạ tôi muốn điều này trong Chrome. – thirtydot

+0

ngọt ngào, đẹp nhất @Knu! –

3

Bạn cũng có thể chỉnh sửa bảng định kiểu bên ngoài trong Chrome DevTools (kể từ Chrome 15 trở lên). Chỉ cần nhấp đúp vào nội dung biểu định kiểu trong bảng Tài nguyên (hoặc nhấp vào nút "Chỉnh sửa" bên dưới), chỉnh sửa, Ctrl-S để cam kết một bản sửa đổi mới, Esc để hủy chỉnh sửa. Và nó cập nhật trang của bạn khi bạn gõ!

0

Bạn có thể chỉnh sửa tệp CSS trực tiếp trên Chrome mà không dựa vào bất kỳ tiện ích mở rộng nào.

Sau đây là cách: Edit CSS files on the fly using Chrome DevTools

Một cách khác để truy cập nó:

  1. nhấn chuột phải trang, chọn kiểm tra
  2. trên DevTools, nhấp vào "Nguồn"
  3. xác định vị trí css trên ngăn "Mạng" và nhấp vào đó
  4. thay đổi css và lưu nó (bằng cách nhấn ctrl + s) enter image description here
Các vấn đề liên quan