10 điều “nhiệm màu” bạn có thể làm với Developer Console của Chrome
Ít người biết rằng Chrome luôn đi kèm theo một số công cụ lập trình built-in. Bộ công cụ hỗ trợ một loạt tính năng đa dạng, trong đó có Elements, Network, và Security. Hôm nay, chúng ta sẽ tập trung 100% nội dung bài viết vào JavaScript Console.
Khi mới bắt đầu code, tôi chỉ dùng JavaScript console cho giá trị logging như phản hồi từ server, hoặc giá trị của biến. Nhưng dần dần, sau khi đọc nhiều hướng dẫn online, tôi nhận ra console có thể làm nhiều thứ hơn ta tưởng.
1. Select DOM Elements
Nếu quen thuộc với jQuerry, bạn chắc cũng biết được tầm quan trọng của selector $(‘.class’) và $(‘#id’). Chúng sẽ lựa chọn DOM element dựa trên class hoặc ID tương ứng.
Ngay cả khi không dùng được jQuerry trong DOM, bạn vẫn có thể làm việc tương tự với developer console.
$(‘tagName’) $(‘.class’) $(‘#id’) và $(‘.class #id’) tương đương với document.querySelector(‘ ‘). Dòng lệnh này sẽ trả kết quả là element đầu tiên trong DOM khớp với selector.
Bạn có thể dùng $$(‘tagName’) hoặc $$(‘.class’) (hãy để ý biểu tượng $$) để lựa chọn tất cả element của DOM dựa trên một selector cụ thể. Lệnh này còn đặt element vào array.
Ví dụ, $$(‘.className’) sẽ cho bạn tất cả element có class className; còn $$(‘.className’)[0] và $$(‘.className’)[1] sẽ tương ứng cho bạn element đầu tiên và thứ hai.
2. Biến trình duyệt trành editor
Bạn hoàn toàn có thể biến trình duyệt trành text editro tiện dụng. Bạn có thể thêm và bỏ text từ bất cứ đâu trong DOM.
Bạn không phải inspect element và edit HTML nữa. Thay vào đó, hãy vào developer console và gõ đoạn sau:
|
1
2
3
|
document . body . contentEditable = true
|
Sau đó, ta có thể thoải mái edit được content. Bạn có thể edit gần như mọi thứ trong DOM.
3. Tìm Events liên đới với Element trong DOM
Khi debug, bạn phải chú ý tìm event listener gán với một element trong DOM. Developer console sẽ giúp bạn tìm dễ dàng hơn.
getEventListeners($(‘selector’)) trả kết quả là một array của objects có chứa tất cả event gán với element đó. Bạn có thể mở rộng object để xem event:
Để tìm Listener cho một event nhất định, bạn có thể:
|
1
2
3
|
getEventListeners ( $ (‘ selector’ ) ) . eventName [ 0 ] . listener
|
Đoạn lệnh này sẽ hiển thị listener liên đới với event cụ thể. Ở đây eventName[0] là một array liệt kê tất cả event của một event cụ thể. Ví dụ:
|
1
2
3
|
getEventListeners ( $ (‘ firstName’ ) ) . click [ 0 ] . listener
|
…. sẽ hiển thị listener liên đới với click event của element với ID ‘firstName’.
4. Monitor Events
Với developer event, bạn cũng có thể giám sát event gắn với một element cụ thể trong DOM khi chúng được thực thi. Có rất nhiều lệnh khác nhau bạn có thể sử dụng để theo dõi một vài hoặc tất cả những event này:
monitorEvents($(‘selector’))sẽ giám sát tất cả event liên đới với element với selector của bạn, sau đó log in chúng vào console ngay khi được kích hoạt. Ví dụ,monitorEvents($(‘#firstName’))sẽ log tất cả event gắn với element có ID củafirstNamemonitorEvents($(‘selector’),’eventName’)sẽ log một event nhất định gắn với một element. Bạn có thể pass event name làm đối số đến hàm. Lệnh này sẽ chỉ log một event nhất định gắn với một element cụ thể. Ví dụ,monitorEvents($(‘#firstName’),’click’)sẽ log tất cả click event gắn với element có IDfirstName.monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….])sẽ log nhiều event dựa vào yêu cầu của chính bạn. Thay vì phải pass một event name duy nhất dưới dạng đối số, sẽ pass một array của chuỗi chứa tất cả event. Ví dụ,monitorEvents($(‘#firstName’),[‘click’,’focus’])sẽ log click event và tập trung và event gắn với element có IDfirstName.monitorEvents($(‘#firstName’),[‘click’,’focus’]): ngừng giám sát và log event trong console.
5. Tìm Time Of Execution của một Code Block
JavaScipt console có một hàm quan trọng là console.time(‘labelName’), lấy label name làm đối số, rồi bắt đầu timer. Còn một hàm quan trọng nữa là console.timeEnd(‘labelName’) cũng lấy label name và kết thúc timer liên đới với label đó.
Ví dụ:
|
1
2
3
4
5
6
7
8
|
console . time ( 'myTime' ) ; //Starts the timer with label - myTime
console . timeEnd ( 'mytime' ) ; //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
|
Hai dòng code trên cho ta thời gian tiêu tốn từ đầu đến cuối timer.
Chúng ta có thể cải thiện đoạn code này hơn nữa để tính toán thời gian để thực thi một code block.
Ví dụ, nếu muốn tìm khoảng thời gian để thực thi một vòng lập, tôi có thể làm như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
console . time ( 'myTime' ) ; //Starts the timer with label - myTime
for ( var i = 0 ; i < 100000 ; i ++ ) {
2 + 4 + 5 ;
}
console . timeEnd ( 'mytime' ) ; //Ends the timer with Label - myTime
//Output - myTime:12345.00 ms
|
6. Sắp xếp giá trị của một biến vào Table
Giả sử ta có nhiều array (mảng) của các object trông như sau:
|
1
2
3
|
var myArray = [ { a : 1 , b : 2 , c : 3 } , { a : 1 , b : 2 , c : 3 , d : 4 } , { k : 11 , f : 22 } , { a : 1 , b : 2 , c : 3 } ]
|
Khi ta gõ tên biến vào console, ta sẽ nhận giá trị dưới dạng array của objects. Rất tiện lợi, bạn có thể mở rộng objects và xem các giá trị.
Nhưng khi số tính chất gia tăng, array sẽ rối và khó hiểu hơn. Do đó, để nhận thức biến rõ hơn, chúng ta có thể hiển thị chúng thành table.
.console.table(variableName) thể hiện biến và tất cả tính chất theo cấu trúc bảng, như ví dụ dưới đây:
7. Kiểm tra một element trong DOM
Bạn có thể trực tiếp kiểm tra một element từ console:
inspect($(‘selector’))sẽ kiểm tra element khớp với selector và đưa bạn đến tab Element trong Chrome Developer Tools. Ví dụ,inspect($(‘#firstName’))sẽ kiểm tra element có IDfirstNamevàinspect($(‘a’)[3])sẽ kiểm tra anchor element thứ tư có trong DOM của bạn.- $0, $1, $2,… có thể giúp bạn truy hồi các element vừa kiểm tra gần đây nhất. Ví dụ, $0 cho bạn DOM element được kiểm tra gần nhất, còn $1 sẽ cho bạn DOM element được kiểm tra gần nhì.
8. Liệt kê các tính chất của một Element
Nếu bạn muốn liệt kê ra tất cả tính chất của một element, bạn có thể thực hiện trực tiếp từ Console.
dir($(‘selector’)) trả một object với tất cả tính chất liên quan với DOM element của nó. Bạn có thể expand để xem thêm nhiều chi tiết hơn nữa.
9. Truy hồi giá trị của kết quả cuối cùng
Bạn có thể dùng console làm máy tính. Và nếu làm như vậy, bạn có thể sẽ cần phải thực hiện nhiều hơn một phép tính. Và đây là cách lấy giá trị của phép tính trước đó từ bộ nhớ:
$_
Cụ thể hơn:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
2 + 3 + 4
9 //- The Answer of the SUM is 9
$ _
9 // Gives the last Result
$ _ * $ _
81 // As the last Result was 9
Math . sqrt ( $ _ )
9 // As the last Result was 81
$ _
9 // As the Last Result is 9
|
10. Dọn dẹp console và Bộ nhớ
Nếu bạn muốn dọn sạch console và bộ nhớ của console, chỉ việc gõ:
clear()
Sau đó nhấn enter là xong rồi.
Trên đây chỉ là vài ví dụ đơn giản về những tính năng hay ho mà JavaScript console của Chrome có thể làm được. Nếu bạn có trick nào hay với Chrome console, đừng ngại chia sẻ trong phần comment nhé.
freecodecamp
Có thể bạn quan tâm:
3 điều bạn chưa biết về JavaScript Arrays
Những tình huống “đứng hình” trong JavaScript
Special links: phone calls, sms, e-mails, iPhone and Android apps ...
Hướng dẫn lập trình smart TV SamSung
Cách vô cùng đơn giản để gửi tin trực tiếp từ web vào sms ...
Hệ thống chấm công từ xa thông minh SAttendance và hệ thống ...
Hướng dẫn lập trình smart TV SamSung | Mobile Solution
Quản lý quảng cáo online, marketing với OpenX
20 Open Source Ecommerce Platforms
Phân biệt ứng dụng gốc và ứng dụng web
Nhân viên lập trình website asp.net
Ngôn ngữ lập trình NIM, Một sự lựa chọn mới cho dân lập trình
Gửi các developer, làm ơn đừng bỏ việc trước khi bắt...
Biến Google Drive thành server phim online như thế nào?
DVMS chuyên:
* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>
