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.

10 điều

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')$('#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')$('.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] $$('.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:

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ể:

Đ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ụ:

…. 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ủa firstName
  • monitorEvents($('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ó ID firstName.
  • 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ó ID firstName.
  • 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ụ:

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:

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:

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ó ID firstNameinspect($('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:

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 ...

HTML editor là gì?

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

Lập trình website

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 >>

Chi tiết xem tại: http://dvms.com.vn/tin-tuc/tin-nganh/73412-10-dieu-a-nhiem-maua-ban-co-the-lam-voi-developer-console-cua-chrome.html

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, ...
Hồ sơ năng lực của DVMS tại: https://drive.google.com/open?id=0B3wSX_xcuH3Za1F3ZGZSNlhHUWc
Yêu cầu báo giá tại: http://dvms.com.vn/yeu-cau-bao-gia-viet-ung-dung-mobile-app.html

Khởi nghiệp CNTT, Viễn thông, Marketing: https://fb.com/groups/outsourcingmobileapp  | Nối Kết Khởi Nghiệp: https://fb.com/groups/NoiKetKhoiNghiep

#BạnCầnGìCứHỏiDVMS: Giải pháp cho giao thông, vận tải, giao nhận thông minh: http://vantaithongminh.com ; Giúp việc http://giupviec.taoungdung.com ; Giải pháp cho bệnh viện, y tế: http://www.giaiphapbenhvien.com ; Bác sĩ gia đình: http://bacsigiadinh.giaiphapbenhvien.com ; Giải pháp cho công ty tín dụng, ngân hàng http://giaiphapnganhang.com ; Giải pháp cho giáo dục; Giải pháp cho công ty bảo hiểm http://baohiem.taoungdung.com ; Giải pháp bán hàng, quản lý hệ thống phân phối http://giaiphapdieuhanh.com; Giải pháp truyền hình; thực tế ảo; mobile game; và giải pháp cho nhiều lĩnh vực khác... http://dvms.com.vn/san-pham.html

Vận Tải Đường Bộ, Vận chuyển hàng Bắc Nam, Hảng Taxi Tải, Taxi Tải, vận tải đường thủy, vận tải thủy, vận tải đường không, vận tải công cộng,Vận tải, Giao thông, Hậu cần, giao thông, giao thông đường bộ, giao thông việt nam, giao thông thông minh, giao thông hà nội,giao thông là gì, giao thông wiki, giao thông học đường,quản lý và điều khiển các phương tiện giao thông, Giải pháp giao thông, ùn tắc giao thông,tình hình giao thông, thực trạng giao thông, dự án giao thông, giải pháp an toàn giao thông, giải pháp giao thông thông minh, Đặt xe online, Đặt taxi, Ứng dụng đặt xe taxi trực tuyến, Taxi, Taxi Trực tuyến, Taxi Online, PingTaxi, goCatch, GoTaxi, TaxiCaller, Taxi 24/7, Taxi giá rẻ, Taxi tốt nhất. Taxi đường dài, LimoCab, CityCab, StarCab, Cabstar, Taxi nội thành, giao nhận, logistics, Giao nhận hàng hóa. Nhận hàng tại cảng, giao hàng tại kho. Nhận hàng tại kho, giao hàng ra cảng. Vận chuyển hàng hóa, Van Tai Duong Bo, Van chuyen hang Bac Nam, Hang Taxi Tai, Taxi Tai, van tai duong thuy, van tai thuy, van tai duong khong, van tai cong cong,Van tai, Giao thong, Hau can, giao thong, giao thong duong bo, giao thong viet nam, giao thong thong minh, giao thong ha noi,giao thong la gi, giao thong wiki, giao thong hoc duong,quan ly va dieu khien cac phuong tien giao thong, Giai phap giao thong, un tac giao thong,tinh hinh giao thong, thuc trang giao thong, du an giao thong, giai phap an toan giao thong, giai phap giao thong thong minh, Dat xe online, Dat taxi, Ung dung dat xe taxi truc tuyen, Taxi Truc tuyen, Taxi gia re, Taxi tot nhat. Taxi duong dai, Taxi noi thanh, giao nhan, Giao nhan hang hoa. Nhan hang tai cang, giao hang tai kho. Nhan hang tai kho, giao hang ra cang. Van chuyen hang hoa, grab, uber, ứng dụng mobile, viết ứng dụng mobile, ứng dụng android, viết ứng dụng android, ứng dụng ios, viết ứng dụng ios, ứng dụng blackberry, viết ứng dụng blackberry, ứng dụng windows phone, viết ứng dụng windows phone, ứng dụng tablet, viết ứng dụng tablet, ứng dụng iphone, viết ứng dụng iphone, ứng dụng ipad, viết ứng dụng ipad, ứng dụng smartphone, viết ứng dụng smartphone,ung dung smartphone, viet ung dung smartphone, ung dung mobile, viet ung dung mobile, ung dung android, viet ung dung android, ung dung ios, viet ung dung ios, ung dung blackberry, viet ung dung blackberry, ung dung windows phone, viet ung dung windows phone, ung dung tablet, viet ung dung tablet, ung dung iphone, viet ung dung iphone, ung dung ipad, viet ung dung ipad

Share on Google Plus

About Mobile Solution

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Đăng nhận xét