Sức mạnh của Chrome Developer Tools

0

Với mọi ngờiời hiện nay và đặc biệt là với các lập trình viên, trình duyệt được chúng ta tiếp xúc hẳng ngày, và Chrome là một trình duyệt được dùng rất nhiều, vì nó có sở hữu bộ Tools cực kì mạnh mẽ. Trong bài này AD sẽ giới thiệu một số tính năng của nó. Bài viết có lẽ thực sự có giá trị với những bạn làm coder hay developer (Dù là C#, Java, PHP,miễn là front-end thì bạn đều xài Chrome Developer Tools cả).

Để mở cửa số Developer Tools, ta ấn Ctrl + Shift + J. Nếu sử dụng Developer Tools để debug CSS, có thể nhấp chuột phải vài một element, chọn Inspect Element.

Chrome Developer
Chrome Developer

Giao diện có thể hơi khác qua các phiên bản Chrome.

1. Elements

Phần này sẽ hiển thị HTML của các element mà trang web đó có. Bình thường ta sẽ phải edit CSS rồi F5 web nhưng bây giờ ta có thể sửa luôn và xem được kết quả lập tức.

Ta có thể click vào hình điện thoại để xem web có respondsive không 😀

Chrome Developer
Chrome Developer

2. Networks

Tab này giúp ta có thể xem được các thành phần được load trong trang để tùy chỉnh tăng tốc độ trang web.

Chrome Developer
Chrome Developer

 

Tab naày cũng sẽ hiện luôn AJAX. Bấm vào từng cái sẽ giúp bạn có thể xem được thời gian request chạy, request đã gửi gì lên server, kết quả trả về từ server. Tab này cũng sẽ giúp ta xem được lỗi liên quan đến AJAX

Chrome Developer
Chrome Developer

3. Chrome Developer và Sources

Hiển thị các file JS được load bởi trình duyệt

Với các app load nhiều js hay library/framework như jQuery, AngularJS, ta có thể vào tab này, đặt breakpoint và debug.

Chrome Developer
Chrome Developer

4. Timeline & Profile 

Tab này giúp dev tùy biến trang cho nhanh hơn

Chrome Developer
Chrome Developer

5. Resources 

WebSQL, LocalStorage, SessionStorage, Cookies.Ta có thể vào đây để kiểm tra các thành phần trên

6

6. Audits 

Chức năng giúp chúng ta đo đạc tốc độ website và đưa ra các lời khuyên để có thể tăng tốc

Chrome Developer
Chrome Developer

7. Console 

Những lỗi liên quan tới javascript sẽ được hiển trị ở đây. Ta có thể nhập trực tiếp javascript vào tab này để chạy.

Chrome Developer
Chrome Developer

Leave A Reply

Your email address will not be published.