Giới thiệu
Google Chrome là một trình duyệt web phong phú và mạnh mẽ, tiên phong trong những điều khả thi của các ứng dụng trên web. Google đã nỗ lực để cung cấp trải nghiệm duyệt web rất nhanh, rất ổn định và nhiều tính năng 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 sẽ 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 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 này được chụp bằng Google Chrome 6, vì vậy có thể có sự khác biệt nhỏ trên trình duyệt của bạn.
Trong bài viết này, chúng ta sẽ tìm hiểu tổng quan về Công cụ cho nhà phát triển và chỉ ra các tính năng phổ biến và hữu ích nhất. Đố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 điều tra Công cụ dành cho nhà phát triển. Tuy nhiên, chúng tôi đảm bảo rằng ngay cả khi bạn là một nhà phát triển web có kinh nghiệm, bạn cũng sẽ chọn được cho mình một vài mẹo.
Nếu phiên bản Công cụ 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 trong bài viết này, chúng tôi khuyên bạn nên nâng cấp lên phiên bản 5 để có thể theo dõi 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ó 8 nhóm công cụ chính trong Chế độ xem Công cụ cho nhà phát triển và các tính năng đó vẫn được mở rộng theo từng bản phát hành. Chrome 5 hiện cung cấp các Phần tử, 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 trình duyệt nhìn thấy trang đó. Tức là 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ụ Resource (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, khoảng thời gian cần thiết cho những yêu cầu này và lượng 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ủa mình. Công cụ Tài nguyên là công cụ lý tưởng để 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 trình gỡ lỗi tập lệnh có đầy đủ tính năng. Bạn thậm chí có thể thay đổi JavaScript một cách nhanh chóng!
Lịch trình
Để nâng cao thời gian và phân tích tốc độ, 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 thời gian trình duyệt cần để 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 nhất để thực thi và không tập trung vào vị trí chính xác cần tối ưu hoá.
Dung lượng lưu trữ
Ứng dụng web hiện đại yêu cầu phải có tính liên tục cao hơn so với chỉ sử dụng cookie và công cụ Bộ nhớ giúp bạn theo dõi, truy vấn và gỡ lỗi bộ nhớ trình duyệt cục bộ. 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ư việc bạn có một chuyên gia tư vấn tối ưu hoá web dành riêng cho mình. Công cụ này có thể phân tích một trang khi trang 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 nhận thấy (và thực tế).
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 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 theo phương thức lập trình với trang của mình.
Đang khởi động
Bạn có thể dễ dàng khởi động Công cụ 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 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à xem chi tiết phần tử bạn đã nhấp vào.
Để xem tính năng này trong thực tế, 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 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 có dạng như sau:
Hãy lưu ý cách Công cụ cho nhà phát triển mở 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ử cụ thể của trang.
Bạn cũng có thể mở Công cụ 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, 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 trình duyệt chính.
Trên máy Mac và từ thanh trình đơn ứng dụng chính, hãy chọn Chế độ xem, Nhà phát triển, Công cụ dành 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ụ dành cho nhà phát triển.
Giờ đây, khi mà Công cụ 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ụ dành cho nhà phát triển là Phần tử. Đây là cửa sổ hiển thị trong cấu trúc của trang web, được hiển thị khi trình duyệt của bạn nhìn thấy nó.
Duyệt qua DOM
Bạn thường truy cập vào thẻ Phần tử khi cần xác định đoạn mã HTML cho khía cạnh nào đó của trang. Ví dụ: Bạn có thể tò mò muốn biết một hình ảnh có thuộc tính HTML id hay không và giá trị của thuộc tính đó là gì.
Thẻ Phần tử đôi khi là một cách hay để "xem nguồn" cho một trang. Bên trong thẻ Phần tử, DOM của trang sẽ được định dạng đẹp mắt, dễ dàng hiển thị cho bạn các phần tử HTML, nguồn gốc và thành phần con của chúng. Quá thường xuyên, các trang bạn truy cập sẽ được giảm kích thước hoặc đơn giản là HTML xấu, khiến bạn khó nhận ra cấu trúc của trang. Thẻ Phần tử là giải pháp để bạn xem cấu trúc cơ bản thực tế của trang.
Ví dụ: sau đây là kết quả từ "xem nguồn" của 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 cho máy khách và máy chủ nhưng lại khó đố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 đánh dấu theo cú pháp, có bản in đẹp.
Thẻ Phần tử cũng cho phép bạn duyệt xem, tương tác và đôi khi thay đổi Kiểu, Chỉ số, Thuộc tính và Trình xử lý sự kiện cho bất kỳ phần tử nào trên trang.
Duyệt qua kiểu
Tính chất xếp tầng của CSS giúp 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 không mong muốn sẽ xuất hiện. Việc biết được quy tắc định kiểu mà trình duyệt đang áp dụng cho phần tử này 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ử, bạn sẽ thấy tất cả các kiểu đính kèm với phần tử đó.
Trong ảnh chụp màn hình ở trên, bạn sẽ thấy 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 được lấy 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 của chúng. Một điều thú vị là bạn có thể biết rằng có các kiểu được kế thừa từ thẻ <center>, thẻ <body> và các kiểu khác.
Mặc dù việc xem từng kiểu riêng lẻ và nguồn gốc của từng kiểu là rất hữu ích, nhưng việc 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ử cũng rất hữu ích. 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 dưới đây.
Tiếp theo, chúng ta sẽ giới thiệu ngắn gọn 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 về những điều sau trong các bài viết sau.
Kiểu hộp
Bạn có thể xem mô hình hộp khi nó đượ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ể xem tất cả thuộc tính của phần tử, như JavaScript và DOM sẽ nhìn 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
Và cuối cùng, bạn thậm chí có thể thấy trình nghe sự kiện được đính kèm hoặc bong bóng qua phần tử thông qua trình đơn Trình xử lý sự kiện:
Tóm tắt
Có rất nhiều chức năng trong thẻ Phần tử và các bài viết trong tương lai 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 hiển thị như thế nào đối với trình duyệt. Các vấn đề phổ biến như "kiểu này được tính 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 qua Thẻ Phần tử.
Hãy coi Thẻ Phần tử như một "nguồn xem" trên uber và có được khả năng hiển thị rất rõ ràng vào trang của bạn.
Sau khi tìm hiểu trang, có thể bạn sẽ thắc mắc về cách thức HTML, CSS và hình ảnh xuất hiện ngay từ đầu. Thẻ Tài nguyên, được mô tả tiếp theo, cho bạn thấy cách trình duyệt ứng dụng khách 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 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 việc chuyển ứng dụng từ máy chủ này sang máy khách khác một cách nhanh chóng và hiệu quả nhất có thể. Người dùng của bạn sẽ cảm ơn bạn vì trang tải nhanh, bạn sẽ tiết kiệm được tiền băng thông và tài nguyên máy chủ, đồng thời bạn cũng sẽ đạt được thứ hạng 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 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ả cá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 cần để nhận chúng từ máy chủ và lượng băng thông sử dụng trong quá trình chuyển.
Trớ trêu thay, việc chạy thẻ Tài nguyên cũng ả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 sử dụng chức năng này, bạn cần phải bật chức năng này cho trang mà mình đang xem.
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ức phạt hiệu suất nhỏ. 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, đồng thời Công cụ cho nhà phát triển sẽ giám sát và hiển thị các tài nguyên đã 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.
Có rất nhiều thông tin trên màn hình này, vì vậy, hãy cùng xem xét từng phần một.
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. Việc di chuyển xuống danh sách Tài nguyên có thể khiến bạn ngạc nhiên vì bạn không biết có bao nhiêu yêu cầu riêng lẻ đang được khách hàng đưa ra. 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 chính xác được yêu cầu là bước đầu tiên để tối ưu hoá và sau cùng là giảm bớt tài nguyên.
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 cách sử dụng trình đơn ngay trong 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. Bằng cách sử dụng hiển thị dòng thời gian, bạn có thể hiểu rõ hơn về lý do một số phần tử nhất định trên trang của mình xuất hiện muộn hơn các phần tử 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 những tài nguyên đó kết hợp 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 rằng một số tài nguyên đang được yêu cầu mỗi khi bạn truy cập trang, đó là dấu hiệu cho thấy tiêu đề 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 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 thiết lập Mã phản hồi HTTP dự kiến 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ờ thay đổi, máy chủ của bạn nên đặt tiêu đề Hết hạn trong tương lai. Điều 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 làm giảm lượng kết nối HTTP cần thiết cho trang của bạn, nhờ đó đẩy nhanh tốc độ trang web của bạn.
Tóm tắt
Còn rất nhiều điều khác về thẻ Tài nguyên. Chúng tôi sẽ đề cập đến nhiều nội dung khác trong bài viết sau.
Sử dụng thẻ Tài nguyên để xem cách trình duyệt ứng dụng khách của bạn 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ể thực hiện các hoạt động tối ưu hoá thông minh để giảm tải và chi phí của máy chủ, đồ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 của bạn 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 và 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 hóa các tập lệnh đang chạy trong trang của bạn. Thật may là thẻ Tập lệnh (được thảo luận tiếp theo) đã giải quyết được việc này.
Nguồn thông tin khác
Để biết thêm thông tin về Công cụ cho nhà phát triển, chúng tôi đề xuất như sau:
- Video và trang 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ụ cho nhà phát triển Chrome
Và tất nhiên, hãy theo dõi html5rock.com cho 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.