Cách sửa lỗi JavaScript trong Chrome

Giáo viên lập trình máy tính của tôi luôn nói với tôi rằng 10% thời gian của chúng tôi dành cho việc phát triển 90% ứng dụng của chúng tôi và 90% thời gian còn lại để hoàn thành 10% cuối cùng của dự án. Ngay cả với một kế hoạch dự án tốt và một khái niệm hợp lý, phần lớn thời gian của chúng ta sẽ dành cho việc sửa lỗi. Hơn nữa, với JavaScript, ứng dụng của chúng tôi có thể chạy mà không có lỗi rõ ràng ngăn không cho ứng dụng chạy, vì vậy chúng tôi phải sử dụng một số kỹ thuật để đảm bảo mọi thứ đang chạy trơn tru

Hiểu cả cú pháp và cách thức hoạt động của JavaScript sẽ loại bỏ hầu hết các lỗi JavaScript trong các ứng dụng web của chúng tôi. Hơn nữa, có rất nhiều dịch vụ trực tuyến có thể giúp chúng tôi nắm bắt tất cả

Bắt đầu từ cơ bản đến nâng cao, đây là một số phương pháp để sửa lỗi JavaScript trong ứng dụng của chúng tôi

Mẹo. Tìm lỗi ứng dụng và các vấn đề về hiệu suất ngay lập tức với Stackify Retrace

Khắc phục sự cố và tối ưu hóa mã của bạn thật dễ dàng với các lỗi tích hợp, nhật ký và thông tin chi tiết về hiệu suất cấp mã

Biết các loại lỗi JavaScript khác nhau

Chúng tôi cần biết loại lỗi mà chúng tôi đang nhận được để biết chúng tôi cần làm gì để khắc phục lỗi đó. Cụ thể, với JavaScript, hầu hết các lỗi của chúng tôi đều thuộc hai loại. lỗi cú pháp và lỗi thời gian chạy

Lỗi cú pháp là lỗi ngữ pháp trong mã của chúng tôi. Lỗi cú pháp chủ yếu xuất hiện ở dạng từ khóa sai chính tả, thiếu hoặc mở ngoặc, thiếu dấu ngoặc đơn hoặc dấu chấm câu. Chắc chắn, theo thời gian, các lỗi cú pháp của chúng ta sẽ ít hơn khi chúng ta trở thành chuyên gia về JavaScript, nhưng những lỗi đơn giản vẫn xảy ra rất nhiều

Lỗi thời gian chạy ngăn ứng dụng của chúng tôi thực sự chạy. Đôi khi có vấn đề với luồng logic của chúng tôi và chương trình của chúng tôi bị hỏng, chẳng hạn như gọi các chuỗi không có ở đó. Những lần khác, chương trình của chúng tôi có thể chạy nhưng kết quả không như chúng tôi dự định. Do đó, lỗi thời gian chạy có thể khó sửa hơn một chút so với lỗi cú pháp

Vì chúng tôi biết hai loại lỗi JavaScript chính, nên chúng tôi có thể nhanh chóng chuyển sang sửa chúng

Khi nghi ngờ, hãy tải lại

Đôi khi điều đơn giản nhất chúng ta có thể làm là tải lại trang web. Đó là giải pháp đám đông CNTT cổ điển cho mọi thứ—bật và tắt lại. Có thể chúng tôi đã khắc phục lỗi này và tệp chưa được tải lên hoặc một số dữ liệu bị thiếu. Nó cũng có thể giúp xóa lịch sử trình duyệt và bộ nhớ cache của bạn trong trường hợp trình duyệt của bạn đang lưu phiên bản xấu của trang web hoặc ứng dụng của bạn

Google Chrome đôi khi hiển thị thông báo “Đã xảy ra sự cố. ” lỗi khi gặp khó khăn khi chạy trang web của chúng tôi. Điều này có thể do lỗi JavaScript gây ra hoặc không—cả hai trường hợp, đừng hoảng sợ và chỉ cần tải lại trang

Sau đó, chúng ta có thể chuyển sang kiểm tra lỗi JavaScript chi tiết hơn

Kiểm tra xem JavaScript đã được bật chưa

Chúng ta phải nhớ rằng JavaScript được đặt khác nhau cho từng trình duyệt. Hơn nữa, JavaScript phản ứng khác nhau tùy thuộc vào từng trình duyệt và cách cài đặt của mỗi người dùng được đặt cho trình duyệt của họ. Ví dụ: JavaScript có một số lỗ hổng bảo mật và tin tặc có thể đưa mã độc vào một số JavaScript; . Vì vậy, chúng tôi phải kiểm tra cài đặt trình duyệt của bạn để xem JavaScript đã được bật chưa

Cross-site scripting (XSS) là một lỗ hổng trong JavaScript cho phép tin tặc đưa mã độc vào các trang web hợp pháp. Ví dụ: Twitter đã bị nhiễm phần mềm độc hại có tên là sâu “StalkDaily”. Điều đó không có vẻ tốt, phải không?

Nếu không chắc chắn, bạn có thể kiểm tra nhanh tại đây để xem JavaScript của trình duyệt đã được bật hay chưa

Tương tự, chúng tôi có thể kiểm tra xem chúng tôi có bật trình chặn cửa sổ bật lên đang ngăn các phần JavaScript của chúng tôi hoạt động hay không, chẳng hạn như việc chúng tôi sử dụng hộp cảnh báo. Chúng tôi có thể bật hoặc tắt hộp bật lên từ cài đặt trình duyệt hoặc tiện ích bổ sung mà chúng tôi đang sử dụng

Bây giờ chúng tôi đã đề cập đến những điều cơ bản, hãy chuyển sang một số điều nâng cao hơn

Sử dụng Công cụ dành cho nhà phát triển trong trình duyệt

Cho đến nay, các công cụ hữu ích nhất mà chúng tôi sử dụng để sửa lỗi JavaScript là các công cụ dành cho nhà phát triển trong trình duyệt. Trước đây, khi tôi còn là một nhà phát triển trẻ, tôi sẽ sử dụng Firefox riêng để duyệt các dự án web mà tôi đang phát triển. Bây giờ tôi sử dụng bất kỳ trình duyệt nào phù hợp với nhu cầu của mình vào lúc này—Firefox, Chrome, Safari, Microsoft Edge, Opera hoặc Brave

Năm 2019, Firefox và Chrome là hai trình duyệt phổ biến nhất với các nhà phát triển

Để bắt đầu, chỉ cần mở trình duyệt yêu thích của bạn bằng công cụ dành cho nhà phát triển, sau đó tìm công cụ dành cho nhà phát triển trong menu trình duyệt. Bắt đầu xem xét các yếu tố khác nhau hoặc công cụ bảng điều khiển để tìm một số lỗi cần khắc phục

Một số công cụ dành cho nhà phát triển cũng cho phép chúng tôi kiểm tra xem thiết kế web của chúng tôi có phản hồi với thiết bị di động hay không

Các công cụ dành cho nhà phát triển rất hữu ích để kiểm tra lỗi JavaScript cũng như

• HTML và CSS hiện được tải
• Trình khám phá DOM
• Cách trình bày
• Ảnh động
• sử dụng bộ nhớ
• Nhật ký bảng điều khiển
• trình gỡ lỗi
• danh sách tập tin
• Mã nguồn

Và nhiều hơn nữa, tùy thuộc vào công cụ dành cho nhà phát triển trong trình duyệt

Kiểm tra khả năng tương thích giữa các trình duyệt

Như tôi đã nói trước đây, mỗi trình duyệt phản ứng với JavaScript khác nhau. Điều này có nghĩa là ứng dụng của chúng tôi có thể không tương thích với tất cả các trình duyệt và chúng tôi sẽ có lỗi cần khắc phục. Thật không may, không hợp lý khi nhắc hộp bật lên để khuyến khích người dùng tải xuống. Do đó, chúng tôi phải kiểm tra kỹ lưỡng và kiểm tra kỹ lưỡng để đảm bảo rằng các trang web của chúng tôi tương thích với tất cả các trình duyệt internet

Các vấn đề tương thích giữa nhiều trình duyệt JavaScript thường xoay quanh các tính năng JavaScript cốt lõi hiện đại và một số thư viện từ bên thứ ba hoặc có nguồn gốc từ JavaScript

Vì vậy, hãy tải xuống từng trình duyệt chính và kiểm tra riêng lẻ tính tương thích của trình duyệt hoặc thử một loạt phần mềm khác nhau có thể kiểm tra khả năng tương thích giữa các trình duyệt

Browsera là một công cụ không chỉ kiểm tra khả năng tương thích giữa các trình duyệt mà còn phát hiện cả lỗi JavaScript

Sử dụng bảng điều khiển. log() để hiển thị kết quả dự kiến

Bảng điều khiển. log() là một chức năng cho phép chúng tôi hiển thị thông báo trong bảng điều khiển trình duyệt của mình. Hơn nữa, chúng tôi cũng in các chuỗi và các biến khác để chúng tôi có thể thấy giá trị của chúng. Điều này thực sự hữu ích để chúng tôi kiểm tra xem các chức năng của chúng tôi có hiển thị kết quả mong muốn hay không

Các loại lỗi này có thể không ngăn ứng dụng của chúng tôi chạy, nhưng đồng thời, chúng là các lỗi chức năng để chúng tôi khắc phục

Ví dụ: chúng ta có thể tạo trình xử lý sự kiện để kiểm tra xem một nút cụ thể có được nhấp vào không. Khi sự kiện onClick được kích hoạt, một thông báo xác nhận rằng chức năng của chúng tôi hoạt động sẽ xuất hiện trong bảng điều khiển của chúng tôi

Tốt nhất, chúng ta chỉ nên sử dụng các thử nghiệm này trong giai đoạn phát triển dự án web của mình và chúng ta nên xóa các bảng điều khiển này. log() sự kiện từ sản phẩm cuối cùng của chúng tôi

 document.addEventListener('buttonClick', function (event) {

 console.log("Button Clicked!");

 }, false); 

Tương tự như vậy, chúng ta có thể sử dụng các hộp cảnh báo JavaScript với một phương pháp tương tự

 document.addEventListener('buttonClick', function (event) {

 alert("I am in a box with a " str + "!");

 }, false); 

Đến cuối cùng

Kiến thức cơ bản của chúng tôi về cách thức hoạt động của JavaScript và một số thực hành mã hóa đơn giản là đủ để sửa các lỗi JavaScript của chúng tôi. Ngoài những kỹ năng này, chúng tôi có hàng trăm dịch vụ trực tuyến để lựa chọn có thể giúp chúng tôi phát hiện những lỗi phức tạp hơn đó

Hy vọng rằng theo thời gian, ít hơn 90% thời gian của chúng tôi sẽ được sử dụng để sửa lỗi JavaScript nếu chúng tôi sử dụng các phương pháp trên

Kiểm tra Truy xuất giám sát người dùng thực. Nó có thể giám sát mọi thứ về các ứng dụng JavaScript của bạn để bắt lỗi và tăng tốc hiệu suất web, bao gồm những điều sau

Tại sao lỗi JavaScript liên tục xuất hiện?

Làm cách nào để dừng JavaScript void 0?

Làm cách nào để sửa lỗi JavaScript void?

Tại sao JavaScript không hoạt động trên trình duyệt của tôi?