Giới thiệu về Công cụ dành cho nhà phát triển Chrome, phần 1

Giới thiệu

Google Chrome là một trình duyệt web phong phú và mạnh mẽ, tiên phong trong việc khai thác các ứng dụng trên web. Google đã nỗ lực để mang đến cho người dùng cuối trải nghiệm duyệt web rất nhanh, rất ổn định và có nhiều tính năng. 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ó trong Chrome và Safari, cho phép nhà phát triển web và lập trình viên truy cập sâu vào các thành phần bên trong trình duyệt và ứng dụng web của họ.

Công cụ dành cho nhà phát triển là một phần của dự án Webkit nguồn mở. Hầu hết nội dung thảo luận trong bài viết này đều á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, vì vậy, trình duyệt của bạn có thể có một số khác biệt nhỏ.

Trong bài viết này, chúng ta sẽ tìm hiểu tổng quan về Bộ công cụ dành cho nhà phát triển và chỉ ra các tính năng phổ biến và hữu ích nhất của bộ công cụ này. Đối tượng mục tiêu của chúng tôi là những nhà phát triển web chưa biết 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 là một nhà phát triển web giàu kinh nghiệm, bạn vẫn sẽ học được một vài mẹo.

Nếu phiên bản Bộ công cụ dành cho nhà phát triển của bạn không khớp với ảnh chụp màn hình trong bài viết này, bạn nên nâng cấp lên phiên bản 5 để có thể làm theo và sử dụng tất cả các tính năng được mô tả ở đây.

Tổng quan

Nhìn chung, có 8 nhóm công cụ chính trong Công cụ dành cho nhà phát triển và các tính năng này đang được mở rộng với 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, tiến trình, hồ sơ, bộ nhớ, quy trình kiểm tra và bảng điều khiển.

Thành phần

Thẻ Phần tử.
Thẻ Phần tử

Công cụ Phần tử cho phép bạn xem trang web theo cách trình duyệt xem. Tức là khi 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 với một trong hai theo thời gian thực.

Tài nguyên

Thẻ Tài nguyên.
Thẻ Tài nguyên

Sử dụng công cụ Tài nguyên để tìm hiểu những thành phần mà trang web hoặc ứng dụng của bạn đang yêu cầu từ máy chủ web, thời lượng của các yêu cầu này và băng thông cần thiết. Bạn cũng có thể xem yêu cầu HTTP và tiêu đề phản hồi cho từng tài nguyên. Công cụ Tài nguyên là công cụ hoàn hảo để giúp bạn tăng tốc thời gian tải trang.

Tập lệnh

Thẻ Tập lệnh.
Thẻ Tập lệnh

Để xem bên trong JavaScript của 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 đầy đủ tính năng. Bạn thậm chí có thể thay đổi JavaScript ngay lập tức!

Dòng thời gian

Thẻ Dòng thời gian.
Thẻ Dòng thời gian

Để phân tích tốc độ và thời gian nâng cao, công cụ Dòng thời gian cung cấp thông tin chi tiết về nhiều hoạt động diễn ra trong nền của Chrome. Bạn có thể tìm hiểu thời gian mà trình duyệt cần để xử lý các sự kiện DOM, kết xuất bố cục trang và vẽ cửa sổ.

Hồ sơ

Thẻ Hiệu suất.
Thẻ Hiệu suất

Công cụ Hồ sơ giúp bạn ghi lại 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à xác định chính xác vị trí cần tối ưu hoá.

Bộ nhớ

Thẻ Bộ nhớ.
Thẻ Bộ nhớ

Các ứng dụng web hiện đại đòi hỏi nhiều tính năng lưu trữ hơn so với chỉ cookie. 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

Thẻ Kiểm tra.
Thẻ Kiểm tra

Công cụ Kiểm tra giống như có một chuyên gia tư vấn tối ưu hoá trang web riêng đang ngồi bên cạnh bạn. Công cụ này có thể phân tích một trang khi trang đó tải và đưa ra các đề xuất cũng như biện pháp 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

Thẻ Bảng điều khiển.
Thẻ Bảng điều khiển

Cuối cùng nhưng không kém phần quan trọng, Công cụ dành cho nhà phát triển cung cấp một Bảng điều khiển đầ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 theo phương thức lập trình.

Khởi động

Bạn có thể dễ dàng khởi động Công cụ dành cho nhà phát triển trong Chrome.

Đối với bất kỳ hệ điều hành nào, bạn chỉ cần nhấp chuột phải vào phần tử bất kỳ trong trang rồi chọn tuỳ chọn "Kiểm tra phần tử" trong trình đơn theo bối cảnh. Thao tác này sẽ mở Công cụ cho nhà phát triển và chuyển đến phần tử bạn đã nhấp vào.

Để xem cách hoạt động của tính năng này, hãy truy cập vào http://www.google.com trong Trình duyệt Chrome. Nhấp chuột phải vào biểu trưng Google, bạn sẽ thấy các tuỳ chọn sau:

Mở trình kiểm tra.
Mở trình kiểm tra

Khi chọn "Inspect Element" (Kiểm tra phần tử), Công cụ cho nhà phát triển sẽ xuất hiện như sau:

Bên trong trình kiểm tra phần tử.
Bên trong trình kiểm tra phần tử

Hãy lưu ý cách Công cụ dành cho nhà phát triển mở ra bên trong thẻ Elements (Thành phần) và tự động đi sâu vào cũng như làm nổi bật thẻ <img> cho biểu trưng Google. Điều này rất hữu ích khi bạn muốn biết HTML nào đã tạo 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ử những cách sau:

  • Trên Windows và Linux, hãy chọn 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ụ trong trình đơn chính của trình duyệt.

Trên máy Mac, trên 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.

Mở Công cụ dành cho nhà phát triển trên máy Mac.
Mở Công cụ cho nhà phát triển trên máy Mac

Trên máy tính 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ụ dành cho nhà phát triển.

Mở Công cụ dành cho nhà phát triển trên Windows.
Mở Công cụ cho nhà phát triển trên Windows

Giờ thì bạn đã mở và sẵn sàng sử dụng Công cụ cho nhà phát triển, 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.

Thành phần

Chọn thẻ Phần tử.
Chọn thẻ Elements (Thành phần)

Thẻ đầu tiên trong Công cụ dành cho nhà phát triển là Thành phần. Đây là cửa sổ cho bạn thấy cấu trúc của trang web, được trình duyệt hiển thị.

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ã nhận dạng HTML hay không và giá trị của thuộc tính đó là gì.

Đôi khi, thẻ Elements (Thành phần) là cách tốt hơn để "xem nguồn" của một trang. Bên trong thẻ Elements (Phần tử), DOM của trang sẽ được định dạng đẹp mắt, dễ dàng cho bạn thấy các phần tử HTML, phần tử mẹ và phần tử con của chúng. Thông thường, các trang bạn truy cập sẽ có HTML được rút gọn hoặc đơn giản là xấu xí, khiến bạn khó xem cấu trúc của trang. Thẻ Phần tử là giải pháp để xem cấu trúc cơ bản thực sự của trang.

Ví dụ: sau đây là kết quả của lệnh "xem nguồn" trên trang chủ của Google.

Nguồn rút gọn của Google.com.
Nguồn rút gọn của Google.com

Bạn sẽ khó đọc nguồn ở trên vì nguồn này được tối ưu hoá và rút gọn. Định dạng này phù hợp với máy khách và máy chủ nhưng khó khăn đối với nhà phát triển!

Thay vào đó, khi bạn muốn đọc nguồn của một trang, hãy sử dụng Thẻ phần tử để xem hệ phân cấp phần tử được in đẹp mắt, được làm nổi bật cú pháp.

Trình kiểm tra phần tử in đẹp HTML.
Trình kiểm tra phần tử in đẹp HTML

Thẻ Phần tử cũng cho phép bạn duyệt xem, 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 xem kiểu

Bản chất xếp tầng của CSS khiến trình duyệt Kiểu trong thẻ Phần tử trở nên rất hữu ích. Đôi khi, các kiểu tự thu gọn và hình ảnh ngoài ý muốn xuất hiện. Việc biết trình duyệt đang áp dụng quy tắc tạo kiểu nào cho phần tử sẽ giúp bạn gỡ lỗi vấn đề như vậy.

Khi nhấp vào bất kỳ phần tử nào trong thẻ Phần tử, bạn sẽ thấy tất cả các kiểu được đính kèm vào phần tử đó.

Kiểu CSS trong trình kiểm tra.
Kiểu CSS trong trình kiểm tra

Bạn sẽ thấy trong ảnh chụp màn hình ở trên, chúng ta có thể biết tất cả các thuộc tính kiểu đang được áp dụng. Ví dụ: khoảng đệm đến trực tiếp từ thuộc tính kiểu của phần tử <img>. Tuy nhiên, chiều rộng và chiều cao đến từ các thuộc tính gốc tương ứng. Điều thú vị là bạn có thể nhận thấy có các kiểu cũng được kế thừa từ thẻ <center>, thẻ <body> và các thẻ khác.

Mặc dù rất tuyệt khi xem các kiểu riêng lẻ và nguồn gốc của các kiểu đó, nhưng bạn cũng nên xem bộ kiểu cuối cùng sau khi bộ kiểu đó được tính toán và áp dụng cho phần tử. Bạn có thể xem sản phẩm hoàn thiện bằng cách chọn trình đơn Kiểu được tính toán, như trong ảnh chụp màn hình bên dưới.

Các kiểu đã tính toán của trình duyệt cũng sẽ xuất hiện.
Các kiểu đã tính toán của trình duyệt cũng sẽ xuất hiện.

Tiếp theo, chúng ta sẽ xem xét ngắn gọn các tính năng khác do Thẻ phần tử cung cấp. Chúng tôi sẽ trình bày chi tiết hơn về những nội dung sau trong các bài viết sau này.

Mô hình hộp

Bạn có thể xem mô hình hộp khi mô hình này được áp dụng cho phần tử đã chọn bằng cách chọn trình đơn Chỉ số:

Xem mô hình hộp của một phần tử.
Xem mô hình hộp của một phần tử

Thuộc tính phần tử

Bạn có thể xem tất cả thuộc tính của phần tử, như JavaScript và DOM sẽ thấy, bằng cách chọn trình đơn Thuộc tính:

Xem các thuộc tính của Phần tử DOM.
Xem các thuộc tính của Phần tử DOM.

Trình xử lý sự kiện

Cuối cùng, bạn thậm chí có thể thấy trình nghe sự kiện được đính kèm vào hoặc bong bóng qua thành phần thông qua trình đơn Trình nghe sự kiện:

Xem trình nghe sự kiện Phần tử DOM.
Xem trình nghe sự kiện Phần tử DOM.

Tóm tắt

Có rất nhiều chức năng có sẵn thông qua Thẻ thành phần và các bài viết sau này sẽ đi sâu hơn vào từng trình đơn.

Bạn nên sử dụng Thẻ phần tử khi muốn xem trang trông như thế nào đối với chính trình duyệt. Các vấn đề thường gặp như "kiểu này được tính toán như thế nào?" hoặc "thẻ HTML nào đã tạo thành phần này?" sẽ được giải đáp nhanh chóng và dễ dàng thông qua Thẻ phần tử.

Hãy coi Thẻ phần tử như một "view source" (xem nguồn) siêu cấp và có được thông tin chi tiết rất rõ ràng về trang của bạn.

Sau khi kiểm tra trang, bạn có thể thắc mắc làm cách nào HTML, CSS và hình ảnh lại xuất hiện ở đó. Thẻ Tài nguyên (Resources) được 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

Sau khi ứng dụng của bạn 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 chuyển ứng dụng từ máy chủ sang máy khách một cách nhanh chóng và hiệu quả nhất có thể. Người dùng sẽ cảm ơn bạn vì tốc độ tải trang nhanh, bạn sẽ tiết kiệm được tiền cho 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 tính đến tốc độ trang web).

Thẻ Tài nguyên trong Công cụ dành cho nhà phát triển là cửa sổ để bạn xem thông tin 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 đáng ngạc nhiên!), thời gian 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 ảnh hưởng đến hiệu suất tải trang, vì vậy, thẻ này bị tắt theo mặc định. Trong lần đầu truy cập vào chức năng này, bạn cần bật chức năng này cho trang mà bạn đang xem.

Bật tính năng theo dõi tài nguyên.
Bật tính năng theo dõi tài nguyên.

Bạn nên chọn chế độ mặc định "Chỉ bật cho phiên này" vì bạn không muốn phải chịu một mức phạt nhỏ về hiệu suất một cách không cần thiế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 và 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 cho thấy các tài nguyên cần thiết và được tải cho trang chủ Google.

Tính năng theo dõi tài nguyên của Google.com.
Tính năng theo dõi tài nguyên của Google.com.

Có rất nhiều thông tin trên màn hình này, vì vậy, hãy xem từng phần.

Hành vi mặc định là cho bạn biết thời gian cần thiết để yêu cầu và tải tất cả tài nguyên cho trang. Bạn có thể sẽ ngạc nhiên khi cuộn xuống danh sách Tài nguyên, vì có thể bạn không biết ứng dụng khách đang thực hiện bao nhiêu yêu cầu riêng lẻ. Số lượng yêu cầu lớn từ ứng dụng có thể ảnh hưởng nghiêm trọng đến hiệu suất. Việc nắm được chính xác nội dung được yêu cầu là bước đầu tiên để tối ưu hoá và cuối cùng là giảm tài nguyên.

Nếu chỉ quan tâm đến hình ảnh hoặc trang kiểu, bạn có thể lọc loại tài nguyên bằng trình đơn ngay trong cửa sổ thẻ chính.

Chỉ xem tài nguyên hình ảnh.
Chỉ xem tài nguyên hình ảnh.

Bạn cũng sẽ tìm hiểu thứ tự yêu cầu tài nguyên. Khi sử dụng chế độ xem theo dòng thời gian, bạn có thể hiểu rõ hơn lý do một số thành phần trên trang xuất hiện muộn hơn các thành phần khác.

Sau khi nắm được thông tin tổng quan về tất cả tài nguyên được yêu cầu và cách các tài nguyên này tạo nên toàn bộ tiến trình yêu cầu, bạn nên xem chi tiết từng tài nguyên.

Nếu bạn nhận thấy một số tài nguyên đang được yêu cầu mỗi khi truy cập vào trang, thì đó là dấu hiệu cho thấy tiêu đề lưu vào bộ nhớ đệm của bạn chưa được định cấu hình chính xác. Bạn có thể xem tất 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.

Xem tiêu đề yêu cầu.
Xem tiêu đề yêu cầu.

Sử dụng màn hình Headers (Tiêu đề) để đảm bảo bạn đã đặt Mã phản hồi HTTP dự kiến và cung cấp các tiêu đề thích hợp. Ví dụ: nếu tài nguyên hiếm khi hoặc không bao giờ thay đổi, máy chủ của bạn nên đặt tiêu đề Expires (Ngày hết hạn) trong tương lai xa. Thao tác này sẽ cho trình duyệt biết rằng không nên yêu cầu lại tài nguyên cho đến ngày đó. Điều này giúp 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

Thẻ Tài nguyên còn có nhiều tính năng khác mà chúng ta sẽ đề cập trong một bài viết sau này.

Sử dụng thẻ Tài nguyên để biết cách trình duyệt ứng dụng đ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à thứ tự yêu cầu, bạn có thể tối ưu hoá thông minh để giảm tải máy chủ, chi phí, đồng thời 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. Sau khi bạn giảm số lượng và kích thước tài nguyên, đồng thời các cuộc trò chuyện HTTP thích hợp diễn ra, bước tiếp theo là điều tra và tối ưu hoá các tập lệnh đang chạy trong trang của bạn. May mắn thay, thẻ Tập lệnh (Scripts) sẽ giúp bạn làm điều đó. Chúng ta sẽ thảo luận về thẻ này trong phần tiếp theo.

Tài nguyên khác

Để biết thêm thông tin về Công cụ dành cho nhà phát triển, bạn có thể tham khảo những nội dung sau:

Và tất nhiên, hãy theo dõi html5rocks.com để xem Phần 2 của bài viết này, cùng với nhiều nội dung tuyệt vời khác về HTML5 và Chrome.