Giới Thiệu Chrome Developer Tools

Giới thiệu về Google Chrome
Phiên bản beta chạy trên Microsoft Windows được phát hành ngày 2 tháng 9 năm 2008 với 43 ngôn ngữ. Đến tháng 6 năm 2011, trình duyệt này đã trở thành trình duyệt thông dụng thứ ba trên toàn cầu. Chỉ sau Firefox và Internet Explorer và chiếm khoảng 16,5% thị phần trình duyệt web thế giới. Phiên bản Chrome cho hệ điều hành Mac OS X và Linux được phát hành vào tháng 6 năm 2009. (Trích từ nguồn Wikipedia)

Hiện tại thì Google Chrome là trình duyệt phổ biến nhất thế giới với thị phần chiếm hơn 46.26% (Theo thống kê của StatCounter và tháng 08/2014). Phiên bản mới nhất của Google Chrome là 40.0 (phiên bản beta) được phát hành vào 9 tháng 10 năm 2014.

Nguyên nhân Google Chrome trở thành trình duyệt phổ biến nhất trên thế giới có rất nhiều yếu tố:

• Giao diện hiện đại, thân thiện với người dùng.
• Bảo mật tốt và thường xuyên cập.
• Hỗ trợ gần như đầy đủ HTML 5 và CSS 3.
• Hỗ trợ tốt và tối đa cho lập trình viên với Google DevTools.
• Hệ thống Plugin và Add-on rất phong phú và đa dạng.
• Tối ưu tốc độ tải trang.

Đó chỉ là một số yếu tố cơ bản tạo thành sự phát triển mạnh mẽ của Google Chrome. Các bạn có thể xem qua thông tin giới thiệu chi tiết của Google Chrome tại đây: http://vi.wikipedia.org/wiki/Google_Chrome

Giới thiệu về Chrome DevTools
Chrome Developer Tools hay được gọi tắt là Chrome DevTools. Đây là một bộ công cụ được xây dựng sẵn trong Chrome, hỗ trợ cho lập trình viên trong việc theo dõi, xây dựng và debug trên website của mình.

Web development tools được phát triển từ rất sớm, nhưng đều là những plug-in hoặc add-on từ phía thứ 3 được cài vào trình duyệt. Nắm bắt được những khó khăn và nhu cầu của lập trình viên. Đội ngũ phát triển Chrome đã tích hợp luôn Web development tools và bên trong của Chrome.

Hiện tại thì hầu hết các trình duyệt đều đã có Build-in DevTools cho mình

• Google Chrome -Web Developer Tools
• Internet Explorer – F12 Web Developer Tools
• Safari – Safari Web Development Tools
• Firefox – Web Developer Toolbar
• Opera – Opera Dragonfly

Trong bài viết này thì tôi sẽ tập trung nói về các tính năng của Chrome DevTools.

Mở Chrome DevTools
Các bạn có thể dễ dàng mở Chrome DevTools với nhiều cách khác nhau. Nhưng đơn giản nhất vẫn là cách nhấp phím tắt F12 (hoặc Ctrl+Shift+I). Nếu các bạn muốn tiện hơn nữa, chúng ta có thể dễ dàng nhấp chuột phải và bất kỳ vị trí nào trên website của mình và chọn Inspect Element (Kiểm tra phần tử)

Các công cụ trong Chrome DevTools
Trong DevTools có 9 bộ công cụ với các chức năng khác nhau, giúp cho lập trình viên có thể dễ dàng chỉnh sửa, phân tích, đánh giá website của mình. Mỗi công cụ được thể hiện trong 1 tab riêng biệt, các bạn có thể nhanh chóng di chuyển qua lại các tab bằng cách nhấp chuột hoặc dùng phím tắt Ctrl+[ hoặc Ctrl+].

Sau đây là các Tab chức năng phổ biến của DevTools

• Elements – Xem, kiểm tra, chỉnh sửa các phần tử (html, css) trên website.
• Resources – Quản lý các API được dùng trong website (Frames, Web SQL, Session, Cookie,…).
• Network – Kiểm tra tốc độ tải trang của từng tài nguyên có sử dụng trong website.
• Sources – Quản lý và kiểm tra các tài nguyên (hình ảnh, javascript,….) được dùng trên website.
• Console – Hiển thị lỗi (error) trong quá trình phát triển hoặc in các thông tin cần thiết (console.log) cho nhà phát triển kiểm tra.

Ngoài ra, còn một số tab chức năng khác, nhưng ít dùng và không được phổ biến cho lắm (Timeline, Profiles, Audits)

Elements
Hiển thị mã HTML của website đưới dạng DOM tree. DevTools cho phép chúng ta có thể xem, thay đổi, sửa, thêm thông tin cho phù hợp với nhu cầu của lập trình viên. Với Tab Elements, lập trình viên có thể dễ dàng theo dõi các thuộc tính css được gắp trong một thẻ html nào đó, có thể thêm thuộc tính css hoặc xóa, sửa thuộc tính đã có sẵn.

Console
Tab console cho chúng ta biết được

• Những lỗi mà website mắc phải, thông thường là lỗi javascript hoặc các lỗi không tìm thấy resource.
• Hiển thị các thông tin mà lập trình viên muốn hiển thi khi dùng console.log()

Với những tiện ích đó, tab console giúp cho chúng ta có thể nhanh chóng debug tìm ra lỗi và sửa chúng.

Network
Cung cấp thông tin về thời gian tải website. Tất nhiên, tab network cung cấp thông tin rất chi tiết, nó hiển thị thời gian tải tất cả các resource có dùng trong website của bạn. Với các thông tin được cung cấp, bạn sẽ có thể chuẩn đoán xem resource nào làm hao tổn thời gian tải trang và chúng ta có thể cải thiện.

Lời kết
Đó là một số thông tin cơ bản về Chrome DevTools. Trong các bài viết tiếp theo, tôi sẽ hướng dẫn các bạn cách sử dụng một cách chi tiết các công cụ của Chrome DevTools. Mục tiêu chính là cải thiện tốc độ làm việc và nâng cao hiệu suất khi làm việc với Google Chrome.