05/08/2019, 08:55
Console không chỉ có phương thức log!
Bài viết gốc đăng tải tại CodeLabo. Người viết: Nguyen Hai Duc console là công cụ đắc lực hỗ trợ chúng ta trong quá trình phát triển ứng dụng, đặc biệt là khi tìm và sửa lỗi. Tuy nhiên, console còn rất nhiều phương thức khác cũng thú vị và hữu ích không kém. Hãy cùng CodeLabo ...
Bài viết gốc đăng tải tại CodeLabo.
Người viết: Nguyen Hai Duc
console là công cụ đắc lực hỗ trợ chúng ta trong quá trình phát triển ứng dụng, đặc biệt là khi tìm và sửa lỗi. Tuy nhiên, console còn rất nhiều phương thức khác cũng thú vị và hữu ích không kém. Hãy cùng CodeLabo tìm hiểu trong bài viết này nhé!
console.log
console.log có lẽ là phương thức được sử dụng nhiều nhất để in giá trị của biến ra màn hình.
|
1 2 3 4 5 |
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'CodeLabo'</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span> <span class="token comment">// Hello CodeLabo</span> |
Bên cạnh đó, console còn có 3 phương thức khác có tính năng tương tự: .warn, .info, và .error.
|
1 2 3 4 5 6 |
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'CodeLabo - more experiments, more knowledge'</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token string">'Hãy like Facebook Page của CodeLabo nhé!'</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Đừng quên share cho mọi người cùng biết nha!'</span><span class="token punctuation">)</span> |
Ngoài việc in giá trị, .warn và .info hiển thị kết quả ở một định dạng khác, giúp bạn phân biệt “mức độ nghiêm trọng” của thông điệp, trong khi .error in ra stack trace, giúp bạn xác định lỗi xuất hiện ở đâu.
Bạn có thể dùng tính năng lọc để lựa chọn hiển thị kết quả theo từng loại thông điệp. Tính năng này có mặt ở hầu hết các trình duyệt.
console.trace
Chúng ta cũng có thể in ra stack trace bằng cách sử dụng console.trace.
|
1 2 3 4 5 6 7 8 9 |
<span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">'CodeLabo'</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 string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!`</span></span> <span class="token punctuation">}</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Kết quả:
EHKOO @ FACEBOOK
Tặng một like thể hiện tình cảm nha!
console.dir và console.dirxml
console.dir in ra JavaScript sau khi đã được định dạng đẹp đẽ.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword">const</span> fancyThings <span class="token operator">=</span> <span class="token punctuation">{</span> car<span class="token punctuation">:</span> <span class="token string">'🏎️ Ferrari'</span><span class="token punctuation">,</span> watch<span class="token punctuation">:</span> <span class="token string">'⌚ Cartier'</span><span class="token punctuation">,</span> clothing<span class="token punctuation">:</span> <span class="token punctuation">{</span> shoes<span class="token punctuation">:</span> <span class="token string">'👠 Christian Louboutin'</span><span class="token punctuation">,</span> dress<span class="token punctuation">:</span> <span class="token string">'👗 Versace'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> boat<span class="token punctuation">:</span> <span class="token string">'🛥️ Sunseeker'</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>fancyThings<span class="token punctuation">)</span> |
Riêng console.dirxml thì in ra markup của nút DOM. Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token punctuation"><</span>html <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>head<span class="token punctuation">></span></span> <span class="token comment"><!-- ... --></span> <span class="token tag"><span class="token punctuation"></</span>head<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>body<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>main<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h1<span class="token punctuation">></span></span>hello<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>this is a <span class="token tag"><span class="token punctuation"><</span>strong<span class="token punctuation">></span></span>text<span class="token tag"><span class="token punctuation"></</span>strong<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>main<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> console<span class="token punctuation">.</span><span class="token function">dirxml</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
Có thể bạn quan tâm
0
|
