Home-theater-designers
Bảng điều khiển trình duyệt web là một trong những công cụ được sử dụng rộng rãi nhất để gỡ lỗi các ứng dụng front-end. API Console cung cấp cho các nhà phát triển khả năng xử lý lỗi và ghi nhật ký thông báo.
console.log () có lẽ là phương pháp được sử dụng phổ biến nhất trong API Console, nhưng cũng có những phương pháp khác mà bạn có thể sử dụng trong quy trình làm việc của mình. Hướng dẫn này hiển thị cho bạn các phương pháp bảng điều khiển trình duyệt web khác nhau mà bạn có thể sử dụng để cải thiện quy trình gỡ lỗi của mình.
Tại sao ghi nhật ký lại quan trọng?
Đăng nhập vào bảng điều khiển trình duyệt web là một trong những phương pháp tốt nhất để gỡ lỗi các ứng dụng giao diện người dùng hoặc dựa trên JavaScript.
Liên quan: 6 khung JavaScript đáng học hỏi
Hầu hết các trình duyệt web hiện đại đều hỗ trợ API Console, giúp các nhà phát triển có thể sử dụng nó. Đối tượng bảng điều khiển chịu trách nhiệm cung cấp quyền truy cập vào bảng điều khiển gỡ lỗi của trình duyệt. Việc triển khai có thể khác nhau trên các trình duyệt nhưng hầu hết các phương pháp sẽ hoạt động trên tất cả các trình duyệt hiện đại.
Mẹo : Bảng điều khiển trình duyệt của bạn có thể chạy tất cả mã được thảo luận trong hướng dẫn này. nhấn F12 trên bàn phím của bạn để mở các công cụ của nhà phát triển trình duyệt trong Chrome hoặc Firefox.
Ghi nhật ký chuỗi thông báo
Một trong những phương pháp bảng điều khiển phổ biến nhất là console.log () . Nó chỉ đơn giản là xuất một thông báo chuỗi hoặc một số giá trị đến bảng điều khiển web. Đối với các giá trị đơn giản hoặc thông báo chuỗi, console.log () phương pháp có lẽ là lựa chọn tốt nhất để sử dụng.
dịch vụ giao hàng nào trả nhiều tiền nhất
Để xuất ra một Chào thế giới tin nhắn, bạn có thể sử dụng như sau.
console.log(`Hello World`); Một tính năng đặc biệt khác của console.log () method là khả năng in kết quả đầu ra của các phần tử DOM hoặc cấu trúc của một phần của trang web, ví dụ: để xuất ra cấu trúc của phần tử body và mọi thứ bên trong nó sử dụng như sau.
console.log(document.body) Đầu ra là một tập hợp các phần tử DOM dưới dạng một cây HTML.
Ghi nhật ký các đối tượng JavaScript tương tác
Các console.dir () được sử dụng để ghi các thuộc tính tương tác của các đối tượng JavaScript. Ví dụ: bạn có thể sử dụng nó để xem các phần tử DOM trong một trang web.
Đầu ra điển hình của console.dir () phương thức bao gồm tất cả các thuộc tính của Đối tượng JavaScript được chỉ định ở định dạng JSON. Sử dụng phương pháp bên dưới để in các thuộc tính của tất cả các phần tử trong phần nội dung của trang HTML:
console.dir(document.body) Đánh giá biểu thức
Bạn có thể quen thuộc với các phương pháp xác nhận từ thử nghiệm đơn vị — cũng là console.assert () phương pháp hoạt động theo cách tương tự. Sử dụng console.assert () phương pháp để đánh giá một biểu thức hoặc điều kiện.
Khi phương thức xác nhận không thành công, bảng điều khiển sẽ in ra thông báo lỗi; nếu không, nó không in gì. Sử dụng mã bên dưới để đánh giá xem tuổi của một người có lớn hơn 18 hay không:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Việc xác nhận ở trên không thành công và một thông báo lỗi sẽ in ra tương ứng.
Ghi dữ liệu trong bảng
Sử dụng console.table () phương pháp hiển thị dữ liệu dưới dạng bảng. Các ứng cử viên tốt để hiển thị dưới dạng bảng bao gồm các mảng hoặc dữ liệu đối tượng.
Ghi chú : Một số trình duyệt, như Firefox, có giới hạn tối đa là 1.000 hàng có thể được hiển thị với console.table () phương pháp.
Giả sử bạn có mảng đối tượng ô tô sau:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Bạn có thể hiển thị mảng ở trên trong một bảng bằng cách sử dụng phương pháp bên dưới:
console.table(cars); Ghi nhật ký tin nhắn theo thể loại
Thông báo trên bảng điều khiển trình duyệt web chủ yếu được phân loại thành ba nhóm: lỗi, cảnh báo và thông tin.
Lỗi
Để in cụ thể các thông báo lỗi tới bảng điều khiển bằng cách sử dụng console.error () phương pháp, các thông báo liên quan đến lỗi được hiển thị bằng phông chữ màu đỏ.
console.error('error message'); Cảnh báo
Để in cảnh báo, hãy sử dụng cách sau. Như với hầu hết các tình huống, thông báo cảnh báo được hiển thị bằng màu cam:
console.warn('warning message');Thông tin
Để in thông tin chung vào bảng điều khiển, hãy sử dụng console.info () phương pháp:
console.info('general info message') Thật dễ dàng để lọc hoặc tìm thư trong bảng điều khiển của trình duyệt khi chúng được phân loại đúng cách.
Luồng chương trình theo dõi
Sử dụng console.trace () phương thức để in một dấu vết ngăn xếp của luồng chương trình hoặc quá trình thực thi. Đây là một tính năng rất hữu ích để gỡ lỗi vì nó in thứ tự các chức năng được thực thi trong chương trình của bạn.
Để xem console.trace () đang hoạt động, bạn có thể tạo ba hàm (như bên dưới) và đặt dấu vết ngăn xếp vào một trong các hàm.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Trong bảng điều khiển trình duyệt của bạn, hãy gọi hoặc kích hoạt functionOne () và bạn sẽ nhận được dấu vết ngăn xếp của các lệnh gọi hàm được in trong Thứ tự Cuối cùng Trong Đầu ra Đầu tiên (LIFO) vì đó là một ngăn xếp.
Thời gian thực hiện chương trình
Để xác định thời gian một hoạt động mất bao lâu để thực thi trong chương trình của bạn, bạn có thể sử dụng console.time () phương pháp. console.time () thường được sử dụng cùng với console.timeEnd () phương pháp trong đó cái sau được sử dụng để kết thúc bộ đếm thời gian.
Bạn có thể có tối đa 10.000 bộ hẹn giờ chạy trên mỗi trang web, làm nổi bật tầm quan trọng của việc gắn nhãn bộ hẹn giờ của bạn một cách chính xác.
Để tính thời gian vòng lặp for đi qua các số từ 1 đến 50.000, bạn có thể sử dụng bộ đếm thời gian như sau.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Đếm
Các console.count () phương thức được sử dụng để theo dõi số lần một hàm hoặc một số đoạn mã đã được gọi trong một chương trình. Ví dụ, chúng ta có thể theo dõi số lần một vòng lặp for đã được thực thi như sau:
for(i=0; i<4; i++ ){
console.count();
}Nhóm các tin nhắn nhật ký
Cũng giống như phương pháp hẹn giờ, console.group () , và console.groupEnd () phương pháp thường được sử dụng theo cặp.
Phương pháp nhóm giúp bạn sắp xếp các thông báo nhật ký của mình tốt hơn. Ví dụ, chúng ta có thể tạo một nhóm các thông báo cảnh báo với các cảnh báo nhãn như sau.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Hai thông báo trong nhóm cảnh báo được phân loại trực quan như được thấy trong đầu ra bên dưới.
Xóa bảng điều khiển
Cuối cùng nhưng không kém phần quan trọng, đây là một số cách mà bạn có thể xóa thông báo nhật ký trong bảng điều khiển trình duyệt của mình.
Sử dụng console.clear () phương pháp như sau.
console.clear() Bạn cũng có thể xóa bảng điều khiển trình duyệt bằng phím tắt của trình duyệt.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Sử dụng Bảng điều khiển Trình duyệt ở mức tối đa
Hướng dẫn này đã chỉ cho bạn một số phương pháp bảng điều khiển trình duyệt web có sẵn khác nhau để giúp bạn gỡ lỗi các ứng dụng giao diện người dùng. API giao diện điều khiển rất nhẹ, dễ học và được hỗ trợ rộng rãi trong hầu hết các trình duyệt hiện đại.
cách cài đặt linux trên chromebook 2018
Tạo biểu mẫu xác thực CAPTCHA cho dự án tiếp theo của bạn và thử nghiệm các kỹ năng gỡ lỗi mới của bạn!
Đăng lại Đăng lại tiếng riu ríu E-mail Tạo Biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScriptBảo mật các trang web của bạn bằng xác thực CAPTCHA.
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- JavaScript
Mwiza phát triển phần mềm theo chuyên môn và viết nhiều trên Linux và lập trình front-end. Một số sở thích của anh ấy bao gồm lịch sử, kinh tế, chính trị & kiến trúc doanh nghiệp.
Xem thêm từ Mwiza KumwendaTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký