Gỡ lỗi JavaScript của Chrome - làm cách nào để lưu các điểm ngắt giữa làm mới trang hoặc ngắt qua mã?

Khi sử dụng Chrome và đó là trình gỡ lỗi JavaScript, mỗi khi tôi tải lại trang / tập lệnh của mình, các điểm ngắt của tôi bị mất và tôi phải tìm tệp tập lệnh trong cửa sổ bật lên, tìm dòng mã cho điểm ngắt của mình, nhấp để thêm nó , Vân vân.

Có cách nào để lưu các điểm ngắt này để nó ngắt ngay cả sau khi làm mới trang (các trình gỡ lỗi khác mà tôi đã sử dụng làm điều này) không?

Ngoài ra, có cách nào rõ ràng trong mã JavaScript của tôi mà tôi có thể nhập nội dung nào đó để yêu cầu chrome bắt đầu theo dõi (tạm dừng trên một dòng) không?

Bạn có thể đặt một

debugger;

để phá vỡ hầu hết các môi trường JavaScript. Chắc chắn họ sẽ tồn tại. Thật tốt nếu bạn có một trình thu nhỏ xử lý trình gỡ lỗi và lệnh gọi console.log cho môi trường sản xuất, nếu bạn đang sử dụng chúng.

Trong các phiên bản gần đây của trình duyệt Chrome, có một tùy chọn "Lưu giữ nhật ký" trên đầu bảng điều khiển, bên cạnh các bộ lọc. Trong các phiên bản cũ hơn, nhấp chuột phải vào cửa sổ giao diện điều khiển trống sẽ mang lại tùy chọn đó ("Bảo tồn nhật ký khi điều hướng"). Thật tiện lợi khi bạn không có câu lệnh console.log hoặc lệnh gọi trình gỡ lỗi được mã hóa cứng.

cập nhật: Tôi đã tìm thấy một công cụ trên github, được gọi là ống khói , lấy một tệp và xóa tất cả các lệnh gọi console.log. nó cung cấp một ý tưởng tốt về cách loại bỏ các cuộc gọi trình gỡ lỗi.

Đặt các điểm ngắt của bạn, chuyển sang tab Mạng và chọn nút chuyển đổi Bảo tồn Nhật ký Khi Điều hướng . Bây giờ các điểm ngắt sẽ ở đó khi bạn làm mới.

Hoặc cách JavaScript là sử dụng

debugger;

Ngoài ra, bạn có gửi (các) tệp JavaScript của mình từ máy chủ đến máy khách với tham số truy vấn đính kèm tới URL với thời gian Epoch hiện tại không? Điều này được sử dụng để ngăn chặn bộ nhớ đệm của (các) tệp JavaScript.

Khi trường hợp này xảy ra, có vẻ như Công cụ nhà phát triển Chrome sẽ diễn giải tệp là một tệp khác sau khi làm mới, điều này sẽ xóa (chính xác) các điểm ngắt.

Đối với tôi, việc xóa tham số truy vấn đã khiến CDT giữ lại các điểm ngắt sau khi làm mới.

Điều này có thể xảy ra đối với các tập lệnh mà bạn đang tải hoặc đánh giá động từ các tập lệnh khác? Tôi có thể tự nói rằng kịch bản này thực sự làm tôi khó chịu cho đến khi tôi phát hiện ra thuộc tính sourceURL. Đặt nhận xét có định dạng đặc biệt sau vào dòng cuối cùng của tập lệnh mà bạn muốn gỡ lỗi sẽ 'neo' nó trong Chrome để nó có hệ quy chiếu cho nó:

// # sourceURL = filename.js

Các điểm ngắt được đặt theo cách thủ công của bạn bây giờ sẽ tồn tại giữa các lần tải trang! Quy ước thực sự bắt nguồn từ thông số kỹ thuật sơ đồ nguồn, nhưng Chrome ít nhất cũng tôn vinh nó như một kỹ thuật độc lập. Đây là một tài liệu tham khảo .

Đối với những người sử dụng ExtJs 6.x:
thay vì vô hiệu hóa Bộ đệm trong Ext.Loader, bạn có thể thêm "bộ nhớ đệm" hoặc tham số truy vấn "disableCacheBuster" vào URL của trang. Thao tác này sẽ xóa tham số "_dc" khỏi tệp và cho phép trình gỡ lỗi chrome duy trì điểm ngắt.

Xem bootstrap.js trong ứng dụng của bạn (tham số cấu hình disableCaching).

Bạn có thể sử dụng debugger;câu lệnh trong nguồn của mình để làm cho trình gỡ lỗi ngắt ở đó.

Công cụ dành cho nhà phát triển Chrome sẽ hoạt động theo cách bạn mong đợi nhưng bạn có thể đặt các debugger;câu lệnh trong mã (phát triển!) Của mình để tạm dừng việc thực thi.

Bạn có thể đặt trình gỡ lỗi; trước mã nơi bạn muốn bắt đầu gỡ lỗi. Khi trang bắt đầu tải, nó sẽ dừng lại ở trình gỡ lỗi; tuyên bố. Sau đó, bạn có thể dễ dàng áp dụng điểm gỡ lỗi theo yêu cầu của bạn.