# Một số tips với Google DevTool Console

Chắc hẳn các bạn web developer không xa lạ gì với Console của Google DevTool, một tool không thể thiếu để debug các ứng dụng nền web :)

Hôm nay mình xin chia sẻ một số tips mình hay dùng với console trong quá trình phát triển ứng dụng web:

### Viết nhiều dòng lệnh trong console

Để viết nhiều dòng trong console, bạn dùng tổ hợp phím **SHIFT + ENTER** khi muốn xuống dòng.

![multiple-lines](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220126318/b3add226-f6c7-4d44-a894-9213f9ff75cc.png align="left")

### In cùng lúc nhiều đối tượng

```javascript
console.log(obj1, obj2, obj3);
```

### Sử dụng tham số khi in

Cái này rất cơ bản nhưng mình thấy nhiều bạn thích dùng:

```javascript
var currentYear = new Date().getFullYear(), 
    yourName = 'Do Nam Khanh';
console.log('Hello ' + yourName + '! This year is ' + currentYear);
```

Dĩ nhiên, ví dụ này nhỏ nên có thể bạn sẽ không thấy được lợi ích của việc dùng arguments với formatted string nhưng chắc chắn đoạn code này sẽ dễ nhìn hơn rất nhiều :)

```javascript
console.log('Hello %s! This year is %d', yourName, currentYear);
```

Đặc biệt, bạn có thể sử dụng **%c** để thêm style khi in ra console. Ví dụ:

[![arguments-styled](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220128155/6ff7fad6-89c5-49eb-be10-7e92e5d874bc.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/arguments-styled.png)

### In đối tượng theo dạng bảng

Giả sử bạn có 1 mảng dữ liệu như sau & muốn hiển thị ra console để kiểm tra:

Nếu sử dụng **console.log()** để in ra dữ liệu thì kết quả sẽ khá là khó nhìn.

[![console.log](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220129398/4e50750e-e179-486c-9247-cd52612da89a.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/console.log_.png)

Và nếu bạn muốn sắp xếp theo **index**, theo **name** hay **age** thì sao? May mắn thay, console có 1 phương thức là **.table()** sẽ giúp chúng ta in ra dữ liệu theo dạng bảng dễ nhìn hơn & hỗ trợ cả sắp xếp theo column

[![console.table](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220131436/efcd666c-c2fe-4fbf-a819-24ce4ba0c3e5.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/console.table_.png)

Thậm chí phương thức này còn cho phép chúng ta chỉ định sẽ hiển thị thuộc tính nào (tương ứng với cột nào). Để làm điều này, chỉ cần thêm tham số thứ 2 dạng mảng với giá trị là property tương ứng của object. Ví dụ trên sẽ được viết lại như sau:

[![console.table.column](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220133128/225285f1-5d8e-4fd4-9d37-8955f4be12dc.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/console.table_.column.png)

### Truy xuất DOM bằng XPath

Bạn có thể sử dụng **$x(xpath)** để truy xuất các phần tử DOM (trường hợp bạn đang mở Console trên 1 trang web sử dụng jQuery thì bạn thậm chí có thể sử dụng luôn jQuery ở trong console). Mình sẽ minh hoạ luôn bằng cách sử dụng Xpath để lấy ra tất cả button Add Media có trên màn hình soạn thảo bài viết này:

[![console.xpath](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220135187/f6116390-8273-4889-8cda-5c9afbdb2b92.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/console.xpath_.png)

### Benchmark bằng cách sử dụng console.time() và console.timeEnd()

Mình hay sử dụng cách này để benchmark 1 block code. Ví dụ như tính thời gian khởi tạo 1 mảng có 1 triệu phần tử:

[![console.benchmark2](https://cdn.hashnode.com/res/hashnode/image/upload/v1700220137439/3f34947b-43d8-40ef-85e2-1f3f7d35adf5.png align="left")](http://donamkhanh.com/wp-content/uploads/2015/12/console.benchmark2.png)

Ờ đấy, thấy chưa. Có quả benchmark này nhìn thấy rõ performance thế nào nè =))

Ngoài ra còn rất nhiều những tính năng cool nữa của DevTool, bạn có thể tham khảo tại: [https://developer.chrome.com/devtools](https://developer.chrome.com/devtools)