Công cụ của Chrome cho nhà phát triển là một bộ công cụ cho nhà phát triển web được tích hợp trực tiếp vào trình duyệt Google Chrome. Công cụ cho nhà phát triển có thể giúp bạn chỉnh sửa trang một cách nhanh chóng và chẩn đoán vấn đề nhanh chóng, qua đó giúp bạn xây dựng trang web tốt hơn và nhanh hơn.
Hãy xem video để xem bản minh hoạ trực tiếp về quy trình làm việc chính của Công cụ cho nhà phát triển, bao gồm cả cách gỡ lỗi CSS, tạo nguyên mẫu cho CSS, gỡ lỗi JavaScript và phân tích hiệu suất tải.
Mở Công cụ cho nhà phát triển
Có nhiều cách để mở Công cụ cho nhà phát triển vì mỗi người dùng muốn có quyền truy cập nhanh vào những phần khác nhau trên giao diện người dùng của Công cụ cho nhà phát triển.
- Để làm việc với DOM hoặc CSS, hãy nhấp chuột phải vào một phần tử trên trang rồi chọn Kiểm tra để chuyển đến bảng điều khiển Phần tử. Bạn cũng có thể nhấn tổ hợp phím Command+Option+C (máy Mac) hoặc Control+Shift+C (Windows, Linux, ChromeOS).
- Để xem các thông báo đã ghi hoặc chạy JavaScript, hãy nhấn tổ hợp phím Command+Option+J (máy Mac) hoặc Control+Shift+J (Windows, Linux, ChromeOS) để chuyển thẳng vào bảng điều khiển Console (Bảng điều khiển).
Xem bài viết Mở Công cụ của Chrome cho nhà phát triển để biết thêm thông tin chi tiết và quy trình công việc.
Bắt đầu
Nếu bạn là nhà phát triển web có nhiều kinh nghiệm, thì sau đây là những điểm bắt đầu mà bạn nên bắt đầu để tìm hiểu cách Công cụ cho nhà phát triển có thể cải thiện năng suất của bạn:
- Xem và thay đổi DOM
- Xem và thay đổi CSS
- Gỡ lỗi JavaScript
- Xem thông báo và chạy JavaScript trong Bảng điều khiển
- Tối ưu hoá tốc độ của trang web
- Kiểm tra hoạt động mạng
Tìm hiểu Công cụ cho nhà phát triển
Giao diện người dùng của Công cụ cho nhà phát triển có thể hơi choáng ngợp... có quá nhiều thẻ! Tuy nhiên, nếu dành thời gian làm quen với từng thẻ để hiểu những gì có thể, bạn có thể khám phá ra rằng Công cụ cho nhà phát triển có thể tăng đáng kể năng suất của bạn.
Chế độ thiết bị
Mô phỏng thiết bị di động.
Bảng điều khiển Phần tử
Xem và thay đổi DOM và CSS.
- Bắt đầu xem và thay đổi DOM
- Bắt đầu xem và thay đổi CSS
- Chỉnh sửa CSS
- Chỉnh sửa DOM
- Tìm CSS không hợp lệ, bị ghi đè, không hoạt động và các CSS khác
- Xác định những điểm cải thiện tiềm năng về CSS
- Mô phỏng các giao diện sáng/tối, độ tương phản và các tính năng đa phương tiện khác của CSS
- Tìm CSS không dùng đến
- Kiểm tra ảnh động
Bảng điều khiển
Xem thông báo và chạy JavaScript trong Bảng điều khiển.
- Làm quen với Console
- Tài liệu tham khảo về API Tiện ích Console
- Tài liệu tham khảo về API của Bảng điều khiển
Bảng điều khiển Nguồn
Gỡ lỗi JavaScript, duy trì các thay đổi được thực hiện trong Công cụ cho nhà phát triển sau khi tải lại trang, lưu và chạy các đoạn mã JavaScript, cũng như lưu các thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển vào các nguồn cục bộ.
- Bắt đầu gỡ lỗi JavaScript
- Tạm dừng mã bằng các điểm ngắt
- Chỉnh sửa và lưu tệp trong không gian làm việc
- Chạy đoạn mã JavaScript
- Tài liệu tham khảo về cách gỡ lỗi JavaScript
- Ghi đè cục bộ nội dung web và tiêu đề phản hồi HTTP
Bảng điều khiển mạng
Xem và gỡ lỗi hoạt động mạng.
Bảng điều khiển Máy ghi âm
Ghi lại, phát lại và đo lường luồng người dùng.
- Ghi lại, phát lại và đo lường luồng người dùng
- Tuỳ chỉnh Máy ghi âm bằng các tiện ích
- Tài liệu tham khảo về các tính năng của Máy ghi âm
Bảng điều khiển hiệu suất
Tìm cách cải thiện hiệu suất tải và thời gian chạy.
- Tối ưu hoá tốc độ của trang web
- Phân tích hiệu suất trong thời gian chạy
- Tài liệu tham khảo về các tính năng hiệu suất
Bảng điều khiển bộ nhớ
Tìm và khắc phục các vấn đề về bộ nhớ ảnh hưởng đến hiệu suất của trang, ví dụ: rò rỉ bộ nhớ.
Bảng điều khiển ứng dụng
Kiểm tra tất cả tài nguyên đã tải, bao gồm cơ sở dữ liệu IndexedDB hoặc Web SQL, bộ nhớ cục bộ và phiên, cookie, Bộ nhớ đệm ứng dụng, hình ảnh, phông chữ và biểu định kiểu.
- Gỡ lỗi ứng dụng web tiến bộ
- Xem và chỉnh sửa bộ nhớ cục bộ
- Xem, thêm, chỉnh sửa và xoá cookie
- Xem thông tin về bản dùng thử theo nguyên gốc
Bảng điều khiển bảo mật
Gỡ lỗi các vấn đề về nội dung hỗn hợp, vấn đề về chứng chỉ và nhiều vấn đề khác.
Cộng đồng
Gửi báo cáo lỗi và yêu cầu về tính năng trong Crbug – công cụ theo dõi lỗi của nhóm kỹ thuật.
Nếu bạn muốn thông báo cho chúng tôi về yêu cầu về lỗi hoặc tính năng nhưng không có nhiều thời gian, bạn có thể gửi một tweet đến @ChromeDevTools. Chúng tôi thường xuyên trả lời và gửi thông báo từ tài khoản này.
Để được trợ giúp về việc sử dụng Công cụ cho nhà phát triển, Stack Overflow là kênh tốt nhất.
Để báo cáo lỗi hoặc yêu cầu về tính năng trên tài liệu về Công cụ cho nhà phát triển, hãy mở một vấn đề trên GitHub.
Công cụ cho nhà phát triển cũng có kênh Slack, nhưng nhóm không giám sát kênh một cách nhất quán.