37

Làm cách nào để tôi có thể xem qua dòng mã javascript của mình bằng cách sử dụng các công cụ dành cho nhà phát triển Google Chromes mà không cần đến thư viện javascript?Dòng gỡ lỗi Javascript theo dòng bằng cách sử dụng Google Chrome

Ví dụ: tôi sử dụng jQuery nhiều trên trang web của mình và tôi chỉ muốn gỡ lỗi jQuery mà tôi đã viết chứ không phải javascript/jquery trong thư viện jquery. Làm thế nào để tôi chỉ bước qua jquery/javascript của riêng tôi và không phải bước qua hàng triệu dòng trong thư viện jquery?

Vì vậy, nếu tôi có như sau:

function getTabFrame() { 
    $.ajax({ 
     url: 'get_tab_frame.aspx?rand=' + Math.random(), 
     type: 'GET', 
     dataType: 'json', 
     error: function(xhr, status, error) { 
      //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText); 
     }, 
     success: function(data) { 
      $.each(data, function(index, item) { 
       // do something here 
      }); 
     } 
    }); 
} 

nếu tôi đặt breakpoint tại $.ajax({, nếu tôi họ bắt đầu gỡ lỗi rằng nó nơi nó dừng lại, nếu tôi sau đó nhấn F11, nó đi thẳng vào thư viện jQuery . Tôi không muốn điều đó xảy ra, tôi muốn nó đi đến dòng tiếp theo là url: 'get_tab_frame.aspx?rand=' + Math.random(),.

Tôi đã thử nhấn F10 thay vào đó, nhưng điều đó sẽ đi thẳng đến phần đóng } của hàm. Và F5 chỉ đi đến điểm ngắt tiếp theo mà không cần phải đi từng dòng một.

+0

Khi nào bạn chủ yếu có vấn đề? Khi bạn nhấn ngoại lệ? –

+0

Về cơ bản, tôi có rất nhiều javascript mà tôi không thể nhìn thấy cấu trúc của nó trong tâm trí của tôi nữa, vì vậy tôi chỉ muốn bước qua mã của riêng tôi để nhắc nhở bản thân nó như thế nào tất cả làm việc để tìm ra nơi để tìm kiếm vấn đề. .. – oshirowanen

+0

Điều này nghe có vẻ rất giống với http://stackoverflow.com/questions/7827882/avoid-stepping-through-javascript-file-in-chrome-developer-tools?rq=1 – rjmunro

Trả lời

62

Giả sử bạn đang chạy trên một máy tính Windows ...

  1. Nhấn F12 chính
  2. Chọn Scripts, hoặc Sources, tab trong công cụ phát triển
  3. Nhấp vào biểu tượng thư mục nhỏ trong cấp cao nhất
  4. Chọn tệp JavaScript
  5. Thêm điểm ngắt bằng cách nhấp vào số dòng trên bên trái (thêm một ít điểm đánh dấu màu xanh)
  6. Execute của bạn

Javascript Sau đó, trong quá trình thực hiện gỡ lỗi bạn có thể làm một số ít các chuyển động bước ...

  • F8 Tiếp tục: Sẽ tiếp tục cho đến khi breakpoint tiếp theo
  • F10 Bước qua: các bước qua chức năng cuộc gọi tiếp theo (sẽ không nhập thư viện )
  • F11 Bước vào: bước vào chức năng cuộc gọi tiếp theo (sẽ nhập thư viện)
  • Shift + F11 Bước ra: Các bước ra khỏi chức năng hiện

Cập nhật

Sau khi đọc bài đăng cập nhật của bạn; để gỡ lỗi mã của bạn, tôi khuyên bạn nên tạm thời sử dụng jQuery Development Source Code. Mặc dù điều này không trực tiếp giải quyết vấn đề của bạn, nó sẽ cho phép bạn gỡ lỗi dễ dàng hơn. Đối với những gì bạn đang cố gắng để đạt được tôi tin rằng bạn sẽ cần phải bước vào thư viện, vì vậy hy vọng mã sản xuất sẽ giúp bạn giải mã những gì đang xảy ra.

+0

Vui lòng xem thông tin bổ sung trong câu hỏi của tôi để đưa ra ví dụ về những gì đang diễn ra. Tôi có cảm giác rằng từng bước một bước thông qua gỡ lỗi kiểu là không thể với các công cụ dành cho nhà phát triển của Google Chrome? – oshirowanen

+0

Tôi đã cập nhật câu trả lời của mình, hy vọng nó sẽ giúp thêm một chút. – Richard

+1

Trừ khi tôi bị nhầm lẫn nhiều, trong các công cụ dành cho nhà phát triển Chrome, tôi tin F5 sẽ làm mới trang; F8 là chìa khóa tiếp tục, phải không? – cori

19

...Làm thế nào tôi có thể bước qua dòng mã javascript của tôi bằng cách sử dụng dòng công cụ phát triển Google Chromes mà không có nó đi vào thư viện javascript ...


Đối với hồ sơ: Tại thời điểm này (tháng/2015) cả Google Chrome và Firefox có chính xác những gì bạn (và tôi) cần phải tránh đi bên trong các thư viện và các kịch bản, và đi xa hơn các mã mà chúng tôi đang quan tâm, Nó được gọi là Đen Boxing:

enter image description here

Khi bạn Blackbox một tập tin nguồn , trình gỡ lỗi sẽ không nhảy i vào đó tệp khi bước qua mã bạn đang gỡ lỗi. Thông tin

thêm:

+0

Vậy đó, điều này rất hữu ích cho việc gỡ lỗi, cảm ơn bạn. – S1awek

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