WordPress

Sử dụng trình duyệt của bạn để chẩn đoán lỗi JavaScript

Chẩn đoán lỗi JavaScript trên các trình duyệt Web.  Nếu bạn đang gặp sự cố với chức năng tương tác của mình, điều này có thể do lỗi hoặc xung đột JavaScript. Ví dụ: menu flyout của bạn có thể bị hỏng, các hộp meta của bạn không kéo hoặc các nút thêm phương tiện của bạn không hoạt động.

Hôm nay GreenApps sẽ chỉ cho bạn cách chẩn đoán lỗi JavaScript trong các trình duyệt khác nhau.

Bước 1: Thử sử dụng một trình duyệt khác

Để đảm bảo rằng đây là lỗi JavaScript chứ không phải lỗi trình duyệt, trước hết hãy thử mở trang web của bạn trong một trình duyệt khác.

–   Nếu trang web không gặp sự cố tương tự trong trình duyệt mới, bạn biết rằng lỗi đó là do trình duyệt cụ thể.

–   Nếu trang web gặp lỗi tương tự thì đó không phải là lỗi dành riêng cho một trình duyệt.

Ghi lại bất kỳ trình duyệt nào bạn đang gặp lỗi. Bạn có thể sử dụng thông tin này khi thực hiện yêu cầu hỗ trợ.

Bước 2: Bật SCRIPT_DEBUG 

Bạn cần bật gỡ lỗi tập lệnh . Mở wp-config.php và thêm dòng sau vào trước “Đó là tất cả, dừng chỉnh sửa! Chúc bạn viết blog vui vẻ ”.

define(‘SCRIPT_DEBUG’, true);

Kiểm tra xem bạn có còn gặp sự cố không.

–   Sự cố đã được khắc phục – tắt gỡ lỗi tập lệnh và báo cáo sự cố trên diễn đàn hỗ trợ, thông báo rằng bạn đã bật gỡ lỗi tập lệnh và nó đã giải quyết được sự cố.

–   Sự cố vẫn tiếp diễn – hãy chuyển sang Bước 3.

Bước 3: Chẩn đoán

Bây giờ bạn biết trình duyệt nào bạn đang gặp sự cố, bạn có thể bắt đầu chẩn đoán sự cố.

Chrome 

1. Mở DevTools

Nhấn Command + Option + J (Mac) hoặc Control + Shift + J (Windows, Linux, Chrome OS) để chuyển thẳng vào bảng Console của Chrome DevTools. Hoặc, điều hướng đến More Tools > Developer Tools từ trình đơn Chrome và nhấp vào tab Console.

2. Xác định lỗi

Bảng điều khiển Console lỗi sẽ hiện thị ở đây. Nếu bạn không thấy bất kỳ lỗi nào, hãy thử tải lại trang. Lỗi có thể được tạo ra khi tải trang. Bảng điều khiển Console sẽ cung cấp cho bạn loại lỗi, vị trí của lỗi và số dòng

Firefox

1. Mở Bảng điều khiển Web

Nhấn Command + Option + K (Mac) hoặc Control + Shift + K (Windows) để chuyển thẳng vào bảng Console của Firefox Web Console. Hoặc, điều hướng đến Web Development > Web Console từ trình đơn Firefox và nhấp vào tab Console.

2. Xác định lỗi

Bảng điều khiển Console lỗi hiển thị ở đây. Nếu bạn không thấy bất kỳ lỗi nào, hãy thử tải lại trang. Lỗi có thể được tạo ra khi tải trang. Bảng điều khiển sẽ cung cấp cho bạn loại lỗi, vị trí của lỗi và số dòng

Internet Explorer

Hãy nhớ rằng, IE hoạt động rất khác so với các trình duyệt khác khi gặp lỗi JS và báo cáo về chúng theo những cách khác nhau. Điều đầu tiên cần kiểm tra khi gặp sự cố trong IE là nếu sự cố chỉ tồn tại trong IE. Cũng lưu ý rằng các công cụ gỡ lỗi được tích hợp trong một số phiên bản IE bị hạn chế và có thể không khả dụng.

1. Mở Bảng điều khiển

Chuyển đến màn hình mà bạn đang gặp lỗi. Trong Internet Explorer, điều hướng đến Settings > F12 Developer Tools  . Hoặc nhấp vào F12

Nhấp vào tab Console.

2. Xác định lỗi

Bảng điều khiển lỗi sẽ mở ra. Nếu bạn không thấy bất kỳ lỗi nào, hãy thử tải lại trang. Lỗi có thể được tạo ra khi tải trang. Bảng điều khiển sẽ cung cấp cho bạn loại lỗi, vị trí của lỗi và số dòng.

Safari

1. Bật Công cụ dành cho nhà phát triển

Điều hướng đến Safari > Preferences > Advancedvà chọn hộp có nội dung Show Develop menu in menu bar

2. Mở Bảng điều khiển

Chuyển đến màn hình mà bạn đang gặp lỗi. Trong Safari, điều hướng đến Develop > Show Error Console

3. Xác định lỗi

Bảng điều khiển lỗi sẽ mở ra. Nếu bạn không thấy bất kỳ lỗi nào, hãy thử tải lại trang.

Bảng điều khiển hiển thị cho bạn lỗi, vị trí lỗi và số dòng:

Hình ảnh trên cho thấy lỗi nằm trong jquery.js trên dòng 2.

Lưu ý: Nếu bạn không thấy lỗi, hãy nhấp vào nút quay lại trong bảng điều khiển .

Lời kết

Bây giờ bạn đã chẩn đoán lỗi của mình.

Nếu sự cố của bạn là với một chủ đề hoặc plugin cụ thể, bạn có thể truy cập diễn đàn hỗ trợ chuyên dụng của họ bằng cách truy cập https://wordpress.org/support/plugin/PLUGINNAME hoặc https://wordpress.org/support/theme/THEMENAME

Hãy theo dõi fb: greenapps để biết thêm nhiều kiến thức thú vị nhé!

Để lại bình luận

Your email address will not be published. Required fields are marked *