Làm cách nào để lưu các thay đổi CSS của bảng Kiểu của Công cụ dành cho nhà phát triển Chrome?

Làm cách nào để lưu các thay đổi CSS của bảng Kiểu của Công cụ dành cho nhà phát triển Google Chrome ?

Tại trang web của công cụ, nó đã đề cập rằng chúng ta có thể thấy tất cả sự thay đổi trong bảng tài nguyên

Nhưng tôi đang làm việc cục bộ trên một tệp CSS nhưng các thay đổi không hiển thị trong bảng Tài nguyên cho tôi

Nhân tiện, bạn có biết bất kỳ tiện ích bổ sung, công cụ nào để lưu các thay đổi css của công cụ Chrome Developer không? Tôi biết đối với Fireorms có rất nhiều https://stackoverflow.com/search?q=fireorms+CSS+changes+save

Bạn có thể lưu các thay đổi CSS của mình từ Chrome Dev Tools. Chrome hiện cho phép bạn thêm các thư mục cục bộ vào Vùng làm việc của mình. Sau khi cho phép Chrome truy cập vào thư mục và thêm thư mục vào không gian làm việc cục bộ, bạn có thể ánh xạ tài nguyên web sang tài nguyên cục bộ.

• Điều hướng đến bảng Nguồn của Công cụ dành cho nhà phát triển, Nhấp chuột phải vào bảng điều khiển bên trái (nơi các tệp được liệt kê) và chọn Thêm thư mục vào Vùng làm việc . Bạn có thể nhanh chóng truy cập biểu định kiểu trong bảng Nguồn bằng cách nhấp vào biểu định kiểu ở phía trên bên phải của mỗi quy tắc CSS cho một thành phần được chọn trong bảng Thành phần.

• Sau khi thêm thư mục, bạn sẽ phải cấp cho Chrome quyền truy cập vào thư mục.

• Tiếp theo, bạn cần ánh xạ tài nguyên mạng tới tài nguyên cục bộ.

• Sau khi tải lại trang, Chrome hiện tải tài nguyên cục bộ cho các tệp được ánh xạ. Để làm cho mọi thứ đơn giản hơn, Chrome chỉ hiển thị cho bạn các tài nguyên cục bộ (vì vậy bạn không bị nhầm lẫn về việc bạn đang chỉnh sửa tài nguyên cục bộ hay tài nguyên mạng). Để lưu các thay đổi của bạn, nhấn CTRL + Skhi chỉnh sửa tệp.

ps

Bạn có thể phải mở (các) tệp được ánh xạ và bắt đầu chỉnh sửa để Chrome áp dụng phiên bản cục bộ (ngày 201604.12).

Nhà văn và nhà phát triển công nghệ DevTools ủng hộ ở đây.

Bắt đầu trong Chrome 65, Ghi đè cục bộ là một cách mới, nhẹ để thực hiện việc này. Đây là một tính năng khác với Không gian làm việc.

Thiết lập ghi đè

1. Chuyển đến bảng Nguồn .
2. Chuyển đến tab Ghi đè .
3. Bấm Chọn Thư mục để ghi đè .
4. Chọn thư mục bạn muốn lưu các thay đổi của bạn vào.
5. Ở đầu chế độ xem của bạn, nhấp Cho phép để cấp cho DevTools đọc và ghi quyền truy cập vào thư mục.
6. Hãy thay đổi. Trong GIF bên dưới, bạn có thể thấy rằng sự background:rosybrownthay đổi vẫn tồn tại trên các trang tải.

Làm thế nào ghi đè làm việc

Khi bạn thực hiện thay đổi trong DevTools, DevTools sẽ lưu thay đổi thành bản sao sửa đổi của tệp trên máy tính của bạn. Khi bạn tải lại trang, DevTools phục vụ tệp đã sửa đổi, thay vì tài nguyên mạng.

Sự khác biệt giữa ghi đè và không gian làm việc

Không gian làm việc được thiết kế để cho phép bạn sử dụng DevTools làm IDE của mình. Nó ánh xạ mã kho lưu trữ của bạn tới mã mạng, sử dụng bản đồ nguồn. Lợi ích thực sự là nếu bạn thu nhỏ mã của mình hoặc sử dụng mã cần được dịch mã, như SCSS, thì những thay đổi bạn thực hiện trong DevTools (thường) sẽ được ánh xạ trở lại mã nguồn ban đầu của bạn. Mặt khác, phần ghi đè cho phép bạn sửa đổi và lưu bất kỳ tệp nào trên web. Đó là một giải pháp tốt nếu bạn chỉ muốn nhanh chóng thử nghiệm các thay đổi và lưu những thay đổi đó qua các lần tải trang.

Các phiên bản mới của Chrome có một tính năng gọi là không gian làm việc nhằm giải quyết vấn đề này. Bạn có thể xác định đường dẫn nào trên máy chủ web tương ứng với đường dẫn nào trên hệ thống của bạn, sau đó chỉnh sửa và lưu chỉ với ctrl-s.

Xem: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Tôi biết đó là một bài viết cũ, nhưng tôi lưu nó theo cách này:

1. Chuyển đến khung Nguồn.
2. Nhấp vào Hiển thị Điều hướng (để hiển thị ngăn điều hướng bên trái).
3. Nhấp vào tệp CSS bạn muốn. (Nó sẽ mở trong trình chỉnh sửa, với tất cả các thay đổi bạn đã thực hiện)
4. Nhấp chuột phải vào trình chỉnh sửa và Lưu các thay đổi của bạn.

Bạn cũng có thể xem Sửa đổi cục bộ để xem bản sửa đổi của mình, tính năng rất thú vị. Cũng làm việc với các kịch bản.

Bạn đang tìm kiếm trong phần "Tài nguyên" sai.

Nó không thuộc "Bộ nhớ cục bộ", nó nằm dưới "Khung":

Ảnh chụp màn hình ở trên cho thấy sự khác biệt của các kiểu gốc so với các sửa đổi mới được thực hiện trong devtools. Bạn có thể nhấp chuột phải vào mục trong khung bên trái và lưu nó trở lại vào đĩa.

Tiện ích mở rộng Tincr Chrome dễ cài đặt hơn (không cần chạy máy chủ nút) VÀ cũng đi kèm với LiveReload như chức năng ngoài hộp! Nói về chỉnh sửa hai chiều! :)

Trang web Tin.cr

Liên kết cửa hàng Chrome trực tuyến

Bài viết trên blog của Andy

Bây giờ Chrome 18 đã được phát hành vào tuần trước với các API cần thiết, tôi đã xuất bản tiện ích mở rộng chrome của mình trong cửa hàng Chrome trực tuyến. Tiện ích mở rộng tự động lưu các thay đổi trong CSS hoặc JS trong các công cụ dành cho nhà phát triển vào đĩa cục bộ. Đi kiểm tra nó ra.

FYI, Nếu bạn đang sử dụng kiểu nội tuyến hoặc sửa đổi trực tiếp DOM (ví dụ: thêm một phần tử), không gian làm việc sẽ không giải quyết được vấn đề này. Đó là vì DOM đang sống trong bộ nhớ và không có tệp thực tế nào được liên kết với trạng thái hoạt động của DOM.

Vì thế, tôi thích chụp ảnh "trước" và "sau" của dom từ bảng điều khiển: copy(document.getElementsByTagName('html')[0].outerHTML)

Sau đó, tôi đặt nó trong một công cụ khác để xem những thay đổi của tôi.

Bài viết đầy đủ: https://medium.com/@theroccob/get-code-out-of-chrom-devtools-and-into-your-editor-defaf5651b4a

Để trả lời phần cuối của câu hỏi của bạn về bất kỳ tiện ích mở rộng nào có thể lưu thay đổi, có hotfix

Nó cho phép bạn lưu các thay đổi từ Chrome Dev Tools trực tiếp vào GitHub. Từ đó, bạn có thể thiết lập một hook post-receive trên GitHub để tự động cập nhật trang web của bạn.

Miễn là bạn chưa gắn CSS vào element.style:

1. Đi đến một phong cách bạn đã thêm. Cần có một liên kết nói thanh tra-bản định kiểu:

2. Nhấp vào đó và nó sẽ mở ra tất cả CSS mà bạn đã thêm trong bảng nguồn

3. Sao chép và dán nó - yay!

Nếu bạn đã và đang sử dụng element.style:

Bạn chỉ có thể nhấp chuột phải vào phần tử HTML của mình, nhấp vào Chỉnh sửa dưới dạng HTML, sau đó sao chép và dán HTML với các kiểu nội tuyến.

CẬP NHẬT 2019: Vì các câu trả lời khác đã lỗi thời, tôi sẽ thêm cập nhật tại đây. Trong phiên bản mới nhất, không cần ánh xạ thư mục chrome vào hệ thống tập tin.

Vì vậy, giả sử tôi có một thư mục web chứa các tệp HTML, CSS, JS trong máy tính để bàn mà tôi muốn được cập nhật khi tôi thực hiện các thay đổi trong chrome: =

1) Bạn cần một máy chủ cục bộ đang chạy như nút, v.v., thay vào đó, phần mở rộng vscode này tạo máy chủ cho bạn: phần mở rộng VSCode của máy chủ trực tiếp , cài đặt nó, chạy máy chủ.

2) tải trang html bằng chrome từ máy chủ cục bộ đang chạy.

3) Mở devTools-> Nguồn-> Hệ thống tập tin-> Thêm thư mục vào không gian làm việc

4) Thêm thư mục được sử dụng trong việc chạy máy chủ cục bộ. Không có ánh xạ bổ sung được yêu cầu trong chrome mới nhất! Ta-da!

Thêm về nó Chỉnh sửa tập tin với không gian làm việc

Lưu ý rằng những thay đổi được thực hiện trên tab kiểu sẽ KHÔNG phản ánh trên các tệp hệ thống tệp. Thay vào đó, bạn cần truy cập devtools-> source-> your_folder và sau đó thực hiện các thay đổi của bạn ở đó và tải lại trang để xem hiệu ứng.