Mã javascript có thực thi từng dòng không?
|
Biết các công cụ của bạn có thể tạo ra sự khác biệt đáng kể khi hoàn thành công việc. Mặc dù JavaScript nổi tiếng là khó gỡ lỗi, nhưng nếu bạn biết một số thủ thuật, các lỗi và lỗi sẽ mất ít thời gian hơn để giải quyết Show
Chúng tôi đã tổng hợp danh sách 16 mẹo gỡ lỗi mà bạn có thể không biết, nhưng có thể muốn ghi nhớ cho lần tới khi bạn thấy mình cần gỡ lỗi mã JavaScript của mình Nếu bạn cần tìm lỗi JavaScript của mình nhanh hơn, hãy thử Báo cáo sự cố Raygun, tính năng này sẽ cảnh báo bạn về các lỗi và cung cấp dấu vết ngăn xếp Hầu hết các mẹo này đều dành cho Chrome và Firefox, mặc dù nhiều mẹo cũng sẽ hoạt động với các trình kiểm tra khác 1. trình sửa lỗiSau bảng điều khiển. log, trình gỡ lỗi là công cụ gỡ lỗi nhanh và bẩn yêu thích của tôi. Nếu bạn đặt một trình gỡ lỗi; . Bạn thậm chí có thể gói nó trong điều kiện để nó chỉ chạy khi bạn cần if (thisThing) {
debugger;}
2. Hiển thị các đối tượng dưới dạng bảngĐôi khi, bạn có một tập hợp các đối tượng phức tạp mà bạn muốn xem. Bạn có thể điều khiển. đăng nhập chúng và cuộn qua danh sách hoặc thoát khỏi bảng điều khiển. người giúp việc bàn. Nó làm cho nó dễ dàng hơn để xem những gì bạn đang giải quyết var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);
đầu ra sẽ 3. Hãy thử tất cả các kích cỡMặc dù có mọi thiết bị di động trên bàn của bạn sẽ rất tuyệt, nhưng điều đó không khả thi trong thế giới thực. Thay vào đó, thay đổi kích thước khung nhìn của bạn thì sao? . Nhảy vào trình kiểm tra của bạn và nhấp vào nút chuyển đổi chế độ thiết bị. Xem các truy vấn phương tiện của bạn trở nên sống động 4. Cách tìm các phần tử DOM của bạn một cách nhanh chóngĐánh dấu một phần tử DOM trong bảng thành phần và sử dụng nó trong bảng điều khiển của bạn. Trình kiểm tra Chrome giữ năm phần tử cuối cùng trong lịch sử của nó để phần tử được đánh dấu cuối cùng hiển thị bằng $0, phần tử thứ hai đến phần tử được đánh dấu cuối cùng $1, v.v. Nếu bạn đánh dấu các mục sau theo thứ tự 'item-4′, 'item-3', 'item-2', 'item-1', 'item-0' thì bạn có thể truy cập các nút DOM như thế này trong bảng điều khiển 5. Vòng lặp điểm chuẩn bằng bàn điều khiển. thời gian () và bảng điều khiển. Hêt giơ()Có thể cực kỳ hữu ích khi biết chính xác một thứ gì đó đã mất bao lâu để thực thi, đặc biệt là khi gỡ lỗi các vòng lặp chậm. Bạn thậm chí có thể thiết lập nhiều bộ hẹn giờ bằng cách gán nhãn cho phương thức. Hãy xem nó hoạt động như thế nào console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');
đầu ra sẽ 6. Nhận dấu vết ngăn xếp cho một chức năngBạn có thể biết các khung JavaScript tạo ra rất nhiều mã – một cách nhanh chóng Bạn sẽ có rất nhiều lượt xem và kích hoạt rất nhiều sự kiện, vì vậy cuối cùng bạn sẽ gặp một tình huống mà bạn muốn biết điều gì đã gây ra một lệnh gọi hàm cụ thể. Vì JavaScript không phải là một ngôn ngữ có cấu trúc chặt chẽ nên đôi khi khó có thể có được cái nhìn tổng quan về những gì đã xảy ra và khi nào. Đây là khi giao diện điều khiển. theo dõi (hoặc chỉ theo dõi trong bảng điều khiển) rất hữu ích để có thể gỡ lỗi JavaScript. Hãy tưởng tượng bạn muốn xem toàn bộ dấu vết ngăn xếp cho lệnh gọi hàm funcZ trong phiên bản ô tô trên Dòng 33 var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
Dòng 33 sẽ xuất ra Bây giờ chúng ta có thể thấy func1 được gọi là func2, func4 được gọi là. Func4 sau đó tạo một thể hiện của Ô tô và sau đó gọi hàm ô tô. funcX, v.v. Mặc dù bạn nghĩ rằng bạn biết rõ kịch bản của mình nhưng điều này vẫn có thể khá hữu ích. Giả sử bạn muốn cải thiện mã của mình. Nhận dấu vết và danh sách tuyệt vời của bạn về tất cả các chức năng liên quan. Mỗi cái đều có thể nhấp được và bây giờ bạn có thể qua lại giữa chúng. Nó giống như một menu dành riêng cho bạn 7. Rút gọn mã như một cách dễ dàng để gỡ lỗi JavaScriptĐôi khi, bạn có thể gặp sự cố trong quá trình sản xuất và bản đồ nguồn của bạn không hoàn toàn xuất hiện trên máy chủ. đừng sợ. Chrome có thể hủy thu nhỏ các tệp Javascript của bạn thành định dạng dễ đọc hơn đối với con người. Mã sẽ không hữu ích bằng mã thực của bạn – nhưng ít nhất bạn có thể thấy điều gì đang xảy ra. Nhấp vào nút {} Bản in đẹp bên dưới trình xem nguồn trong trình kiểm tra 8. Tìm nhanh một chức năng để gỡ lỗiGiả sử bạn muốn đặt điểm ngắt trong một hàm. Hai cách phổ biến nhất để làm điều đó là 1. Tìm dòng trong trình kiểm tra của bạn và thêm điểm ngắt Trong cả hai giải pháp này, bạn phải điều hướng thủ công xung quanh các tệp của mình để tách dòng cụ thể mà bạn muốn gỡ lỗi. Điều có lẽ ít phổ biến hơn là sử dụng bảng điều khiển. Sử dụng gỡ lỗi (funcName) trong bảng điều khiển và tập lệnh sẽ dừng khi đến chức năng bạn đã chuyển vào Nó nhanh, nhưng nhược điểm là nó không hoạt động trên các chức năng riêng tư hoặc ẩn danh. Mặt khác, đây có lẽ là cách nhanh nhất để tìm một chức năng để gỡ lỗi. (Ghi chú. có một chức năng gọi là bàn điều khiển. gỡ lỗi không giống nhau, mặc dù cách đặt tên tương tự. ) var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
Loại gỡ lỗi (ô tô. funcY) trong bảng điều khiển và tập lệnh sẽ dừng ở chế độ gỡ lỗi khi nhận được lệnh gọi hàm car. vui vẻ 9. Tập lệnh hộp đen KHÔNG liên quanNgày nay chúng ta thường có một vài thư viện và framework trên các ứng dụng web của mình. Hầu hết chúng đều được kiểm tra tốt và tương đối không có lỗi. Tuy nhiên, trình gỡ lỗi vẫn bước vào tất cả các tệp không liên quan đến tác vụ gỡ lỗi này. Giải pháp là hộp đen tập lệnh mà bạn không cần gỡ lỗi. Điều này cũng có thể bao gồm các tập lệnh của riêng bạn. Đọc thêm về gỡ lỗi hộp đen trong bài viết này 10. Tìm những điều quan trọng trong gỡ lỗi phức tạpTrong gỡ lỗi phức tạp hơn, đôi khi chúng tôi muốn xuất nhiều dòng. Một điều bạn có thể làm để duy trì cấu trúc đầu ra tốt hơn là sử dụng nhiều chức năng bảng điều khiển hơn, chẳng hạn như bảng điều khiển. nhật ký, bảng điều khiển. gỡ lỗi, giao diện điều khiển. cảnh báo, điều khiển. thông tin, bảng điều khiển. lỗi và như vậy. Sau đó, bạn có thể lọc chúng trong trình kiểm tra của mình. Đôi khi đây không thực sự là điều bạn muốn khi cần gỡ lỗi JavaScript. Bạn có thể sáng tạo và tạo kiểu cho tin nhắn của mình, nếu bạn chọn. Sử dụng CSS và tạo thông báo bảng điều khiển có cấu trúc của riêng bạn khi bạn muốn gỡ lỗi JavaScript console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);
đầu ra sẽ. trong bảng điều khiển. log() bạn có thể đặt %s cho chuỗi, %i cho số nguyên và %c cho kiểu tùy chỉnh. Bạn có thể tìm thấy những cách tốt hơn để sử dụng những phong cách này. Nếu bạn sử dụng một khung trang duy nhất, bạn có thể muốn có một kiểu để xem thông báo và một kiểu khác cho mô hình, bộ sưu tập, bộ điều khiển, v.v. 11. Xem các cuộc gọi và đối số chức năng cụ thểTrong bảng điều khiển Chrome, bạn có thể theo dõi các chức năng cụ thể. Mỗi khi hàm được gọi, nó sẽ được ghi lại với các giá trị mà nó được truyền vào var func1 = function(x, y, z) {
//....
};
đầu ra sẽ Đây là một cách tuyệt vời để xem những đối số nào được truyền vào một hàm. Lý tưởng nhất là bảng điều khiển có thể cho biết có bao nhiêu đối số mong đợi, nhưng nó không thể. Trong ví dụ trên, func1 dự kiến có ba đối số, nhưng chỉ có hai đối số được truyền vào. Nếu điều đó không được xử lý trong mã, nó có thể dẫn đến một lỗi có thể xảy ra 12. Truy cập nhanh các phần tử trong bảng điều khiểnCách nhanh hơn để thực hiện querySelector trong bảng điều khiển là sử dụng ký hiệu đô la. $(‘css-selector’) sẽ trả về kết quả khớp đầu tiên của bộ chọn CSS. $$(‘css-selector’) sẽ trả về tất cả chúng. Nếu bạn đang sử dụng một phần tử nhiều lần, bạn nên lưu phần tử đó dưới dạng biến 13. Người đưa thư rất tuyệt (nhưng Firefox nhanh hơn)Nhiều nhà phát triển đang sử dụng Postman để xử lý các yêu cầu Ajax. Postman rất xuất sắc, nhưng có thể hơi khó chịu khi mở một cửa sổ trình duyệt mới, viết các đối tượng yêu cầu mới và sau đó kiểm tra chúng Đôi khi việc sử dụng trình duyệt của bạn sẽ dễ dàng hơn. Khi bạn làm như vậy, bạn không còn phải lo lắng về cookie xác thực nếu bạn đang gửi đến một trang bảo mật bằng mật khẩu Đây là cách bạn chỉnh sửa và gửi lại yêu cầu trong Firefox. Mở Trình kiểm tra và chuyển đến tab Mạng. Nhấp chuột phải vào yêu cầu mong muốn và chọn Chỉnh sửa và Gửi lại Bây giờ bạn có thể thay đổi bất cứ điều gì bạn muốn. Thay đổi tiêu đề và chỉnh sửa thông số của bạn và nhấn gửi lại Dưới đây tôi trình bày một yêu cầu hai lần với các thuộc tính khác nhau 14. Phá vỡ thay đổi nútDOM có thể là một điều buồn cười. Đôi khi mọi thứ thay đổi và bạn không biết tại sao. Tuy nhiên, khi bạn cần gỡ lỗi JavaScript, Chrome cho phép bạn tạm dừng khi một phần tử DOM thay đổi. Bạn thậm chí có thể theo dõi các thuộc tính của nó. Trong Trình kiểm tra Chrome, nhấp chuột phải vào phần tử và chọn ngắt cài đặt để sử dụng 15. Sử dụng dịch vụ tốc độ trangCó rất nhiều dịch vụ và công cụ có thể được sử dụng để kiểm tra trang JavaScript của bạn và giúp bạn tìm ra sự cố hoặc chậm. Một trong những công cụ đó là Giám sát người dùng thực Raygun. Điều này có thể hữu ích vì những lý do khác ngoài việc xác định các vấn đề về JavaScript — tải chậm các tập lệnh bên ngoài, CSS không cần thiết, hình ảnh quá khổ. Nó có thể giúp bạn nhận biết các sự cố JavaScript đang vô tình gây ra thời gian tải lâu hoặc không thực thi đúng cách Bạn cũng sẽ có thể đo lường các cải tiến về hiệu suất JavaScript và theo dõi chúng theo thời gian 16. Điểm ngắt ở khắp mọi nơiCuối cùng, điểm dừng đã thử và đúng có thể thành công. Hãy thử sử dụng các điểm dừng theo những cách khác nhau cho các tình huống khác nhau Bạn có thể nhấp vào một phần tử và đặt điểm ngắt, để dừng thực thi khi một phần tử nhất định được sửa đổi. Bạn cũng có thể chuyển đến tab Trình gỡ lỗi hoặc tab Nguồn (tùy thuộc vào trình duyệt của bạn) trong các công cụ dành cho nhà phát triển của mình và đặt các điểm dừng XHR cho bất kỳ nguồn cụ thể nào để dừng các yêu cầu Ajax. Ở cùng một vị trí, bạn cũng có thể yêu cầu nó tạm dừng thực thi mã khi xảy ra ngoại lệ. Bạn có thể sử dụng các loại điểm dừng khác nhau này trong các công cụ trình duyệt của mình để tối đa hóa cơ hội tìm ra lỗi trong khi không phải đầu tư thời gian vào các bộ công cụ bên ngoài Phần kết luậnTóm lại, có nhiều cách để gỡ lỗi mã JavaScript của bạn. Chúng tôi đã liệt kê mười sáu trong số họ ở đây. Ngoài ra còn có một bài viết hữu ích liệt kê các công cụ sửa lỗi JavaScript, nếu bạn muốn bắt đầu xem xét việc tăng cường các công cụ trình duyệt của mình với sự trợ giúp từ bên ngoài. Dù bằng cách nào, bạn sẽ có thể sử dụng các mẹo này để bắt đầu gỡ lỗi mã JavaScript của mình và chuẩn bị mã không có lỗi để triển khai và vận chuyển Mã JavaScript có chạy tuần tự không?Điểm mấu chốt là mọi thứ xảy ra bên trong ngăn xếp thực thi chức năng là tuần tự . Đây là phần Đồng bộ của JavaScript. Chuỗi chính của JavaScript đảm bảo rằng nó xử lý mọi thứ trong ngăn xếp trước khi bắt đầu xem xét bất kỳ thứ gì ở nơi khác.
Mã JavaScript thực thi như thế nào?Bối cảnh thực thi chứa mã hiện đang chạy và mọi thứ hỗ trợ thực thi mã đó. Trong thời gian chạy Ngữ cảnh thực thi, mã cụ thể được trình phân tích cú pháp phân tích cú pháp, các biến và hàm được lưu trữ trong bộ nhớ, mã byte thực thi được tạo và mã được thực thi
HTML có được thực thi từng dòng không?Trình duyệt tải html (DOM) lúc đầu. Trình duyệt bắt đầu tải các tài nguyên bên ngoài từ trên xuống dưới, từng dòng một . Nếu gặp
Mã JavaScript thực thi ở đâu?JavaScript được chạy trong Máy khách (i. e. Trình duyệt). Vì vậy, JavaScript chạy sau khi phản hồi từ máy chủ đã đến |
