Tôi muốn nhận thông tin mới nhất từ Aptech      
 
   
 
CHƯƠNG TRÌNH ĐÀO TẠO

LTV QUỐC TẾ ACCP
CHỈ CÓ TẠI CNC
CÁC KHÓA NGẮN HẠN

BỘ TÍNH NĂNG CỦA CHROME DEVELOPER TOOLS

Chrome Developer Tools là công cụ vô cùng tiện dụng, hỗ trợ lập trình viên trong việc theo dõi, xây dựng và sửa lỗi trên website của mình.

Hãy cùng CNC Aptech tìm hiểu tính năng của Chrome Developer Tools.

8 Tính năng của Chrome Developer Tools

Để mở tính năng này cách dơn giản nhất là bấm F12, hoặc tổ hợp phím Ctrl + Shift + J.

Tinh nang cua Chrome Developer Tools

1. Elements

Tab này hiển thị HTML của các element trong trang web. Trước khi có Developer Tools, ta phải sửa CSS, save lại rồi refresh lại page. Ngày nay, ta có thể sửa trực tiếp CSS của 1 element vào khung phía bên phải, xem kết quả ngay lập tức. (Đây là một chức năng khá hay có từ add-on Firebug của Firefox, được các web developer/web designer dành tặng vô số lời khen).

Ngoài ra, nếu phải thiết kế web responsive, ta cũng có thể click vào icon mobile để test trang web trên màn hình các device với độ phân giải khác nhau.

2. Networks

Ở tab này, ta có thể xem toàn bộ những thứ được trình duyệt tải về từ server: HTML, CSS, JS, hình ảnh, … Mình thường dùng tab này để xem thời gian tải trang, nhằm optimize và tăng tốc độ.

Các AJAX request cũng hiện trong Tabs này. Bạn có thể bấm vào từng request riêng lẻ để xem thời gian request chạy, request đã gửi gì lên server, kết quả trả về từ server. Đôi khi sử dụng AJAX nhưng code không chạy, mình phải sử dụng tab này để xem lỗi là gì, xảy ra ở client hay server.

3. Sources

Tab này hiển thị những file javascript được trình duyệt load.

Ở tab này, ta có thể debug xem javascript chạy như thế nào. Với các ứng dụng sử dụng nhiều javascript hoặc dùng các library/framework như jQuery, AngularJS, ta có thể vào tab này, đặt breakpoint và debug như các IDE thông thường.

Có một mẹo nhỏ khi debug: Nếu các bạn code trong các trang fiddle, hoặc làm việc với quá nhiều file, thư viện vài ngàn dòng, không thể đặt breakpoint bằng tay… hãy thêm dòng lệnh “debugger” vào sau dòng code cần debug. Bộ Debugger của Developer Tools sẽ tự xem dòng lệnh này là breakpoint, dừng ở câu “debugger” cho bạn debug

4 & 5. Timeline & Profile

Khi javascript chạy quá chậm, developer sẽ sử dụng 2 tabs này để tìm hiểu function nào chạy chậm, nhằm optimize lại code và tăng tốc cho trang.

6. Resources

Tab này hiển thị những thông tin được lưu trữ trong WebSQL, LocalStorage, SessionStorage, Cookies. Khi sử dụng những cơ chế trên để lưu dữ liệu người dùng, ta có thể vào tab này để kiểm tra.

7. Audits

Tab này có chức năng kiểm duyệt tốc độ của website, đưa ra những lời khuyên để tăng tốc. Vào Tab này và bấm Run, Developer Tool sẽ tiến hành đo đạc, so sánh tốc độ load của Web Site, kiểm tra xem Website đã được tối ưu hay chưa, sau đó đưa ra những cách tăng tốc. Một chức năng khá hay và thú vị.

8. Console

Những lỗi liên quan tới javascript (không load được, thiếu mở đóng ngoặc, chấm phẩy, …) sẽ hiển trị trong tab này. Ta có thể nhập trực tiếp javascript vào tab này để chạy.

Nhờ khả năng chạy trực tiếp javascript, ta có thể làm rất nhiều trò “thú vị” với tab Console. 

Như vậy, các bạn đã biết tính năng của Chrome Developer Tools. Hãy sử dụng công cụ tiện ích của Chrome dành cho web developer nhé.

Nguồn: tổng hợp