Debugging JavaScript

Question

Tôi đến từ Java Bối cảnh và quá quen với Debugging sử dụng Eclipse nhưng thời gian gần đây đã bắt đầu trên JavaScript (jQuery nói riêng) và đang gặp thời gian thực sự khó khăn gỡ lỗi mã JavaScript nên câu hỏi của tôi là

là gì cách tốt nhất để gỡ lỗi JavaScript là gì?

Tôi đã cố gắng sử dụng Firebug và nó là tốt, nhưng muốn biết

Nếu chúng tôi có bất kỳ công cụ hữu ích khác hoặc stratergies cho Debugging JavaScript?

Answer 1

Gần đây tôi đã chuyển từ Firebug sang Google Chrome vì nó có một số công cụ gỡ lỗi mạnh mẽ được tích hợp sẵn (Ctrl + Shift + J để mở cửa sổ Công cụ dành cho nhà phát triển), bao gồm cả điểm ngắt.

Tôi cũng đã sử dụng ghi nhật ký/truy tìm để có hiệu quả tuyệt vời. Một số ví dụ:

• Khi mã chạy không có lỗi cú pháp nhưng không làm những gì tôi mong đợi, tôi có thể ghi nhật ký (ví dụ: "here1", "here2", v.v.) vào bảng điều khiển để xem điều gì đang diễn ra (cũng có thể được thực hiện bằng cách bước qua với trình gỡ rối, nhưng điều đó có thể khó hơn nếu logic của bạn đang ở trong một vòng lặp điên rồ hoặc một cái gì đó phải mất một lúc để bước qua).
• Khi tính chất chặn của hộp cảnh báo hoặc điểm ngắt sẽ phá vỡ mã tôi đang gỡ lỗi. Điều này xảy ra rất nhiều khi tôi có nhiều khoảng thời gian hẹn giờ được đặt. Các hộp cảnh báo cũng rất khó sử dụng trong các vòng lặp dài (và các điểm ngắt có thể quá).
• Khi tôi muốn xem giá trị nào một biến nhất định có tại một thời điểm trong mã. Nếu đó là điều một lần, thì điểm ngắt là điều tuyệt vời cho điều này (tốt hơn, thậm chí, bởi vì tôi có thể kiểm tra giá trị của bất kỳ biến nào trong ngữ cảnh đó), nhưng nếu mã đó được thực thi thường xuyên và tôi chỉ quan tâm, thời gian nó được thực hiện sau khi tôi nhấp vào một liên kết nhất định, sau đó đăng nhập là rất hữu ích. Tôi có thể bỏ qua đầu ra mà tôi không muốn (hoặc rõ ràng nếu nó đang trên đường) và chỉ tập trung vào đầu ra mà tôi quan tâm.

Answer 2

Một trong những đồng nghiệp của tôi (những người thực hiện nhiều phát triển JS trên nhiều trình duyệt) cho rằng trình gỡ rối trong IE8 rất tốt. Ngoài ra, Firebug mới nhất cho Firefox 3.6 là một cải tiến đáng kể so với các phiên bản trước đó.

EDIT Một chủ đề tắt bit, nhưng một điều khiến tôi bực mình với Firebug là sự vắng mặt ảo của tài liệu viết. Tôi xin lỗi, nhưng các bản trình chiếu video không cắt nó, theo như tôi quan tâm.

Answer 3

Chủ quan, bởi vì điều tốt nhất cho một không phải là tốt nhất cho người khác.

Cá nhân, tôi thấy phương pháp dễ nhất/nhanh nhất là sử dụng cảnh báo hoặc viết vào một khu vực đầu ra gỡ lỗi nhỏ (tức là tôi không bận tâm với firebug hoặc một số hệ thống với điểm ngắt, v.v ... do tính chất của JavaScript được tạo ra).

Nhưng tôi có lẽ chỉ tìm thấy cách này tốt bởi vì tôi đã làm nó trong khoảng 10 năm, vì vậy YMMV.

Answer 4

Tôi thực sự thích nội dung và gỡ lỗi JavaScript của Visual Studio. Nó là tốt đẹp để có thể gỡ lỗi bước từ một sự kiện javascript, để một quyền XMLHttpRequest vào trình xử lý .net của tôi.

Một khía cạnh thực sự thú vị khác khi sử dụng VWD là hiển thị lỗi. Bạn có thể di chuột qua bất kỳ đối tượng/var và gọi một visualizer mà sẽ cho phép bạn đi sâu vào đối tượng và kiểm tra các giá trị.

Ngoài ra, các điểm ngắt có điều kiện, cửa sổ xem. Nói cách khác, bạn nhận được một tập con lớn của khả năng gỡ lỗi .net cho JavaScript.

Visual Web Developer Express miễn phí và cung cấp tất cả điều này.

Answer 5

Trình duyệt hiện đại bao gồm các công cụ gỡ lỗi tích hợp. Trong IE, nhấn F12 (Công cụ > Công cụ dành cho nhà phát triển), chuyển đến tab Tập lệnh và nhấn Bắt đầu gỡ lỗi. Nó sẽ phá vỡ một lỗi và bạn có thể thiết lập các điểm ngắt. Tôi đã phát hiện ra rằng Công cụ dành cho nhà phát triển của IE8 cực kỳ hữu ích.

Trong Chrome, đó là Ctrl + Shift + J (Trang > Nhà phát triển > JS Console) và nhấp vào nút dừng tạm dừng ("tạm dừng ngoại lệ"). Bạn cũng có thể thiết lập các điểm ngắt.

Answer 6

Tôi chủ yếu phát triển cho FireFox, vì vậy, tôi có xu hướng sử dụng các công cụ trên nền tảng đó.

Tôi thực sự thích Trình gỡ lỗi JavaScript Venkman, nhưng nó không tương thích với các phiên bản mới hơn của FireFox AFAIK.

Như những người khác đã nói, Firebug về cơ bản là công cụ cho hầu hết mọi người đi đến những ngày này ...

tôi sẽ nói trở nên quen thuộc với ít nhất một công cụ trong mỗi trình duyệt chính, sau đó chọn bất cứ điều gì bạn yêu thích là sử dụng công cụ "chính" của bạn, chỉ sử dụng các công cụ khác để theo dõi các sự cố trong nền tảng tương ứng của chúng.

Answer 7

Tôi hiếm khi sử dụng trình gỡ lỗi và có xu hướng thích ghi nhật ký, mà tôi sử dụng số log4javascript của riêng mình. Nó hoạt động liên tục trong tất cả các trình duyệt chính, bao gồm IE 6 (và thực tế là IE 5 và 5.5), và mặc định hiển thị các thông điệp ghi nhật ký trong cửa sổ bàn điều khiển riêng biệt, cho phép bạn lọc thông điệp tường trình theo mức độ nghiêm trọng, thông điệp nhật ký tìm kiếm (tùy chọn sử dụng biểu thức chính quy) và hơn thế nữa. Nó cũng có thể gửi thông điệp tường trình tới máy chủ bằng cách sử dụng Ajax.

Ví dụ 1: Hello world

var log = log4javascript.getDefaultLogger(); 
log.info("Hello world"); 

màn

19:52:03 INFO - Hello world 

Ví dụ 2: Logging lỗi với một thông điệp

try { 
    throw new Error("Faking something going wrong!"); 
} catch (e) { 
    log.error("An error occurred", e); 
} 

màn

19:52:32 ERROR - An error occurred 
Exception: Faking something going wrong! on line number 80 in file basic.html 

Ví dụ 3: Logging nhiều tin nhắn với cuộc gọi một logging

var a = "Hello"; 
var b = 3; 
log.debug(a, b); 

màn

19:53:05 DEBUG - Hello 3 

Ví dụ 4: Logging một đối tượng

var obj = new Object(); 
obj.name = "Octopus"; 
obj.tentacles = 8; 
log.info(obj); 

hiển thị

19:53:17 INFO - { 
    name: Octopus, 
    tentacles: 8 
}