Các điểm ngắt trình gỡ lỗi javascript của Chrome không làm được gì?


81

Tôi dường như không thể tìm ra công cụ gỡ lỗi của Chrome.

Tôi có phiên bản chrome 21.0.1180.60 m.

Các bước tôi đã thực hiện:

  1. Tôi nhấn ctrl-shift-i để hiển thị bảng điều khiển.
  2. Nhấp vào Nguồn sau đó chọn tệp javascript có liên quan mà tôi muốn gỡ lỗi.
  3. Tôi đặt các điểm ngắt mà tôi muốn mã dừng lại bằng cách đặt một thẻ màu xanh lam trên rãnh nước bên cạnh dòng bên trái.
  4. Tôi đã nhấp vào nút trên trang web của mình (là một trang được hiển thị bằng php) để bắt đầu mã javascript.
  5. Mã đã chạy thành công mà không dừng lại.

Tôi cũng nhận thấy rằng Biểu thức đồng hồ cũng không hoạt động. Nó liên tục cho tôi biết rằng biến mà tôi muốn xem là không xác định.

Kiểm tra thêm cho thấy rằng mã của tôi là nguyên nhân khiến điểm ngắt bị lỗi. Có vẻ như nó không thành công trên dòng "$ (" # frmVerification "). Submit (function () {". Nó không bước vào các điểm ngắt bên trong hàm đó ().

Dưới đây là:

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});

"Nguồn" trong bước 2 của bạn phải là "Tài nguyên"?
Deqing

Chrome của tôi có các phần sau trong bảng theo thứ tự: Phần tử, Tài nguyên, Mạng, Nguồn, Dòng thời gian, Hồ sơ, Kiểm tra, Bảng điều khiển. Tuy nhiên, Tài nguyên, sẽ không cho phép tôi thêm điểm ngắt. Chỉ có Nguồn mới có.
chaser

Bạn có thể thử một trang đơn giản với javascript đơn giản để xem liệu điểm ngắt có hoạt động hay không. Bằng cách này, bạn có thể biết liệu đó có phải là sự cố của Chrome 21.0.1180.60 hay không
Deqing

Tôi cũng đã xem nhiều hướng dẫn trực tuyến và được cho là có bảng "Script" ... nhưng tôi không có?
chaser

Đúng. Trong chrome (20.0.1132.43) của tôi, nó có: Phần tử, Tài nguyên, Mạng, Tập lệnh, Dòng thời gian, Hồ sơ, Kiểm tra, Bảng điều khiển. Vì vậy, có vẻ như trong Chrome 21, họ đã thay đổi "Tập lệnh" thành "Nguồn"
Deqing

Câu trả lời:


160

Tôi không chắc tại sao các điểm ngắt của bạn không đạt, nhưng một cách chắc chắn để bước vào mã của bạn là nhập

debugger;

nơi bạn muốn mã tạm dừng, sau đó chạy lại khi mở cửa sổ công cụ dành cho nhà phát triển chrome.


Chỉ cần lưu ý một điều nhỏ, hãy đảm bảo dọn dẹp sau khi bạn hoàn thành và xóa các dòng trình gỡ lỗi. Nếu bạn từng chạy các tệp JavaScript thông qua trình nén YUI, thì sự tồn tại của một debugger;dòng sẽ khiến nó bị lỗi.


1
Tôi đã đặt trình gỡ lỗi trong hàm jquery, và nó vẫn không hoạt động. Vui lòng xem mã mà tôi đã tải lên. Điều này có phải do JQuery không?
chaser

1
@chrolli - Tôi không thấy bất kỳ trình gỡ lỗi nào; trong mã, nhưng bất kể, nó chắc chắn sẽ hoạt động với jQuery. Thay vì debugger ;, ném một cảnh báo trong đó chỉ để chắc chắn rằng mã đang được gọi là ở tất cả
Adam Rackis

1
@AdamRackis cảm ơn vì trình gỡ lỗi đó; tiền boa. Thực sự hữu ích !! :)
gsaslis

1
Cảm ơn vì điều đó cũng có tác dụng với tôi và sau khi xóa dòng, chức năng của các điểm ngắt trên Chrome đã trở lại bình thường.
Jeroen Rondeel

1
Để trình gỡ lỗi hoạt động, 'Tắt bộ nhớ cache' cần được đặt trong tab Mạng hoặc bạn sẽ chạy mã được lưu trong bộ nhớ cache. Chọn cái này rồi tải lại bằng Ctrl F5.
CYoung 24/07/19

20

Đây là một câu trả lời muộn, nhưng tôi đã có cùng một vấn đề, nhưng câu trả lời là khác nhau.

Trong trường hợp của tôi, có một tham chiếu sourceURL trong mã của tôi:

//@ sourceURL=/Scripts/test.js

Khi tệp Javascript này được trình duyệt thu nhỏ và tải, nó thường cho Chrome Dev Tools biết phiên bản chưa được hoàn thiện ở đâu.

Tuy nhiên, nếu bạn đang gỡ lỗi phiên bản chưa được hợp nhất và dòng này tồn tại, Chrome Dev Tools sẽ ánh xạ tới đường dẫn sourceURL đó thay vì đường dẫn "bình thường".

Ví dụ: nếu bạn làm việc cục bộ trên máy chủ web, thì trong tab Nguồn trong Công cụ dành cho nhà phát triển của Chrome, đường dẫn đến tệp JS nhất định sẽ là http://localhost/Scripts/test.js

Nếu test.js có cái này ở dưới cùng

//@ sourceURL=/Scripts/test.js

thì các điểm ngắt sẽ chỉ hoạt động nếu đường dẫn tệp /Scripts/test.js, không phải là URL đủ điều kiện củahttp://localhost/Scripts/test.js

Trong Chrome 38, vẫn với ví dụ của tôi ở trên, nếu bạn nhìn vào tab Nguồn, mọi tệp đều chạy hết http://localhost/, vì vậy khi bạn nhấp vào test.js, Chrome sẽ tải lênhttp://localhost/Scripts/test.js

Bạn có thể đặt tất cả các điểm ngắt bạn muốn vào tệp này và Chrome không bao giờ chạm vào bất kỳ điểm nào trong số đó. Nếu bạn đặt một breakpoint trong JS của mình trước khi nó gọi bất kỳ hàm nào trong test.js và sau đó bước vào hàm đó, bạn sẽ thấy Chrome mở một tab mới có đường dẫn /Scripts/test.js. Đặt các điểm ngắt trong tệp này sẽ dừng dòng chương trình.

Khi tôi loại bỏ @ sourceURLdòng khỏi tệp JS, mọi thứ hoạt động bình thường trở lại (tức là theo cách bạn mong đợi).


11

Có thể là lỗi này https://code.google.com/p/chromium/issues/detail?id=278361

Điều này được sao chép bằng Chrome 31.0.1650.57 (Bản dựng chính thức 235101) của tôi trên Linux.

Tôi đang khởi động lại trình duyệt để khắc phục.


2
Vẫn là sự cố với Phiên bản 50.0.2661.94 (64-bit) trên OSX Capitan
Mexx

Chỉ xảy ra với tôi trên Win10 với Chrome 51. Tôi đã sử dụng một công cụ dev undocked cửa sổ, tôi giết cửa sổ và đó là đủ vào cuối của tôi
Chris Marisic

9

Tôi gặp một vấn đề tương tự. Các điểm ngắt không hoạt động trừ khi tôi sử dụng debugger;. Tôi đã khắc phục sự cố các điểm ngắt của mình bằng "Khôi phục mặc định và tải lại". Nó nằm trong Công cụ dành cho nhà phát triển Chrome, Cài đặt, Khôi phục mặc định và tải lại.


1
Điều đó đã làm việc cho tôi. Ps: Tôi không cần phải sử dụng "trình gỡ lỗi;". Đối với bất kỳ ai đang tìm kiếm nó trong Phiên bản 58.0.3029.110 hoặc lâu hơn, hãy nhấp vào 3 dấu chấm vert, Cài đặt (F1) và "Khôi phục mặc định và tải lại" là một nút ở dưới cùng.
www-0av-Com

5

Đảm bảo rằng tập lệnh có "trình gỡ lỗi;" tuyên bố trong đó không bị hộp đen bởi Chrome. Bạn có thể chuyển đến tab Nguồn để kiểm tra và tắt hộp đen nếu vậy.

CHỈNH SỬA: Đã thêm ảnh chụp màn hình.

Cách tắt hộp đen.


Tính năng đó nằm ở đâu? Ảnh chụp màn hình?
oldwizard

Không có ảnh chụp màn hình nào về tính năng "Dừng hộp đen" khi tôi từ chối nó. Câu trả lời không giúp được gì, vì thay vào đó, người ta phải bắt đầu googling tính năng "Dừng hộp đen". Câu trả lời đã được cải thiện. Đang xóa phiếu phản đối.
oldwizard

Đây là những gì tôi đang tìm kiếm. Cảm ơn dude cho câu trả lời.
Kishan Patel

4

Tôi đã gặp điều này vài lần, lúc đầu nó hoạt động tốt bởi localhost, đột nhiên, các điểm ngắt không hoạt động, tôi chuyển sang 127.0.0.1, sau đó nó hoạt động trở lại. Hy vọng sẽ giúp.


2

Tôi đã gặp sự cố tương tự trong cả chrome và firefox mặc dù nó có thể không phải là giải pháp cho sự cố của bạn. Tôi đang chia sẻ ở đây với hy vọng nó có thể giúp ích cho những người khác. Tôi đã gặp trường hợp này trước đây trong các dự án không liên quan khác nhưng không hiểu tại sao cho đến khi nó lại xảy ra ngày hôm nay.

Tình huống:

Tôi có một trang sử dụng hai phương thức bootstrap đến từ cùng một nguồn và một tập hợp các tệp javascript (tải lên tệp jquery tuyệt vời của blueimp).

  • BS Modal 1 được hiển thị khi tải trang (thông qua php) và luôn hiển thị trên trang. Nó được sử dụng để thêm một bản ghi liên quan mới. (CakePHP .... hãy nghĩ đến kiểu SalesForcey)

  • BS Modal 2 được sử dụng để chỉnh sửa các bản ghi liên quan hiện có và nội dung html của nó được lấy từ một lệnh gọi ajax và được nối vào DOM thông qua jQuery.

  • Javascript hỗ trợ cả hai phương thức bao gồm thông qua các <script>thẻ html tiêu chuẩn .

Tôi nhận thấy rằng các điểm ngắt chỉ được kích hoạt trên Phương thức 1. Chúng không hoạt động khi mã đang được thực thi trên Phương thức 2 được thêm động, mặc dù rõ ràng là mã thực sự đang được đánh giá và chạy. Các hộp cảnh báo bật lên, mọi thứ kiểu mã được thực thi và xuất ra tuân theo logic được nêu trong mã.

Tôi đã không đi sâu hơn để điều tra thêm vì tôi bị ép về thời gian, nhưng muốn đưa nó ra khỏi đó và trả lại cho cộng đồng.

PS: Tôi sử dụng SO mọi lúc, nhưng đây là bài viết đầu tiên của tôi, vì vậy hãy thoải mái với tôi :-)


2

Đảm bảo rằng bạn đang sử dụng cùng một máy chủ lưu trữ trong URL mà bạn đã sử dụng khi thiết lập ánh xạ. Ví dụ: nếu bạn đang ở http://127.0.0.1/my-appkhi bạn thiết lập và ánh xạ không gian làm việc thì các điểm ngắt sẽ không hoạt động nếu bạn xem trang qua http://localhost/my-app. Ngoài ra, cảm ơn vì đã đọc đến đây. Xem câu trả lời của tôi cho vấn đề Chromium tại đây .


2

đảm bảo rằng bạn đã mở bảng điều khiển javascript (hoặc các nguồn) trong cửa sổ chrome của mình. nếu không nó sẽ không bao giờ đạt đến điểm ngắt. bạn có thể mở bảng điều khiển javascript bằng nút tùy chọn ở góc trên bên phải -> công cụ -> bảng điều khiển javascript.


2

Tôi gặp sự cố khi các điểm ngắt của Chrome không kích hoạt bất kỳ thứ gì. Khi tôi cố gắng sử dụng 'trình gỡ lỗi' trong mã của mình, tôi chỉ có thể xem qua mã trong phiên bản VM của mã của mình. Vấn đề của tôi là tôi đã lập bản đồ các tài nguyên không chính xác. Ánh xạ lại đã khắc phục sự cố của tôi.


2

Giải pháp của tôi là xóa Bộ nhớ cục bộ, Bộ nhớ phiên và Cookie khỏi tab Ứng dụng. Sau đó, Chrome sẽ tạm dừng thực thi tập lệnh trên các điểm ngắt được xác định trong Nguồn.

  1. Nhấp vào tab Ứng dụng của Google Chrome
  2. Nhấp chuột phải vào URL dưới mỗi thư mục> Xóa

Ảnh chụp màn hình: Tab ứng dụng


1
Kéo bảng điều khiển lên và gõ; localStorage.clear () & enter sau đó sessionStorage.clear () & enter.
Paddymac

localStorage.clear(); sessionStorage.clear()
zr0gravity7

2

Tôi có một trình thu nhỏ đang loại bỏ các debuggercâu lệnh ¯_ (ツ) _ / ¯


1

Đảm bảo rằng bạn đang đặt breakpoint vào đúng tệp nguồn. Một số công cụ tạo nhiều bản sao mã và chúng tôi thử trên tệp nguồn khác nhau.

Giải pháp: Thay vì mở tệp bằng phím tắt như Ctrl+Phoặc Ctrl+R, hãy mở tệp đó từ Trình điều hướng tệp. Trong tab Nguồn, có biểu tượng cho nó ở trên cùng bên trái. Sử dụng nó, chúng tôi có thể mở tệp nguồn chính xác.


0

Vì vậy, ngoài câu trả lời của Adam Rackis, nếu bạn có lỗi trong tệp javascript của mình phía trên điểm ngắt, bạn sẽ không tiếp cận được nó bất kể bạn gắn cờ hay đưa vào debugger;.

Đây là một ví dụ:

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")

1
@dckuehn chỉ khi bạn yêu cầu. Đó là một tùy chọn trong các công cụ dành cho nhà phát triển để tạm dừng các lỗi. Đôi khi, điều đó không thực tế. Ví dụ: tôi làm việc trên mã thư viện chạy trên các trang web của bên thứ ba. Nếu tôi bật tính năng đó khi đang làm việc trên thư viện, nó sẽ tạm dừng thực thi mỗi khi trang web có lỗi cho dù nó có liên quan đến thư viện của tôi hay không. Nếu bạn nắm quyền kiểm soát và đó là trang web của bạn, đó là một lựa chọn tuyệt vời. Đối với một số kiểu phát triển, nó có thể cản trở.
JT.

0

như tôi đã trải nghiệm với chrome, chúng tôi cần mở bảng điều khiển trình duyệt để làm cho trình gỡ lỗi chạy khi tải trang.

đặt cái này ở đâu đó trong tệp javascript mà bạn muốn chạy

debugger

mở bảng điều khiển trình duyệt và tải lại trang.

trình gỡ lỗi sẽ chạy như hình ảnh ví dụ bên dưới

nhập mô tả hình ảnh ở đây


Bạn đã thêm thông tin mới nào trong câu trả lời của mình mà không có trong một trong những câu trả lời đã được đăng?
takendarkk

0

Tôi không chắc nó hoạt động như thế nào, nhưng nhấn F1 để cài đặt và ở dưới cùng bên phải, nhấn "Khôi phục mặc định và tải lại" đã làm việc cho tôi.


0

Câu trả lời khá muộn nhưng không có cách nào ở trên giúp ích cho trường hợp của tôi và là một cái gì đó khác biệt

trong khi giới thiệu tệp javascript type = "text / javascript" bị thiếu trong ứng dụng cũ mà tôi đang làm việc

<script  src="ab.js" ></script>

dưới một hoạt động và các điểm ngắt đã đạt như mong đợi

 <script  src="ab.js" type="text/javascript"></script>

0

Tôi cần những điểm dừng chết tiệt của tôi! Hành vi rất lạ - đốm đỏ bình thường trong Nguồn chuyển sang màu xám; những debugger;điểm này và các điểm ngắt sẽ vẫn hiển thị nhưng hiển thị ở đâu đó trong một số HTML không thực thi được.

Sau một vài giờ hack mã, các điểm ngắt cuối cùng đã được đánh chính xác, tuy nhiên, ít nhiều chỉ còn lại tương đương với "Hello World". Hahaha.

Vì vậy, tôi đã có một số dữ liệu bên máy chủ được xuất ra trong trang (trong trường hợp của tôi là câu lệnh @razor), nhưng nó sẽ giống nhau trong bất kỳ trường hợp tương tự nào.

Có một số ký tự 0A / 0D được định dạng không chính xác trong đầu ra của máy chủ - dòng chữ cũ trả về - khiến Chrome nhầm lẫn với việc đánh số dòng của chính nó.

Làm sạch máy chủ đã chèn HTML và tôi đã nhận được điểm dừng của mình.

Bây giờ hãy xem tôi có thể CTRL-Z quay lại bao nhiêu đoạn mã này ...


0

Tôi sẽ thêm một câu trả lời ngẫu nhiên khác chỉ vì câu hỏi này được đưa ra để đáp lại một số tìm kiếm của tôi. Tôi có các đối tượng jQuery có các phương thức công khai và riêng tư. Mô hình là:

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

Nếu tôi đặt một điểm ngắt trên một dòng bên trong một hàm riêng tư, Chrome sẽ không gỡ lỗi nó, dòng này sẽ di chuyển xuống câu lệnh return! Vì vậy, để gỡ lỗi, tôi phải hiển thị các chức năng riêng tư! Điều này là mới đối với tôi sáng nay (8/20/2020, Phiên bản 84.0.4147.125 (Bản dựng chính thức) (64-bit)), tôi không thể tin rằng mình đã không gặp phải điều này trong 3 năm.


0

Đây có thể là lỗi của Chrome. Rất tiếc, Chrome thường xuyên không gỡ lỗi. Nó thường bị rò rỉ bộ nhớ và nó thường bị hỏng hoặc thay đổi sau một vài lần phát hành.

Gỡ lỗi với các nguồn được định dạng hiện cực kỳ không đáng tin cậy.

Có thể bạn cũng đang cố gắng phá mã chết.

Để chắc chắn nó không phải là trình duyệt, bạn cũng nên thử gỡ lỗi nó trong firefox.


-1

Tôi đã gặp vấn đề tương tự trong tệp dòng 10K. Các điểm ngắt đã bị bỏ qua,
các câu lệnh _debugger được mã hóa cứng hoạt động, nhưng chúng không thể được chuyển đổi và có thể gây khó chịu khi được đặt trong một vòng lặp. Giải pháp của tôi, hơi khó một chút nhưng nó hoạt động là thêm phần sau vào đầu tệp:

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

sau đó tôi thêm một myDebugger (); nội dòng nơi tôi thường sử dụng một điểm ngắt.

để bật gỡ lỗi, tôi chỉ cần nhập myDebuggerFlag = true; trên dòng bàn điều khiển. (Tất nhiên, bạn phải bước ra khỏi myDebugger trước.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.