Làm cách nào để gỡ lỗi JavaScript được tải động (với jQuery) trong chính trình gỡ lỗi của trình duyệt?

Tập lệnh được thêm động không hiển thị trong phần tập lệnh của trình gỡ lỗi của trình duyệt.

Giải trình:

Tôi cần sử dụng và đã sử dụng

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

để myScript.js có thể được tải động khi đáp ứng một số điều kiện ... Và myFunction chỉ có thể được gọi sau khi tải toàn bộ tập lệnh ...

Nhưng các trình duyệt không hiển thị myScript.js được tải động trong phần tập lệnh của trình gỡ lỗi.

Có cách nào khác để có thể đạt được tất cả các mục tiêu sẽ khiến người ta có thể gỡ lỗi một tập lệnh được tải động ở đó trong chính trình duyệt không?

Bạn có thể đặt tên cho tập lệnh được tải động của mình để nó hiển thị trong trình gỡ lỗi JavaScript của Chrome / Firefox. Để làm điều này, bạn đặt một nhận xét ở cuối tập lệnh:

//# sourceURL=filename.js

Sau đó, tệp này sẽ hiển thị trong tab "Nguồn" dưới dạng filename.js. Theo kinh nghiệm của tôi, bạn có thể sử dụng \ 's trong tên nhưng tôi nhận được hành vi kỳ lạ nếu sử dụng /' s.

Để biết thêm thông tin, hãy xem: Các điểm ngắt trong JavaScript động không còn dùng nữa của // @ sourceurl

Bạn có thể sử dụng //# sourceURL=và //# sourceMappingURL=ở cuối tệp tập lệnh hoặc thẻ tập lệnh của mình.

LƯU Ý: //@ sourceURL và //@ sourceMappingURLkhông được dùng nữa.

Tôi đã thử sử dụng "// # sourceURL = filename.js" được OP đề xuất như một giải pháp thay thế, nhưng nó vẫn không hiển thị cho tôi trong bảng Nguồn trừ khi nó đã tồn tại trong các tab của tôi từ trước đó khi nó tạo ra một ngoại lệ.

Mã hóa một "trình gỡ lỗi;" dòng buộc nó bị đứt tại vị trí đó. Sau đó, khi nó nằm trong các tab của tôi trong bảng điều khiển Nguồn, tôi có thể đặt các điểm ngắt như bình thường và xóa "trình gỡ lỗi;" hàng.

Lưu ý rằng tệp nguồn xuất hiện trong tab nguồn theo cách này sẽ xuất hiện trong nhóm (không có miền) và trong trường hợp bạn muốn gỡ lỗi, bạn sẽ cần thêm một debugger;dòng trong mã của mình, làm cho dòng đó được thực thi (thường là tại bắt đầu quá trình thực thi tệp nguồn của bạn) và sau đó thêm các điểm ngắt vào bất kỳ nơi nào bạn muốn.

Trong trường hợp bạn đang gỡ lỗi các giai đoạn sản xuất, nơi bạn có thể sẽ không có debugger;dòng nào trong mã của mình, bạn có thể thực hiện điều này bằng cách thực hiện bản đồ cục bộ với CharlesProxy tới "bản sao mới của tệp nguồn có chèn dòng trình gỡ lỗi".

Khi cố gắng theo dõi loại thứ này trong IE, tôi mở công cụ dành cho nhà phát triển (F12) và sau đó tìm vị trí đặt điểm ngắt bằng cách sử dụng dòng sau trong bảng điều khiển:

debugger;myFunction();

Điều đó chuyển sang tab trình gỡ lỗi, nơi bạn có thể bước vào myFunction()và đặt điểm ngắt.