2013-05-19 48 views
37

Bất kỳ ai cũng có thể cho tôi biết cách thức hoạt động của các công cụ dành cho nhà phát triển Chrome. Tôi tin rằng nó chỉ có sẵn trong Canary tại thời điểm này.Công cụ dành cho nhà phát triển Chrome ánh xạ vùng làm việc

Tôi nghĩ rằng nó cho phép tôi thực hiện thay đổi đối với các quy tắc CSS trong chế độ xem thành phần và tự động lưu chúng vào tệp cục bộ như được Paul Irish trình bày tại Google IO 2013. Tôi không thể có chức năng này công việc.

https://developers.google.com/events/io/sessions/325206725

Trả lời

54

Nó chỉ hoạt động trong canary tại thời điểm này.

EDIT: Bây giờ trong Chrome (từ ver 30+)

1) bạn cần phải mở DevTools thiết lập bảng điều khiển. Nó có phần 'Không gian làm việc'.

Screenshot of settings page

2) trong phần này, bạn cần phải bấm vào 'Thêm thư mục' mục. Nó sẽ hiển thị hộp thoại lựa chọn thư mục.

3) Sau khi chọn thư mục, bạn sẽ thấy thanh thông tin về quyền truy cập cho thư mục.

Screenshot of access rights infobar

4) Kết quả là bạn sẽ thấy hai yếu tố cấp cao nhất trong bảng điều khiển Nguồn pane chọn tập tin. Trong trường hợp của tôi nó là localhost: 9080 site và devtools thư mục hệ thống tập tin cục bộ. Tại thời điểm này, bạn cần tạo một ánh xạ giữa các tệp trang web và các tệp cục bộ của bạn. Bạn có thể làm điều đó thông qua menu ngữ cảnh trên một tệp.

Mapping screenshot

Nó không có vấn đề gì tập tin để lập bản đồ, địa phương hoặc tập tin trang web.

5) tại thời điểm đó, devtools sẽ hỏi bạn về khởi động lại. restart screenshot

Sau khi khởi động lại, công cụ sẽ hiển thị tất cả các thay đổi bạn thực hiện cho tệp cục bộ mỗi lần nhấn Ctrl + S hoặc Cmd + S trên mac.

+2

Tôi nên giải thích rằng tôi đã thực hiện tất cả các bước trên và vẫn không hoạt động khi tôi đang sử dụng "codeavengers.com" làm máy chủ của mình. ("codeavengers.com" được ánh xạ tới localhost trong tập tin lưu trữ của windows). Khi tôi thay đổi để sử dụng localhost trong url của tôi nó đã làm việc như mô tả ở trên. Tuy nhiên, gỡ lỗi JavaScript dường như ngừng hoạt động. – Mike

+0

Sau đó tôi đã chọn cài đặt tiện ích mở rộng của Chrome Tincr. Cho đến nay nó hoạt động tuyệt vời. http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/ – Mike

+0

Bạn cần phải kiểm tra cẩn thận rằng ánh xạ được áp dụng. Có thể cấu trúc trang web của bạn không phản ánh cấu trúc thư mục cục bộ. Ngoài ra, bạn cần phải có hai ánh xạ cho hai url, một cho localhost và một cho codeavengers.com. Nếu devtools không thể ánh xạ một tệp cục bộ vào một tệp trang web thì nó không thể đặt một điểm ngắt bên trong nó. – loislo

4

Chỉ cần sửa lại những gì loislo đã nói. "Nó chỉ hoạt động trong canary tại thời điểm này."

Bạn có thể kích hoạt tất cả các tính năng thử nghiệm này trong bản phát hành Chrome ổn định bằng cách nhập Chrome: // flags vào thanh địa chỉ.

Các vấn đề liên quan