Cách sử dụng console nhiều hơn console.log

Thứ Sáu, 10/02/2023

Tram Ho

Để phát triển giao diện người dùng, console.log() là một công cụ rất hữu ích. Nhưng đối tượng console có nhiều phương thức hữu ích hơn. Để gỡ lỗi đúng cách và hiệu quả, chúng ta hãy xem xét kỹ hơn đối tượng console .

vấn đề console.log

Nếu bạn chỉ sử dụng console.log , mã của bạn sẽ lộn xộn với console.log , khiến bạn khó hiểu mã nào đang được thực thi. Hôm nay, tôi sẽ chỉ cho bạn 9 cách bạn có thể làm điều đó bằng console !

console.bảng

console.table trình bày dữ liệu ở định dạng bảng, giúp dễ đọc hơn.

<span class="token keyword">const</span> sweets <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">"Ichigo Cake"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">"Red Pudding"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">]</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">table</span> <span class="token punctuation">(</span> sweets <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const sweets = [

{ id : 1 , name : "Ichigo Cake" } ,

{ id : 2 , name : "Red Pudding" } ,

] ;

console . table ( sweets ) ;

Khi thực hiện, kết quả được trả về dưới dạng bảng.

bảng điều khiển.nhóm

Bạn có thể sử dụng console.group và console.groupEnd để hiển thị dữ liệu phân cấp được nhóm lại giống như đàn accordion. Với điều này, bạn có thể kiểm tra dữ liệu trong khi vận hành với các hệ thống phân cấp khác nhau.

console <span class="token punctuation">.</span> <span class="token function">group</span> <span class="token punctuation">(</span> <span class="token string">"User Info"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Name: John Doe"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Age: 32"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">groupEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . group ( "User Info" ) ;

console . log ( "Name: John Doe" ) ;

console . log ( "Age: 32" ) ;

console . groupEnd ( ) ;

Bây giờ bạn có thể chuyển đổi dữ liệu bằng cách nhấp vào như thế này.

giao diện điều khiển.thời gian

Bạn có thể sử dụng console.time và console.timeEnd để tính toán thời gian cần thiết để thực thi một khối mã nhất định.

Đặc biệt hữu ích khi xác minh hiệu suất.

Lần này, tôi đã cố gắng hiển thị thời gian lấy dữ liệu của Pokemon API tính bằng mili giây.

console <span class="token punctuation">.</span> <span class="token function">time</span> <span class="token punctuation">(</span> <span class="token string">"Fetching data"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token string">"https://pokeapi.co/api/v2/pokemon/ditto"</span> <span class="token punctuation">)</span>
  <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
  <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console <span class="token punctuation">.</span> <span class="token function">timeEnd</span> <span class="token punctuation">(</span> <span class="token string">"Fetching data"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token comment">// Process the data</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . time ( "Fetching data" ) ;

fetch ( "https://pokeapi.co/api/v2/pokemon/ditto" )

. then ( ( response ) => response . json ( ) )

console . timeEnd ( "Fetching data" ) ;

// Process the data

} ) ;

Bằng cách này, nó sẽ tính toán phần mà các chuỗi trong console.time() và console.timeEnd() có cùng tên.

bảng điều khiển. khẳng định

assert có nghĩa là “khẳng định”. Nói cách khác, giả sử rằng một tình huống luôn luôn đúng. Nếu tình huống không chính xác, một tin nhắn viết sẵn có thể được hiển thị. Nó giúp đảm bảo rằng mã của bạn đang chạy chính xác và phát hiện lỗi sớm.

<span class="token keyword">function</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Test the add function</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">assert</span> <span class="token punctuation">(</span> result <span class="token operator">===</span> <span class="token number">50</span> <span class="token punctuation">,</span> <span class="token string">"Expected 2 + 3 = 5"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

function add ( a , b ) {

return a + b ;

}

// Test the add function

const result = add ( 2 , 3 ) ;

console . assert ( result === 50 , "Expected 2 + 3 = 5" ) ;

Trong trường hợp này, giả sử rằng resulet trả về với 50 , thông báo được hiển thị vì nó trả về với 5 .

Tất nhiên, cài đặt result === 5 xác minh rằng chức năng đang hoạt động chính xác, vì vậy không có gì được in ra bàn điều khiển.

Tạo kiểu console.log

Bạn có thể sử dụng CSS để tạo kiểu cho những gì console.log() hiển thị.

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"%cHello world!"</span> <span class="token punctuation">,</span> <span class="token string">"color: red; font-weight: bold;"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . log ( "%cHello world!" , "color: red; font-weight: bold;" ) ;

Đây là cách văn bản in đậm và đỏ xuất hiện.

console.trace

console.trace sẽ xuất dấu vết ngăn xếp. Điều này hữu ích khi mã của bạn trở nên phức tạp và bạn muốn xem thứ tự thực thi mã.

<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">trace</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">bar</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

function foo ( ) {

console . trace ( ) ;

}

function bar ( ) {

foo ( ) ;

}

bar ( ) ;

Bằng cách này, bạn có thể hiểu foo() , được kích hoạt khi chức năng bar() được thực thi, được gọi từ đâu.

bảng điều khiển.dir

console.dir có thể hiển thị các đối tượng theo thứ bậc. Phương pháp này hiệu quả nếu bạn muốn xem đối tượng từ bàn điều khiển.

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  id <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span>
  name <span class="token operator">:</span> <span class="token string">"John Doe"</span> <span class="token punctuation">,</span>
  address <span class="token operator">:</span> <span class="token punctuation">{</span>
    street <span class="token operator">:</span> <span class="token string">"123 Main St"</span> <span class="token punctuation">,</span>
    city <span class="token operator">:</span> <span class="token string">"New York"</span> <span class="token punctuation">,</span>
    zip <span class="token operator">:</span> <span class="token number">10001</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">dir</span> <span class="token punctuation">(</span> obj <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const obj = {

id : 1 ,

name : "John Doe" ,

address : {

street : "123 Main St" ,

city : "New York" ,

zip : 10001 ,

} ,

} ;

console . dir ( obj ) ;

Một đối tượng có thể bật/tắt được hiển thị như thế này.

console.count

Phương thức console.count cho phép bạn theo dõi số lần một đoạn mã nhất định đã được thực thi.

<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token parameter">x</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">count</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token string">"hello"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token string">"world"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token string">"hello"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

function foo ( x ) {

console . count ( x ) ;

}

foo ( "hello" ) ;

foo ( "world" ) ;

Như bạn có thể thấy, foo('hello') đã được thực thi hai lần.

bảng điều khiển. rõ ràng

Chạy console.clear xóa (xóa) dữ liệu được hiển thị trong bảng điều khiển. Nếu bạn có nhiều đầu ra gỡ lỗi và muốn tập trung vào mục tiêu, thì có một số thứ để thử.

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello world!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">clear</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"This log message will appear after the console is cleared."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . log ( "Hello world!" ) ;

console . clear ( ) ;

console . log ( "This log message will appear after the console is cleared." ) ;

Bằng cách này, nó sẽ hiển thị rằng nó đã bị clear và sau đó bạn có thể sử dụng bảng điều khiển mới.

bản tóm tắt

Tôi đã giới thiệu 9 cách sử dụng bàn điều khiển. Bạn đã học được một cái gì đó mới và sử dụng nó ngày hôm nay? Hãy tận dụng nó!

cuối cùng

Tôi luôn mắc nợ. Tôi hy vọng bạn thích bài viết này và học được một cái gì đó mới.

Hẹn gặp lại các bạn trong bài viết tiếp theo! Nếu bạn thích bài viết này, hãy nhấn “THÍCH” và đăng ký để ủng hộ tôi. Cảm ơn rất nhiều.

nguồn

https://tuan200tokyo.blogspot.com/2023/02/blog138-consolelogconsole.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo