Làm cách nào để gỡ lỗi mã JavaScript của tôi? [đóng cửa]
Câu trả lời:
Firebug là một trong những công cụ phổ biến nhất cho mục đích này.
Tất cả các trình duyệt hiện đại đều có một số dạng ứng dụng gỡ lỗi JavaScript tích hợp sẵn. Chi tiết về những điều này sẽ được đề cập trên các trang web công nghệ liên quan. Sở thích cá nhân của tôi để gỡ lỗi JavaScript là Firebug trong Firefox. Tôi không nói Firebug tốt hơn bất kỳ loại nào khác; nó phụ thuộc vào sở thích cá nhân của bạn và bạn có thể nên kiểm tra trang web của mình trong tất cả các trình duyệt (lựa chọn đầu tiên của cá nhân tôi luôn là Firebug).
Tôi sẽ trình bày một số giải pháp cấp cao bên dưới, sử dụng Firebug làm ví dụ :
Firefox
Firefox đi kèm với công cụ gỡ lỗi JavaScript có sẵn của riêng nó, nhưng tôi khuyên bạn nên cài đặt tiện ích Firebug . Điều này cung cấp một số tính năng bổ sung dựa trên phiên bản cơ bản rất tiện dụng. Tôi sẽ chỉ nói về Firebug ở đây.
Sau khi cài đặt xong Firebug, bạn có thể truy cập nó như sau:
Đầu tiên, nếu bạn nhấp chuột phải vào bất kỳ phần tử nào, bạn có thể Kiểm tra phần tử bằng Firebug :
Nhấp vào đây sẽ mở ra ngăn Firebug ở cuối trình duyệt:
Firebug cung cấp một số tính năng nhưng cái mà chúng tôi quan tâm là tab tập lệnh. Nhấp vào tab script sẽ mở ra cửa sổ này:
Rõ ràng, để gỡ lỗi, bạn cần nhấp vào tải lại :
Bây giờ bạn có thể thêm các điểm ngắt bằng cách nhấp vào dòng bên trái của đoạn mã JavaScript mà bạn muốn thêm điểm ngắt vào:
Khi điểm ngắt của bạn bị chạm, nó sẽ giống như bên dưới:
Bạn cũng có thể thêm các biến đồng hồ và thường làm mọi thứ mà bạn mong đợi trong một công cụ gỡ lỗi hiện đại.
Để biết thêm thông tin về các tùy chọn khác nhau được cung cấp trong Firebug, hãy xem Câu hỏi thường gặp về Firebug .
Trình duyệt Chrome
Chrome cũng có riêng của mình trong xây dựng Javascript gỡ lỗi tùy chọn, mà làm việc theo một cách rất giống nhau, kích chuột phải, kiểm tra nguyên tố vv . Hãy xem Công cụ dành cho nhà phát triển Chrome . Tôi thường thấy dấu vết ngăn xếp trong Chrome tốt hơn Firebug.
trình duyệt web IE
Nếu bạn đang phát triển trong .NET và sử dụng Visual Studio bằng môi trường phát triển web, bạn có thể gỡ lỗi mã JavaScript trực tiếp bằng cách đặt các điểm ngắt, v.v. Mã JavaScript của bạn trông giống hệt như khi bạn gỡ lỗi mã C # hoặc VB.NET .
Nếu bạn không có điều này, Internet Explorer cũng cung cấp tất cả các công cụ được hiển thị ở trên. Thật khó chịu, thay vì nhấp chuột phải để kiểm tra các tính năng phần tử của Chrome hoặc Firefox, bạn truy cập các công cụ dành cho nhà phát triển bằng cách nhấn F12 . Câu hỏi này bao gồm hầu hết các điểm.
- Internet Explorer 8 (Công cụ dành cho nhà phát triển - F12). Bất cứ điều gì khác là tỷ lệ thứ hai trong vùng đất Internet Explorer
- Firefox và Firebug . Nhấn F12để hiển thị.
- Safari (Hiển thị Thanh menu, Tùy chọn -> Nâng cao -> Hiển thị thanh menu Phát triển )
- Bảng điều khiển JavaScript của Google Chrome ( F12hoặc ( Ctrl+ Shift+ J)). Chủ yếu là cùng một trình duyệt với Safari, nhưng Safari tốt hơn IMHO.
- Opera ( Công cụ -> Nâng cao -> Công cụ dành cho nhà phát triển )
Có một từ khóa trình gỡ lỗi trong JavaScript để gỡ lỗi mã JavaScript. Đặt trình gỡ lỗi; đoạn mã trong mã JavaScript của bạn. Nó sẽ tự động bắt đầu gỡ lỗi mã JavaScript tại thời điểm đó.
Ví dụ:
Giả sử đây là tệp test.js của bạn
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- Khi trình duyệt chạy trang web trong tùy chọn dành cho nhà phát triển với trình gỡ lỗi được bật, sau đó nó sẽ tự động bắt đầu gỡ lỗi từ trình gỡ lỗi; điểm.
- Cần mở cửa sổ trình duyệt dành cho nhà phát triển.
Tôi sử dụng printfcách tiếp cận tốt cũ (một kỹ thuật cổ xưa sẽ hoạt động tốt trong bất kỳ thời điểm nào).
Nhìn vào phép thuật %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%okết xuất nội dung có thể nhấp và duyệt sâu, được in đẹp của đối tượng JS. %sđã được hiển thị chỉ để ghi lại.
Và điều này:
console.log("%s", new Error().stack);cung cấp cho bạn dấu vết ngăn xếp giống như Java đến điểm new Error()gọi (bao gồm đường dẫn đến tệp và số dòng !!).
Cả hai %ovà new Error().stackcó sẵn trong Chrome và Firefox.
Với những công cụ mạnh mẽ như vậy, bạn đưa ra giả định có gì sai trong JS của mình, hãy đặt đầu ra gỡ lỗi (đừng quên bọc trong ifcâu lệnh để giảm lượng dữ liệu) và xác minh giả định của bạn. Khắc phục sự cố hoặc đưa ra giả định mới hoặc đưa thêm đầu ra gỡ lỗi cho vấn đề bit.
Cũng để sử dụng dấu vết ngăn xếp:
console.trace();như nói Console
Chúc bạn hack vui vẻ!
Bắt đầu với Firebug và IE Debugger.
Hãy cẩn thận với trình gỡ lỗi trong JavaScript. Thỉnh thoảng chúng sẽ ảnh hưởng đến môi trường đủ để gây ra một số lỗi mà bạn đang cố gắng gỡ lỗi.
Ví dụ:
Đối với Internet Explorer, nó thường chậm dần và là một loại đối phó với loại rò rỉ bộ nhớ. Sau nửa giờ hoặc lâu hơn, tôi cần khởi động lại. Nó dường như là khá đều đặn.
Đối với Firebug, có lẽ đã hơn một năm nên nó có thể là phiên bản cũ hơn. Do đó, tôi không nhớ chi tiết cụ thể, nhưng về cơ bản thì mã chạy không chính xác và sau khi cố gắng gỡ lỗi một lúc, tôi đã tắt Firebug và mã hoạt động tốt.
Mặc dù alert(msg);hoạt động trong các tình huống "Tôi chỉ muốn tìm hiểu xem chuyện gì đang xảy ra" ... mọi nhà phát triển đều gặp phải trường hợp mà bạn kết thúc với một vòng lặp (rất lớn hoặc vô tận) mà bạn không thể thoát ra.
Tôi khuyên bạn rằng trong quá trình phát triển nếu bạn muốn có tùy chọn gỡ lỗi trực tiếp, hãy sử dụng tùy chọn gỡ lỗi cho phép bạn thoát ra. (PS Opera, Safari? Và Chrome? Tất cả đều có sẵn điều này trong hộp thoại gốc của chúng)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}Với những điều trên, bạn có thể đưa mình vào một vòng lặp lớn của gỡ lỗi cửa sổ bật lên, trong đó nhấn Enter/ Okcho phép bạn chuyển qua từng thông báo, nhưng nhấn Escape/ Cancelcho phép bạn thoát ra một cách độc đáo.
Tôi sử dụng bảng điều khiển / menu dành cho nhà phát triển của WebKit (Safari 4). Nó gần giống với Firebug.
console.log()là màu đen mới - tốt hơn nhiều so với alert().
Visual Studio 2008 có một số công cụ gỡ lỗi JavaScript rất tốt. Bạn có thể thả một điểm ngắt trong mã JavaScript phía máy khách của mình và thực hiện từng bước bằng cách sử dụng các công cụ giống hệt như bạn làm với mã phía máy chủ. Không cần phải đính kèm vào một quy trình hoặc làm bất cứ điều gì phức tạp để kích hoạt nó.
Tôi sử dụng một số công cụ: Fiddler , Firebug và Visual Studio. Tôi nghe nói Internet Explorer 8 có một trình gỡ lỗi tích hợp sẵn tốt.
Tôi đã từng sử dụng Firebug , cho đến khi Internet Explorer 8 ra mắt. Tôi không phải là một fan hâm mộ lớn của Internet Explorer, nhưng sau một thời gian sử dụng các công cụ dành cho nhà phát triển tích hợp sẵn, bao gồm một trình gỡ lỗi thực sự tốt đẹp, thì việc sử dụng bất kỳ thứ gì khác dường như là vô ích. Tôi phải ngả mũ trước Microsoft, họ đã làm rất tốt công cụ này.
Bên cạnh việc sử dụng trình gỡ lỗi JavaScript của Visual Studio, tôi đã viết bảng điều khiển đơn giản của riêng mình mà tôi đưa vào một trang. Nó đơn giản giống như cửa sổ ngay lập tức của Visual Studio. Tôi có thể thay đổi giá trị của biến, gọi hàm và xem giá trị của biến. Nó chỉ đơn giản là đánh giá mã được viết trong trường văn bản.
Ngoài Firebug và các tiện ích mở rộng dành cho nhà phát triển gốc của trình duyệt, JetBrains WebStorm IDE đi kèm với hỗ trợ gỡ lỗi từ xa cho Firefox và Chrome (Cần có tiện ích mở rộng) được tích hợp sẵn.
Cũng hỗ trợ:
Các tùy chọn để kiểm tra điều này miễn phí là 30 bản dùng thử hoặc sử dụng Phiên bản Truy cập Sớm .
Nếu bạn đang sử dụng Visual Studio , chỉ cần đặt debugger;mã bạn muốn gỡ lỗi lên trên. Trong quá trình thực thi, điều khiển sẽ tạm dừng tại nơi đó và bạn có thể gỡ lỗi từng bước từ đó trở đi.
Như với hầu hết các câu trả lời, nó thực sự phụ thuộc: Bạn đang cố gắng đạt được điều gì với việc gỡ lỗi của mình? Phát triển cơ bản, sửa chữa các vấn đề về hiệu suất? Đối với sự phát triển cơ bản, tất cả các câu trả lời trước đây là quá đủ.
Để kiểm tra hiệu suất cụ thể, tôi khuyên bạn nên dùng Firebug. Có thể xác định được phương pháp nào là tốn kém nhất về mặt thời gian là vô giá đối với một số dự án tôi đã thực hiện. Khi các thư viện phía máy khách ngày càng trở nên mạnh mẽ hơn và trách nhiệm nhiều hơn được đặt cho phía máy khách nói chung, loại gỡ lỗi và lập hồ sơ này sẽ chỉ trở nên hữu ích hơn.
API bảng điều khiển Firebug: http://getfirebug.com/console.html
Bằng cách nhấnF12 các nhà phát triển web có thể nhanh chóng gỡ lỗi mã JavaScript mà không cần rời khỏi trình duyệt. Nó được tích hợp trong mọi cài đặt của Windows.
Trong Internet Explorer 11 , các công cụ F12 cung cấp các công cụ gỡ lỗi như điểm ngắt, xem và xem biến cục bộ cũng như bảng điều khiển cho các thông báo và thực thi mã ngay lập tức.