Chỉnh sửa trong trình gỡ lỗi Chrome

Làm cách nào để tôi "tự động" chỉnh sửa mã JavaScript trong trình gỡ lỗi Chrome? Nó không dành cho tôi, vì vậy tôi không có quyền truy cập vào tệp nguồn. Tôi muốn chỉnh sửa mã và xem những hiệu ứng họ có trên trang, trong trường hợp này ngăn chặn một hình ảnh động xếp hàng một loạt các lần.

Bạn có thể sử dụng trình gỡ lỗi JavaScript tích hợp trong Công cụ dành cho nhà phát triển Chrome trong tab "Tập lệnh" (trong các phiên bản sau đó là tab "Nguồn"), nhưng những thay đổi bạn áp dụng cho mã chỉ được thể hiện tại thời điểm thực thi đi qua chúng. Điều đó có nghĩa là những thay đổi đối với mã không chạy sau khi tải trang sẽ không có hiệu lực. Không giống như các thay đổi đối với mã nằm trong trình xử lý di chuột , bạn có thể kiểm tra nhanh chóng.

Có một video từ sự kiện Google I / O 2010 giới thiệu các khả năng khác của Công cụ dành cho nhà phát triển Chrome.

Tôi đã bắt gặp điều này ngày hôm nay, khi tôi đang chơi xung quanh trang web của người khác.

Tôi nhận ra tôi có thể đính kèm một điểm dừng trong trình gỡ lỗi vào một số dòng mã trước khi tôi muốn chỉnh sửa động. Và vì các điểm dừng vẫn ở ngay cả sau khi tải lại trang , tôi có thể chỉnh sửa các thay đổi tôi muốn trong khi tạm dừng tại điểm dừng và sau đó tiếp tục để tải trang.

Vì vậy, như một công việc nhanh chóng xung quanh, và nếu nó hoạt động với tình huống của bạn:

1. Thêm một điểm dừng tại một điểm trước đó trong kịch bản
2. Trang tải lại
3. Chỉnh sửa các thay đổi của bạn thành mã
4. CTRL + s (lưu thay đổi)
5. Bỏ tạm dừng trình gỡ lỗi

Đây là những gì bạn đang tìm kiếm:

1.- Điều hướng đến tab Nguồn và mở tệp javascript

2.- Chỉnh sửa tập tin, nhấp chuột phải vào nó và một menu sẽ xuất hiện: nhấp vào Lưu và lưu cục bộ.

Để xem khác biệt hoặc hoàn nguyên các thay đổi của bạn, nhấp chuột phải và chọn tùy chọn Sửa đổi cục bộ ... từ menu. Bạn sẽ thấy các thay đổi của mình khác với tệp gốc nếu bạn mở rộng dấu thời gian được hiển thị.

Thông tin chi tiết tại đây: http://www.sitepoint.com/edit-source-files-in-chrom/

Khá dễ dàng, hãy chuyển đến tab 'scripts'. Và chọn tệp nguồn bạn muốn và bấm đúp vào bất kỳ dòng nào để chỉnh sửa nó.

Vì đây là câu hỏi khá phổ biến liên quan đến chỉnh sửa trực tiếp JS, tôi muốn chỉ ra một tùy chọn hữu ích khác. Theo mô tả của svjacob trong câu trả lời của mình:

Tôi nhận ra rằng tôi có thể đính kèm một điểm dừng trong trình gỡ lỗi vào một số dòng mã trước khi tôi muốn chỉnh sửa động. Và vì các điểm dừng ở ngay cả sau khi tải lại trang, tôi có thể chỉnh sửa các thay đổi tôi muốn trong khi tạm dừng tại điểm dừng và sau đó tiếp tục cho phép tải trang.

Giải pháp trên không phù hợp với tôi đối với JS khá lớn (gói webpack - phiên bản rút gọn 3,21 MB, 130k dòng mã trong phiên bản được chỉnh sửa) - chrome bị lỗi và yêu cầu tải lại trang mà hoàn nguyên mọi thay đổi đã lưu. Cách thực hiện trong trường hợp này là Fiddler nơi bạn có thể đặt tùy chọn Tự động tương ứng để thay thế bất kỳ tài nguyên từ xa nào bằng bất kỳ tệp cục bộ nào từ máy tính của bạn - xem câu hỏi SO này để biết chi tiết .

Trong trường hợp của tôi, tôi cũng đã phải thêm các tiêu đề CORS vào fiddler để phản hồi giả thành công.

Nếu javascript của nó chạy trên một nút bấm, thì thực hiện thay đổi trong Nguồn> Nguồn (trong công cụ dành cho nhà phát triển bằng chrome) và nhấn Ctrl + S để lưu, là đủ . Tôi làm điều này tất cả các thời gian.

Nếu bạn làm mới trang, các thay đổi javascript của bạn sẽ không còn nữa, nhưng chrome vẫn sẽ nhớ các điểm dừng của bạn.

Bây giờ google chrome đã giới thiệu tính năng mới. Bằng cách sử dụng tính năng này Bạn có thể chỉnh sửa mã của mình trong trình duyệt chrome. (Thay đổi vĩnh viễn về vị trí mã)

Đối với điều đó Nhấn F12 -> Tab nguồn - (bên phải) -> Hệ thống tệp - trong đó vui lòng chọn vị trí mã của bạn. và sau đó trình duyệt chrome sẽ yêu cầu bạn cho phép và sau đó mã đó sẽ chìm với màu xanh lục. và bạn có thể sửa đổi mã của mình và nó cũng sẽ phản ánh vị trí mã của bạn (Điều đó có nghĩa là nó sẽ thay đổi vĩnh viễn)

Cảm ơn

Giống như câu trả lời của @mark, chúng tôi có thể tạo Đoạn trích trong DevTools của Chrome, overridetheo JavaScript mặc định. Cuối cùng, chúng ta có thể thấy những hiệu ứng họ có trên trang.

Dưới đây là một giới thiệu nhẹ nhàng về trình gỡ lỗi js trong chrome mà tôi đã viết. Có lẽ nó sẽ giúp những người khác đang tìm kiếm thông tin về điều này: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrom/

bạn có thể chỉnh sửa động các tệp javascrpit trong trình gỡ lỗi Chrome, trong tab Nguồn , tuy nhiên các thay đổi của bạn sẽ bị mất nếu bạn làm mới trang, để tạm dừng tải trang trước khi thực hiện các thay đổi, bạn sẽ cần đặt điểm dừng sau đó tải lại trang và chỉnh sửa các thay đổi của bạn và cuối cùng bỏ tạm dừng trình gỡ lỗi để xem các thay đổi của bạn có hiệu lực.

Tôi đang tìm cách thay đổi tập lệnh và gỡ lỗi tập lệnh mới đó. Cách tôi quản lý để làm điều đó là:

1. Đặt điểm dừng trong dòng đầu tiên của tập lệnh bạn muốn thay đổi và gỡ lỗi.

2. Tải lại trang để điểm dừng đang được nhấn

3. Dán tập lệnh mới của bạn và đặt các điểm dừng mong muốn trong đó

4. Ctrl + s và trang sẽ làm mới khiến điểm dừng ở dòng đầu tiên bị nhấn.

5. F8 để tiếp tục, và bây giờ tập lệnh mới được dán của bạn thay thế tập lệnh gốc miễn là không có chuyển hướng và tải lại được thực hiện.

Chrome DevTools có Đoạn trích bảng điều khiển nơi bạn có thể tạo và chỉnh sửa mã JavaScript như trong trình chỉnh sửa và thực thi nó. Mở DevTools, sau đó chọn bảng Nguồn, sau đó chọn tab Đoạn trích.

https://developers.google.com/web/tools/chrom-devtools/snippets

Bạn có thể sử dụng "Ghi đè" trong Chrome để duy trì các thay đổi javascript giữa các lần tải trang, ngay cả khi bạn không lưu trữ nguồn gốc.

1. Tạo thư mục trong Công cụ dành cho nhà phát triển> Nguồn> Ghi đè
2. Chrome sẽ yêu cầu cấp phép cho thư mục, nhấp Cho phép
3. Chỉnh sửa tệp trong Nguồn> Trang sau đó lưu (ctrl-s). Dấu chấm màu tím sẽ cho biết tệp được lưu cục bộ.