Hỗ trợ Sass/SCSS trong Công cụ Nhà phát triển Chromer

Question

Trước đây, cho đến thời gian gần đây (lên tới Chrome 27, theo như tôi có thể biết), Công cụ Phát triển Chrome, với sự trợ giúp từ Thử nghiệm của Chrome, Sass được hỗ trợ (SCSS chính xác) "kiểm tra".

Sự hỗ trợ thể hiện ở khả năng kiểm tra file CSS của trang web và nếu CSS đã được biên soạn từ SCSS sử dụng --debug-info (SCSS 3.2.7), sau đó trong bảng điều khiển CSS:

thay vì tập tin CSS liên kết - bạn sẽ thấy liên kết tệp SCSS tương ứng và bạn có thể bấm vào nó và nó sẽ mở tệp trong tài nguyên theo quy tắc SCSS chính xác đã đóng góp cho quy tắc CSS đang được kiểm tra (giống như bạn có thể với tệp CSS).

Vì lý do gì, điều này đã ngừng hoạt động với bản cập nhật Chrome mới nhất của tôi.

Điều này rất quan trọng đối với công việc tôi đang làm tại thời điểm này (SCSS sắp xếp lại một dự án lớn) vì vậy tôi hỏi: có ai có cùng trải nghiệm không (tôi có trên tất cả các máy tôi có quyền truy cập) và hơn thế nữa quan trọng là, có ai biết cách sửa chữa nó (không truy tìm phiên bản Chrome cũ hơn)?

Tôi đã không chắc chắn những gì sẽ là kênh SE thích hợp, nhưng vì nó liên quan đến phát triển - ở đây nó là

T.B. Các đường dẫn SCSS tạo dường như là đúng, vì trong FireSASS chúng được hiển thị và truy cập một cách chính xác

sự tương tự xảy ra trên bất kỳ kênh tôi đã cố gắng - Phát hành, Beta, Canary

Cập nhật 18.06.13

Vì dường như ngày cũ (--debug-info) không còn nữa, tôi sẽ chấp nhận câu trả lời @electric_g là khả năng duy nhất.

Answer 1

tôi đã cùng một vấn đề trên Chrome Canary và tôi cố định nó theo cách sau:

Đầu tiên tôi kích hoạt sự hỗ trợ cho các bản đồ nguồn: Web Inspector -> Cài đặt -> tab General -> chọn “Bật bản đồ nguồn”.

Sau đó, tôi cài đặt Sass 3.3 (có hỗ trợ bản đồ nguồn) sử dụng các hướng dẫn tìm thấy ở đây http://snugug.com/musings/debugging-sass-source-maps:

chạy

gem install sass --pre 

kiểm tra với

sass -v 

phải có ít nhất Sass 3.3. 0.alpha.101 sau đó sử dụng --sourcemap flag thay vì --debug-info/-g trên e khi bạn biên dịch các tệp của mình.

Answer 2

Trong trường hợp bất kỳ ai khác kết thúc ở đây, để sử dụng bản đồ nguồn trong Chrome cho Sass, bạn cần sử dụng cờ --sourcemap để tạo chúng trước tiên!

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css 

Thông tin thêm: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

Cờ --debug-info là dành cho FireSass.

Answer 3

Chrome của bạn có thể gặp lỗi cập nhật. Tôi bạn nhấp vào menu ở trên cùng bên phải và nhấp vào Giới thiệu về Google Chrome, bạn sẽ thấy phiên bản của mình (phải là 31+). Mỏ cho thấy một phiên bản cũ và một lỗi cập nhật.

Gỡ cài đặt Chrome, khởi động lại máy tính, cài đặt lại chrome.

Bạn nên có tất cả các công cụ mới nhất. Hỗ trợ SASS không còn được thử nghiệm trên phiên bản của tôi và được bật theo mặc định cho tôi. Nhưng bạn có thể phải bật tính năng này:

• Chuyển đến URL chrome: // flags rồi bật Thử nghiệm công cụ dành cho nhà phát triển.
• mở DevTools (Nhấp chuột phải một trang web Inspect Element)
• Nhấp vào biểu tượng bánh răng ở góc dưới bên phải
• Bấm thí nghiệm, và kích Enable Hỗ trợ Sass
• Nhấp vào General và bấm Enable nguồn CSS maps