Giới thiệu
Google Chrome là một trình duyệt web phong phú và mạnh mẽ, tiên phong về những gì có thể cho các ứng dụng trên web. Google đã nỗ lực làm việc để mang lại trải nghiệm duyệt web phong phú có tính năng rất nhanh, rất ổn định cho người dùng cuối. Google cũng đảm bảo rằng các nhà phát triển như bạn có trải nghiệm tuyệt vời với Chrome. Công cụ dành cho nhà phát triển, được đóng gói và có sẵn trong Chrome và Safari, cho phép các nhà phát triển web và lập trình viên truy cập sâu vào bên trong trình duyệt và ứng dụng web của họ.
Công cụ cho nhà phát triển là một phần của dự án Webkit nguồn mở. Hầu hết các nội dung thảo luận trong bài viết này áp dụng cho cả Google Chrome và Safari. Tuy nhiên, ảnh chụp màn hình được chụp bằng Google Chrome 6 nên trình duyệt của bạn có thể có chút khác biệt.
Trong bài viết này, chúng ta sẽ có chuyến tham quan tổng quan về Công cụ dành cho nhà phát triển và chỉ ra các tính năng hữu ích và phổ biến nhất của công cụ đó. Đối tượng mục tiêu của chúng tôi là các nhà phát triển web chưa biết đến hoặc chưa tìm hiểu về Công cụ dành cho nhà phát triển. Tuy nhiên, chúng tôi chắc chắn rằng ngay cả khi bạn là một nhà phát triển web có kinh nghiệm, bạn sẽ nắm được một hoặc hai mẹo.
Nếu phiên bản Công cụ dành cho nhà phát triển của bạn không hoàn toàn khớp với ảnh chụp màn hình có trong bài viết này, chúng tôi khuyên bạn nên nâng cấp lên 5 để bạn có thể làm theo và nhận được quyền truy cập vào tất cả các tính năng được mô tả ở đây.
Tổng quan
Nhìn chung, có tám nhóm công cụ chính có sẵn trong Công cụ cho nhà phát triển và chúng tôi sẽ mở rộng các chức năng trong mỗi bản phát hành. Chrome 5 hiện cung cấp các Thành phần, Tài nguyên, Tập lệnh, Dòng thời gian, Hồ sơ, Bộ nhớ, Kiểm tra và Bảng điều khiển.
Các phần tử
Công cụ Phần tử cho phép bạn xem trang web theo cách mà trình duyệt nhìn thấy. Tức là, bằng cách sử dụng công cụ Phần tử, bạn có thể xem HTML thô, kiểu CSS thô, Mô hình đối tượng tài liệu và thao tác theo thời gian thực.
Tài nguyên
Sử dụng công cụ Tài nguyên để tìm hiểu xem trang web hoặc ứng dụng của bạn đang yêu cầu những thành phần nào từ máy chủ web, những yêu cầu này mất bao lâu và cần bao nhiêu băng thông. Bạn cũng có thể xem yêu cầu HTTP và tiêu đề phản hồi cho mỗi tài nguyên của mình. Công cụ Tài nguyên là lựa chọn hoàn hảo để giúp bạn tăng tốc thời gian tải trang.
Tập lệnh
Để ngang hàng bên trong JavaScript cho một trang, bạn sẽ sử dụng công cụ Tập lệnh. Tại đây, bạn có thể tìm thấy danh sách các tập lệnh mà trang yêu cầu cùng với một trình gỡ lỗi tập lệnh nổi bật đầy đủ. Bạn thậm chí có thể thay đổi JavaScript một cách nhanh chóng!
Dòng thời gian
Để phân tích thời gian và tốc độ nâng cao, công cụ Dòng thời gian cung cấp thông tin chuyên sâu về các hoạt động hậu trường khác nhau của Chrome. Bạn có thể tìm hiểu xem trình duyệt mất bao lâu để xử lý các sự kiện DOM, hiển thị bố cục trang và vẽ cửa sổ.
Hồ sơ
Công cụ Hồ sơ giúp bạn nắm bắt và phân tích hiệu suất của tập lệnh JavaScript. Ví dụ: bạn có thể tìm hiểu xem hàm nào mất nhiều thời gian thực thi nhất và tập trung vào chính xác vị trí cần tối ưu hoá.
Dung lượng lưu trữ
Các ứng dụng web hiện đại đòi hỏi tính bền vững cao hơn so với cookie đơn thuần. Công cụ Bộ nhớ giúp bạn theo dõi, truy vấn và gỡ lỗi bộ nhớ cục bộ của trình duyệt. Công cụ này có thể hiển thị và truy vấn dữ liệu được lưu trữ trong cơ sở dữ liệu cục bộ, bộ nhớ cục bộ, bộ nhớ phiên và cookie.
Kiểm tra
Công cụ kiểm tra giống như để chuyên viên tư vấn tối ưu hoá trang web của riêng bạn ngồi bên cạnh. Công cụ này có thể phân tích một trang khi trang đang tải, đồng thời cung cấp các đề xuất và tối ưu hoá để giảm thời gian tải trang và tăng khả năng phản hồi được cảm nhận (và thực tế).
Giao diện dòng lệnh
Cuối cùng nhưng không kém phần quan trọng, Công cụ cho nhà phát triển cung cấp Console có đầy đủ tính năng. Trong Bảng điều khiển, bạn có thể nhập JavaScript tuỳ ý và tương tác với trang của mình theo phương thức lập trình.
Khởi động
Thật dễ dàng khởi động Công cụ dành cho nhà phát triển khi đang ở trong Chrome.
Đối với mọi hệ điều hành, bạn chỉ cần nhấp chuột phải vào bất kỳ phần tử nào trong trang và chọn tùy chọn "Kiểm tra phần tử" từ trình đơn theo bối cảnh. Thao tác này sẽ mở Công cụ dành cho nhà phát triển và xem chi tiết phần tử bạn đã nhấp vào.
Để xem cách hoạt động, hãy truy cập http://www.google.com trong Trình duyệt Chrome. Nhấp chuột phải vào biểu trưng Google và bạn sẽ thấy các tuỳ chọn sau:
Chọn "Kiểm tra phần tử" sẽ hiển thị Công cụ cho nhà phát triển, công cụ này sẽ có dạng như sau:
Hãy lưu ý cách Công cụ cho nhà phát triển mở ra bên trong thẻ Phần tử và tự động xem chi tiết cũng như làm nổi bật thẻ <img> cho biểu trưng của Google. Điều này rất hữu ích khi bạn muốn biết HTML nào đã tạo ra một phần tử trang cụ thể.
Bạn cũng có thể mở Công cụ dành cho nhà phát triển bằng một phím tắt đơn giản. Tuỳ thuộc vào hệ điều hành của bạn, hãy thử các cách sau:
- Trên Windows và Linux, hãy chọn các phím
Control-Shift-J. - Trên máy Mac, hãy chọn các phím
Command-Option-J.
Cuối cùng, bạn có thể chọn mở các công cụ từ trình đơn chính của trình duyệt.
Trên máy Mac và từ thanh trình đơn ứng dụng chính, hãy chọn Xem, Nhà phát triển, Công cụ cho nhà phát triển.
Trên máy tính chạy Windows, bạn nên sử dụng trình đơn Trang ở trên cùng bên phải rồi chọn Nhà phát triển, Công cụ cho nhà phát triển.
Giờ đây, khi Công cụ dành cho nhà phát triển đã mở và sẵn sàng, hãy bắt đầu bằng cách khám phá các thành phần trên trang chủ của Google.
Các phần tử
Thẻ đầu tiên trong Công cụ cho nhà phát triển là Phần tử. Đây là cửa sổ dẫn đến cấu trúc của trang web, được trình bày theo cách mà trình duyệt của bạn nhìn thấy.
Duyệt qua DOM
Bạn thường sẽ truy cập vào thẻ Phần tử khi cần xác định đoạn mã HTML cho một số khía cạnh của trang. Ví dụ: bạn có thể tò mò liệu một hình ảnh có thuộc tính mã HTML hay không và giá trị của thuộc tính đó là gì.
Đôi khi, thẻ Phần tử là cách tốt hơn để "xem nguồn" của một trang. Bên trong thẻ Phần tử, DOM của trang sẽ được định dạng đẹp, dễ dàng cho bạn thấy các phần tử HTML, tổ tiên và các con cháu của chúng. Thông thường, các trang bạn truy cập sẽ có HTML bị giảm kích thước hoặc đơn giản là HTML xấu khiến cho việc xem cấu trúc của trang trở nên khó khăn. Thẻ Phần tử là giải pháp để bạn xem cấu trúc thực sự cơ bản của trang.
Ví dụ: sau đây là kết quả từ phần "xem nguồn" trên trang chủ Google.
Khó đọc nguồn ở trên vì nguồn này được tối ưu hoá và giảm kích thước. Định dạng này phù hợp với máy khách và máy chủ nhưng lại khó áp dụng cho nhà phát triển!
Thay vào đó, khi bạn muốn đọc nguồn của trang, hãy sử dụng thẻ Phần tử để xem một hệ phân cấp phần tử được in đẹp, được làm nổi bật theo cú pháp.
Thẻ Phần tử cũng cho phép bạn duyệt qua, tương tác và đôi khi thậm chí thay đổi Kiểu, Chỉ số, Thuộc tính và Trình nghe sự kiện cho bất kỳ phần tử nào trên trang.
Duyệt web theo kiểu
Bản chất xếp tầng của CSS làm cho trình duyệt Kiểu trong tab Phần tử trở nên rất hữu ích. Đôi khi, kiểu dáng tự thu gọn và hình ảnh ngoài ý muốn xuất hiện. Việc biết được quy tắc tạo kiểu mà trình duyệt đang áp dụng cho phần tử sẽ giúp bạn khắc phục vấn đề như vậy.
Khi nhấp vào một phần tử bất kỳ trong thẻ Phần tử, tất cả kiểu được đính kèm với phần tử đó sẽ xuất hiện.
Bạn sẽ thấy trong ảnh chụp màn hình ở trên, chúng ta có thể cho biết tất cả các thuộc tính kiểu đang được áp dụng. Ví dụ: khoảng đệm trực tiếp lấy từ thuộc tính kiểu của phần tử <img>. Tuy nhiên, chiều rộng và chiều cao được lấy từ các thuộc tính gốc tương ứng. Điều thú vị là bạn có thể biết rằng có một số kiểu cũng được kế thừa từ thẻ <center>, thẻ <body> và các kiểu khác.
Mặc dù rất tốt khi xem từng kiểu và nguồn gốc của những kiểu đó, nhưng cũng rất hữu ích khi xem tập hợp kiểu cuối cùng sau khi tính toán và áp dụng cho phần tử. Bạn có thể xem sản phẩm cuối cùng bằng cách chọn trình đơn Kiểu đã tính toán, như trong ảnh chụp màn hình dưới đây.
Tiếp theo, chúng ta sẽ tìm hiểu sơ qua về các tính năng khác do thẻ Phần tử cung cấp. Chúng tôi sẽ đề cập chi tiết hơn đến những nội dung sau trong các bài viết sau này.
Kiểu hộp
Bạn có thể xem mô hình hộp khi mô hình đó được áp dụng cho phần tử đã chọn bằng cách chọn trình đơn Chỉ số:
Thuộc tính phần tử
Bạn có thể thấy tất cả các thuộc tính của phần tử, như JavaScript và DOM sẽ thấy phần tử, bằng cách chọn trình đơn Thuộc tính:
Trình xử lý sự kiện
Cuối cùng, bạn thậm chí có thể thấy các trình nghe sự kiện được đính kèm hoặc xuất hiện bong bóng trò chuyện qua phần tử này qua trình đơn Trình xử lý sự kiện:
Tóm tắt
Thẻ Phần tử cung cấp nhiều chức năng và bạn sẽ tìm hiểu sâu hơn về từng trình đơn trong các bài viết sau này.
Bạn nên sử dụng thẻ Phần tử khi muốn xem trang hiển thị như thế nào trên chính trình duyệt. Các vấn đề thường gặp như "cách tính kiểu này?" hoặc "thẻ HTML nào tạo ra thành phần này?" có thể được giải đáp một cách nhanh chóng và dễ dàng qua Thẻ Phần tử.
Hãy coi thẻ Phần tử như một uber-"xem nguồn" và giúp trang của bạn hiển thị rất rõ ràng.
Sau khi điều tra trang, bạn có thể thắc mắc về cách HTML, CSS và hình ảnh có được ở đó ngay từ đầu. Thẻ Tài nguyên (như mô tả tiếp theo) cho bạn biết cách trình duyệt ứng dụng và máy chủ web giao tiếp để gửi các tài nguyên đó.
Tài nguyên
Khi ứng dụng của bạn đang hoạt động, bước tiếp theo là tối ưu hoá hiệu suất mạng và băng thông. Bạn nên cố gắng thực hiện quá trình chuyển ứng dụng từ máy chủ này sang máy khách khác, càng nhanh và hiệu quả càng tốt. Người dùng của bạn sẽ cảm ơn bạn vì tốc độ tải trang nhanh, bạn sẽ tiết kiệm được băng thông và tài nguyên máy chủ, đồng thời bạn cũng sẽ đạt điểm cao hơn trong thứ hạng kết quả tìm kiếm của Google (hiện có tính đến tốc độ trang web).
Thẻ Tài nguyên trong Công cụ cho nhà phát triển là cửa sổ giao tiếp giữa máy chủ web và trình duyệt ứng dụng. Bạn có thể xem tất cả tài nguyên mà trình duyệt yêu cầu (điều này luôn rất bất ngờ!), thời gian cần để nhận tài nguyên từ máy chủ và lượng băng thông được sử dụng trong quá trình chuyển.
Trớ trêu thay, việc chạy Thẻ Tài nguyên lại ảnh hưởng đến hiệu suất tải trang, vì vậy thẻ này bị tắt theo mặc định. Lần đầu tiên truy cập vào chức năng này, bạn cần bật tính năng này cho trang bạn đang xem.
Bạn nên chọn chế độ cài đặt "Chỉ bật trong phiên này" mặc định vì bạn không muốn chịu hậu quả không đáng kể về hiệu suất. Sau khi bạn nhấp vào "Bật tính năng theo dõi tài nguyên", trang sẽ tải lại và Công cụ cho nhà phát triển sẽ theo dõi cũng như hiển thị các tài nguyên được gửi từ máy chủ.
Ảnh chụp màn hình sau đây hiển thị các tài nguyên cần thiết và được tải cho trang chủ Google.
Có rất nhiều thông tin trên màn hình này, vì vậy, hãy xem xét từng phần.
Hành vi mặc định là cho bạn biết mất bao lâu để yêu cầu và tải tất cả tài nguyên cho trang. Bạn có thể ngạc nhiên khi di chuyển xuống danh sách Tài nguyên vì có thể bạn không biết khách hàng đang đưa ra bao nhiêu yêu cầu riêng lẻ. Một số lượng lớn yêu cầu từ khách hàng có thể ảnh hưởng nghiêm trọng đến hiệu suất. Việc nắm được thông tin về những yêu cầu chính xác là bước đầu tiên để tối ưu hoá và cuối cùng là cắt giảm nguồn lực.
Nếu chỉ quan tâm đến hình ảnh hoặc biểu định kiểu, bạn có thể lọc loại tài nguyên bằng trình đơn ngay dưới cửa sổ thẻ chính.
Bạn cũng sẽ tìm hiểu thứ tự yêu cầu tài nguyên. Khi sử dụng màn hình hiển thị dòng thời gian, bạn có thể hiểu rõ hơn lý do khiến một số thành phần nhất định trên trang của bạn xuất hiện muộn hơn các thành phần khác.
Sau khi có được cái nhìn tổng quan về tất cả tài nguyên được yêu cầu và cách chúng soạn thảo toàn bộ tiến trình của yêu cầu, bạn sẽ muốn xem chi tiết từng tài nguyên.
Nếu bạn nhận thấy rằng một số tài nguyên đang được yêu cầu mỗi khi bạn truy cập vào trang đó, đó là dấu hiệu cho thấy tiêu đề bộ nhớ đệm của bạn đã không được định cấu hình đúng. Bạn có thể xem tất cả các tiêu đề của một tài nguyên bằng cách nhấp vào tài nguyên trong danh sách bên trái.
Sử dụng màn hình Tiêu đề để đảm bảo Mã phản hồi HTTP dự kiến đã được thiết lập và cung cấp tiêu đề thích hợp. Ví dụ: nếu tài nguyên hiếm khi hoặc không bao giờ được thay đổi, máy chủ của bạn nên đặt tiêu đề Hết hạn trong tương lai. Thao tác này sẽ cho trình duyệt biết rằng không nên yêu cầu tài nguyên cho đến ngày đó. Điều này làm giảm số lượng kết nối HTTP cần thiết cho trang của bạn, từ đó tăng tốc trang web.
Tóm tắt
Có rất nhiều thông tin khác trong thẻ Tài nguyên mà chúng tôi sẽ đề cập trong một bài viết sau.
Sử dụng tab Tài nguyên để xem được cách trình duyệt ứng dụng khách của bạn đang giao tiếp với máy chủ web. Bằng cách sử dụng thông tin này, bao gồm thời gian yêu cầu, kích thước yêu cầu và đơn đặt hàng theo yêu cầu, bạn có thể thực hiện các biện pháp tối ưu hoá thông minh để giảm tải máy chủ, chi phí, tăng tốc độ và nâng cao trải nghiệm người dùng.
Tốc độ rất quan trọng đối với trang web, người dùng và công cụ tìm kiếm của bạn. Khi bạn đã giảm số lượng và dung lượng tài nguyên và diễn ra các cuộc trò chuyện HTTP thích hợp, bước tiếp theo là điều tra và tối ưu hóa các tập lệnh đang chạy trong trang của bạn. May mắn thay, thẻ Tập lệnh, được thảo luận tiếp theo, sẽ thực hiện điều đó.
Nguồn thông tin khác
Để biết thêm thông tin về Công cụ dành cho nhà phát triển, chúng tôi có thể đề xuất những nội dung sau:
- Trang trình bày và video trình bày về Công cụ dành cho nhà phát triển Chrome tại Google I/O 2010
- Hướng dẫn về Công cụ dành cho nhà phát triển Chrome
Và tất nhiên, hãy tiếp tục theo dõi html5research.com để xem Phần 2 của bài viết này, cùng với nhiều nội dung HTML5 và Chrome tuyệt vời khác.