3 cách hiển thị thông báo lỗi trong Javascript (Ví dụ đơn giản) – nhận được thông báo lỗi javascript

Hướng dẫn nhanh này sẽ hướng dẫn bạn các cách khác nhau để hiển thị thông báo lỗi trong Javascript. Tải xuống mã ví dụ miễn phí bao gồm.

Bạn đang xem : nhận được thông báo lỗi javascript

Chào mừng bạn đến với hướng dẫn nhanh về cách hiển thị thông báo lỗi trong Javascript. Chỉ mới bắt đầu với Javascript và tự hỏi các thông báo lỗi đã đi đâu? Hay đang tìm cách để đối phó tốt hơn với các thông báo lỗi?

Các cách phổ biến để hiển thị thông báo lỗi trong Javascript là:

  1. Thông báo lỗi sẽ hiển thị trong bảng điều khiển của nhà phát triển theo mặc định. Trong các trình duyệt chính, nhấn F12 để hiển thị bảng điều khiển. Chúng tôi cũng có thể sử dụng console.log ("MESSAGE") để xuất thông báo trong bảng điều khiển của nhà phát triển.
  2. Sử dụng thử {CODE} catch (e) {alert (e); } để hiển thị thông báo lỗi trong hộp thoại.
  3. Cuối cùng, tạo thông báo lỗi tùy chỉnh trong HTML.
    • & lt; div id = "err" & gt; & lt; / div & gt;
    • thử {CODE}
    • catch (e) {document.getElementById ("err"). innerHTML = e; }

Điều đó bao gồm ý tưởng cơ bản, nhưng hãy đọc để biết các ví dụ chi tiết!

ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.

TRANG TRÌNH BÀY NHANH

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem

Nếu bạn phát hiện ra lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng mã nguồn này trong dự án của riêng bạn.

Xem Thêm  CAST và CHUYỂN ĐỔI (Transact-SQL) - SQL Server - máy chủ sql thập phân thành chuỗi

HIỂN THỊ LỖI THÔNG ĐIỆP

Được rồi, bây giờ chúng ta hãy tìm hiểu các cách khác nhau để hiển thị thông báo lỗi trong Javascript.

1) NHÀ PHÁT TRIỂN LÀ CONSOLE

1-console.html

  & lt; script & gt;
chức năng lên án () {
  // (A) CONSOLE LOG - VĂN BẢN ĐẦU RA HOẶC BIẾN TRONG CONSOLE
  var foo = "bar";
  console.log (foo);

  // (B) BẢNG CONSOLE - ĐẦU RA ĐẾN ĐẾN HOẶC ĐỐI TƯỢNG TRONG MẪU BẢNG
  var Colors = ["red", "green", "blue"];
  console.table (màu sắc);

  // (C) LỖI CONSOLE - ĐẦU RA MỘT THÔNG ĐIỆP LỖI
  thử {
    không tồn tại();
  } bắt (lỗi) {
    console.error (lỗi);
  }
}
& lt; / script & gt;
 
& lt; nút onclick = 'lên án ()' & gt;
  Mở bảng điều khiển của nhà phát triển và nhấp vào đây
& lt; / nút & gt;  

Nếu bạn không biết bảng điều khiển của nhà phát triển, bạn đang bỏ lỡ quá nhiều. Bảng điều khiển dành cho nhà phát triển là nơi tốt nhất để hiển thị thông báo lỗi mà không khiến “người dùng bình thường” sợ hãi. Dưới đây là 3 hàm console phổ biến cần biết:

  • console.log () sẽ chỉ xuất một dòng hoặc thông báo vào bảng điều khiển của nhà phát triển.
  • console.table () xuất ra một mảng hoặc đối tượng ở dạng bảng dễ đọc.
  • console.error () xuất ra thông báo lỗi.

2) CẢNH BÁO LỖI

2-alert.html

  & lt; script & gt;
function doalert () {
  thử {
    không tồn tại();
  } bắt (lỗi) {
    cảnh báo (err);
  }
}
& lt; / script & gt;

& lt; input type = "button" value = "Error Alert" onclick = "doalert ();" / & gt;
 

Ngày xửa ngày xưa trong thời kỳ đồ đá của Internet, không có cái gọi là “bảng điều khiển dành cho nhà phát triển”. Để khắc phục sự cố, chúng tôi bọc toàn bộ phân đoạn mã trong một khối try-catch alert () thông báo lỗi… Nó vẫn hoạt động, nhưng đây là một phương pháp lỗi thời. .

3) THÔNG ĐIỆP LỖI HTML

3-html.html

  & lt;! - (A) CSS - & gt;
& lt; phong cách & gt;
#err {
  không trưng bày;
  nền: # f54242;
  viền: 1px solid # bd1717;
  đệm: 5px;
  lề: 5px;
  màu: #fff;
  font-weight: bold;
}
& lt; / style & gt;
 
& lt;! - (B) HTML - & gt;
& lt; div id = "err" & gt; & lt; / div & gt;
& lt; input type = "button" value = "Kiểm tra Lỗi" onclick = "dohtml ()" / & gt;
 
& lt;! - (C) JAVASCRIPT - & gt;
& lt; script & gt;
function dohtml () {
  thử {
    không tồn tại();
  } bắt (lỗi) {
    hãy thông báo = document.getElementById ("err");
    thông báo.innerHTML = err;
    thông báo.style.display = "khối";
  }
}
& lt; / script & gt;  

Cuối cùng, đây là cách chúng tôi hiển thị thông báo lỗi trong HTML.

Xem Thêm  ĐẶT HÀNG SQL BẰNG - thứ tự sql theo độ dài của trường

  • Tạo “vùng chứa lỗi HTML” – & lt; div id = "err" & gt; .
  • Khi lỗi xảy ra, hãy lấy vùng chứa HTML – let allow = document.getElementById ("err") .
  • “Đẩy” thông báo lỗi vào vùng chứa – allow.innerHTML = err;

HIỂN THỊ THÔNG ĐIỆP LỖI – CÓ LÀM SENSE KHÔNG?

Bây giờ bạn đã biết cách hiển thị thông báo lỗi và thông báo, một câu hỏi cuối cùng vẫn còn – Câu hỏi nào hợp lý? Hãy xem xét điều này, nếu bạn hiển thị Uncaught TypeError: Không thể đọc thuộc tính 'addEventListener' của null cho “người dùng bình thường”, điều đó sẽ khiến họ sợ hãi.

Sẽ không tốt hơn nếu hiển thị chung chung “một lỗi đã xảy ra” cho người dùng, nhưng thay vào đó, hãy ghi lại thông báo lỗi thực tế trong nền? Đó là điều để bạn suy nghĩ.

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

BẢNG ĐIỀU HÒA THÔNG TIN

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

KẾT THÚC

Cảm ơn bạn đã đọc và chúng ta đã đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề nhận được thông báo lỗi javascript

Zellwk #03: How to debug Javascript errors

  • Tác giả: Zell Liew
  • Ngày đăng: 2017-11-16
  • Đánh giá: 4 ⭐ ( 6664 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: It’s normal for you to make errors when you code. So if you see an error, you don’t have to be afraid. I get error messages all the time. When I have bad days, I get more error messages!

    Error messages are something bad. We’re actually lucky to have error messages show up infront of us when code.

    Think about designers and other professions, when they create something, its hard for them to know what’s wrong with their work.

    In our case, we get instant feedback through error messages. These error messages are like angels that gently tell us that something is wrong. You can correct the code and your program would work.

    https://zellwk.com

Những lỗi JavaScript thường gặp và cách fix

  • Tác giả: hamsa.life
  • Đánh giá: 4 ⭐ ( 6104 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xử lý lỗi trong JavaScript

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 4189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error).

Các lỗi Javascript cần khắc phục

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 3 ⭐ ( 9262 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chắc hẳn ai cũng biết về javascript. Và dưới đây là top 10 lỗi javascript thường gặp được rollbar thu thập với hơn 1000 project.

Hướng dẫn fix lỗi không nhận function của thư viện jQuery

  • Tác giả: hoccode.org
  • Đánh giá: 3 ⭐ ( 1817 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn chi tiết cách fix lỗi không nhận function của thư viện jQuery (jQuery không hoạt động) với những tình huống thường gặp khi bạn viết code Javascript.

Top 10 lỗi javascript thường gặp và cách phòng tránh(P1)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 5019 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chắc hẳn ai cũng biết về javascript. Và dưới đây là top 10 lỗi javascript thường gặp được rollbar thu thập với hơn 1000 project.

Cách sửa lỗi Facebook không xem được thông báo, không hiện thông báo

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 7690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Taimienphi.vn sẽ tập trung vào lỗi Facebook không hiện thông báo với việc chia sẻ cho bạn các nguyên nhân gây ra sự cố này và cách khắc phục kèm theo.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  JavaScript - Câu lệnh if ... else - cú pháp câu lệnh if else javascript