Xem xét API control panel JavaScript
Control panel JavaScript là một công cụ vô giá giúp phát triển và gỡ lỗi các ứng dụng của ta . Với đối tượng console và các phương thức ghi log của nó, thời gian gọi alert () để gỡ lỗi và nhận giá trị của một biến là rất lâu. Trên hết, nhờ một tiêu chuẩn đang được tiến hành , các trình duyệt hiện đại cuối cùng cũng hỗ trợ cùng một bộ phương pháp. Trong bài đăng này, ta sẽ khám phá một số phương pháp chính được API giao diện điều khiển cung cấp.
Ghi log
console.log là phương thức thông thường ta sử dụng để đăng xuất các giá trị ra console :
const name = 'Alligator'; console.log('Hello', name); // Hello Alligator Nhưng ta cũng có quyền truy cập vào các phương pháp ghi log khác như cảnh báo , thông tin và lỗi :
console.info('Just FYI'); console.warn('Lookout!'); console.error('Boom 💣'); Như bạn thấy từ kết quả console kết quả, việc sử dụng các phương pháp cảnh báo hoặc lỗi cũng cung cấp cho ta dấu vết ngăn xếp:
Bạn cũng có thể kích hoạt theo dõi ngăn xếp với console.trace :
function hello(name = 'Alligator') { console.trace('name:', name); return `Hello ${name}!`; } hello(); … Ồ, cũng có console.debug , nhưng nó hiện chỉ là một alias cho console.log .
console.dir & console.dirxml
console.dir in ra các đối tượng theo cách định dạng đẹp:
const fancyThings = { car: '🏎️ Ferrari', watch: '⌚ Cartier', clothing: { shoes: '👠 Christian Louboutin', dress: '👗 Versace' }, boat: '🛥️ Sunseeker' } console.dir(fancyThings); 
Đối với console.dirxml , nó in ra đánh dấu của phần tử DOM. Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> </head> <body> <h1>hello</h1> <script> console.dirxml(document.body); </script> </body> </html> Điều này sẽ xuất ra như sau:
Nếu bạn cảm thấy nghiêng như vậy, bạn thậm chí có thể hiển thị dữ liệu trong console gọn gàng hơn ở định dạng bảng bằng cách sử dụng console.table .
Khẳng định
Phương thức console.assert là một cách dễ dàng để chạy các bài kiểm tra xác nhận đơn giản. Xác nhận không thành công nếu đối số thứ nhất đánh giá là sai và các đối số tiếp theo được in ra console nếu xác nhận không thành công:
// this will pass, nothing will be logged console.assert(2 == '2', '2 not == to "2"'); // this fails, '3 not === to "3"' will be logged console.assert(3 === '3', '3 not === to "3"'); Thanh toán bù trừ
Bạn có thể xóa console bằng console.clear :
console.clear(); Đếm
Phương thức console.count được sử dụng để đếm số lần nó đã được gọi với cùng một nhãn được cung cấp. Ví dụ: ở đây ta có hai bộ đếm, một bộ đếm cho giá trị chẵn và một bộ đếm cho giá trị lẻ:
[1, 2, 3, 4, 5].forEach(nb => { if (nb % 2 === 0) { console.count('even'); } else { console.count('odd'); } }); // odd: 1 // even: 1 // odd: 2 // even: 2 // odd: 3 Thời gian
Như ta đã trình bày trong bài đăng ngắn này , bạn có thể bắt đầu hẹn giờ bằng console.time và sau đó kết thúc bằng console.endTime . Tùy chọn thời gian có thể có nhãn:
console.time('fetching data'); fetch('https://jsonplaceholder.typicode.com/users') .then(d => d.json()) .then(console.log); console.timeEnd('fetching data'); // fetching data: 0.2939453125ms // (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] Lưu ý nếu bạn sử dụng nhãn với console.time bạn phải chuyển cùng nhãn đó khi gọi console.timeEnd .
Phân group
Sử dụng console.group và console.groupEnd để group các thông báo trên console lại với nhau bằng một nhãn tùy chọn. Cũng lưu ý cách một group có thể được lồng vào một group khác:
console.group('🖍️ colors'); console.log('red'); console.log('orange'); console.group('HEX'); console.log('#FF4C89'); console.log('#7186FE'); console.groupEnd(); console.log('blue'); console.groupEnd(); Đây là kết quả kết quả của console :
Phần thưởng: Mang lại cho nó một số phong cách
Ghi log console có thể được tạo kiểu bằng cách sử dụng dấu phân cách % c đặc biệt:
console.log( 'Hello %cAlligator%c!', 'color: #008f68; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);', 'color: hotpink; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);' ); Mọi thứ xuất hiện sau % c đầu tiên sẽ được tạo kiểu bởi chuỗi được cung cấp bởi đối số thứ hai, sau đó mọi thứ sau % c tiếp theo sẽ được tạo kiểu bởi đối số chuỗi sau, v.v. Đây là cách ví dụ trên trông như thế nào trong console :
Các tin liên quan
Thanh tiến trình trang với các biến JavaScript và CSS2020-04-16
Xem xét API JavaScript của trình quan sát thay đổi kích thước
2020-04-16
Xem xét Đề xuất Nhà điều hành Đường ống JavaScript
2020-04-16
Cách triển khai các phương thức mảng JavaScript từ Scratch
2020-04-09
Các đống nhị phân và hàng đợi ưu tiên qua JavaScript
2020-04-05
JavaScript bất biến có thể thay đổi
2020-04-02
Hiểu các tham số mặc định trong JavaScript
2020-03-31
Cookie là gì và cách làm việc với chúng bằng JavaScript
2020-03-19
Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
2020-03-18
Phương thức getOwnPropertyDescriptors trong JavaScript
2020-03-12
