Không có trang web nào được xây dựng hoàn hảo. Giống như tất cả các sản phẩm do con người tạo ra, lỗi mã là một phần của quá trình. Đó là lý do tại sao điều quan trọng là phải kiểm tra kỹ lưỡng bất kỳ trang web mới nào mà bạn xây dựng để đảm bảo rằng trang web đó không có lỗi nhất có thể nhằm mang đến cho người dùng của bạn trải nghiệm tốt nhất có thể.
Bạn không nên kiểm tra một trang web mà không thử bộ công cụ DevTools của Google Chrome trước. Chế độ nhà phát triển Chrome cho phép bạn dùng thử và kiểm tra kỹ lưỡng một trang web mới (hoặc một trang hiện có) để tìm và sửa lỗi. Nó cũng có thể cung cấp cho bạn cái nhìn sâu sắc về cách các trang web khác đang chạy, bao gồm cả việc xem mã nguồn.
Dưới đây là mọi thứ bạn cần biết về chế độ nhà phát triển trình duyệt Google Chrome, những công cụ mà nó có và cách sử dụng nó một cách hiệu quả.
Chế độ nhà phát triển Chrome là gì?
Khi chúng tôi đề cập đến chế độ nhà phát triển Chrome, chúng tôi không nói về cùng một chế độ nhà phát triển mà bạn sẽ thấy trên Chromebook. Những gì chúng tôi đang đề cập đến là các công cụ phát triển Chrome mở rộng (được gọi là Google DevTools ) được tích hợp vào chính trình duyệt.
Đây là những công cụ được thiết kế để kiểm tra, phân tích và cố ý phá vỡ (nếu bạn cần) một trang web bạn đã tải trong trình duyệt Google Chrome cho mục đích thử nghiệm. Ở cấp độ cơ bản, bạn có thể sử dụng DevTools để xem mã nguồn của một trang web, cho phép bạn xem qua để xem cách một trang web đã được xây dựng và nó chạy tốt như thế nào.
Tuy nhiên, Google DevTools cung cấp nhiều hơn thế. Bạn có thể sử dụng chế độ nhà phát triển Chrome để thay đổi một trang sau khi trang được tải, chạy các lệnh của bảng điều khiển Google Chrome để kiểm soát và thao tác trang cũng như chạy các bài kiểm tra tốc độ và mạng để theo dõi lưu lượng truy cập web.
Bạn cũng có thể mô phỏng các thiết bị khác, bao gồm các hệ điều hành và độ phân giải màn hình khác nhau, trong chế độ Chrome DevTools. Điều này cho phép bạn xem liệu một trang web có thiết kế web đáp ứng hay không và nơi nội dung và bố cục của trang web sẽ thay đổi tùy thuộc vào độ phân giải hoặc loại thiết bị.
Mặc dù những công cụ này nhắm đến các nhà phát triển hoặc người kiểm tra web chuyên nghiệp, nhưng cũng rất hữu ích cho người dùng Chrome tiêu chuẩn khi biết cách sử dụng bộ DevTools. Nếu bạn gặp sự cố với một trang web mà bạn không thể giải quyết, việc chuyển sang chế độ nhà phát triển Chrome có thể giúp bạn xem sự cố xảy ra với trang web hay với trình duyệt của bạn.
Cách truy cập trình đơn công cụ dành cho nhà phát triển của Google Chrome
Có một số cách bạn có thể truy cập trình đơn Công cụ dành cho nhà phát triển của Google Chrome, tùy thuộc vào công cụ bạn muốn sử dụng.
Phương pháp dễ nhất để thực hiện việc này là từ menu Google Chrome. Để thực hiện việc này, hãy nhấp vào biểu tượng menu ba chấm ở trên cùng bên phải. Từ trình đơn xuất hiện, nhấp vào Công cụ khác> Công cụ dành cho nhà phát triển .
Thao tác này sẽ mở bộ công cụ DevTools trong menu mới ở phía bên phải của cửa sổ hoặc tab Chrome đang mở của bạn.
Bạn cũng có thể thực hiện việc này bằng cách sử dụng phím tắt. Từ PC chạy Windows hoặc Linux, mở trình duyệt Chrome và nhấn F12 Chìa khóa. Bạn cũng có thể nhấn Ctrl + Alt + J hoặc Ctrl + Alt + I trong một cửa sổ hoặc tab Chrome đang mở.
Trên macOS, nhấn F12 hoặc nhấn Option + Command + J hoặc Option + Command + I để mở menu Công cụ dành cho nhà phát triển của Chrome. Thao tác này sẽ mở bảng điều khiển Chrome, với các tùy chọn để chuyển sang các công cụ Chrome khác ở đầu trình đơn DevTools.
Nếu muốn, bạn có thể xem mã nguồn của trang web (mở Phần tử của menu DevTools trong quá trình này) trên bất kỳ trang web đang mở nào bằng cách nhấp chuột phải vào và nhấp vào nút Kiểm tra tùy chọn.
Sử dụng Công cụ dành cho nhà phát triển của Chrome
Như chúng tôi đã đề cập sơ qua, bạn có thể sử dụng bộ Công cụ dành cho nhà phát triển của Chrome để xem mã nguồn của trang web trong Phần tử chuyển hướng. Nó sẽ cho phép bạn phân tích mã đằng sau trang mà bạn đã tải, cũng như xem các thông báo lỗi (cho biết sự cố với cách trang web đã tải) trong bảng điều khiển Chrome trong Bảng điều khiển tab.
Bạn cũng có thể xem các nguồn khác nhau cho nội dung từ một trang web trong Nguồn chuyển hướng. Ví dụ:nếu một trang web đang sử dụng mạng phân phối nội dung (CDN), thì phương tiện từ một trang web sẽ được liệt kê là một nguồn khác tại đây.
Chế độ nhà phát triển Chrome cho phép bạn tải xuống nội dung đó trực tiếp hoặc thực hiện phân tích nội dung phức tạp hơn.
Nếu bạn muốn kiểm tra xem một trang web đang hoạt động như thế nào, bạn có thể theo dõi và ghi lại việc sử dụng mạng của mình trong Mạng chuyển hướng. Điều này sẽ hiển thị tốc độ, kích thước và loại yêu cầu mạng được thực hiện giữa trình duyệt của bạn và trang web.
Ví dụ:khi một trang tải lần đầu tiên, trang web sẽ tự tải nội dung trang đó, nhưng nó cũng có thể yêu cầu dữ liệu từ cơ sở dữ liệu của bên thứ ba. Ví dụ:khi bạn đăng nhập, điều này có thể truy vấn cơ sở dữ liệu sẽ hiển thị dưới dạng yêu cầu mạng tại đây.
Bạn có thể phân tích thêm điều này trong phần Hiệu suất , nơi bạn có thể ghi lại việc sử dụng trình duyệt Chrome của mình một cách chuyên sâu hơn, bao gồm cả việc ghi lại ảnh chụp màn hình ở các điểm khác nhau. Điều này sẽ ghi lại thời gian tải trang web của bạn để phân tích thêm.
Google Chrome nổi tiếng là khó sử dụng bộ nhớ PC của bạn, vì vậy bạn có thể kiểm tra việc sử dụng bộ nhớ JavaScript của trang web của mình trong Bộ nhớ chuyển hướng. Bạn có thể sử dụng các cấu hình thử nghiệm Chrome khác nhau tại đây, với thông tin thêm về thử nghiệm này tại trang tài liệu Chrome DevTools.
Để có phân tích sâu hơn về nội dung trang web của bạn, cũng như bất kỳ bộ nhớ trình duyệt nào mà nó có thể đang sử dụng (ví dụ:để ghi dữ liệu), bạn có thể tìm kiếm thông qua Ứng dụng chuyển hướng. Bạn có thể xem thông tin cookie của trang web tại đây trong Cookie hoặc xóa bộ nhớ đang được sử dụng bằng cách nhấp vào nút Xóa bộ nhớ tùy chọn.
Nếu lo lắng về bảo mật trang web của mình, bạn có thể kiểm tra xem nó hoạt động tốt như thế nào trong phần Bảo mật chuyển hướng. Điều này sẽ cung cấp cho bạn tổng quan nhanh về phân tích bảo mật của Chrome cho một trang, bao gồm cả việc trang đó có chứng chỉ SSL chính xác và đáng tin cậy hay không.
Nếu bạn muốn tạo báo cáo về hiệu suất trang web của mình, bao gồm cả việc nó có đáp ứng các tiêu chuẩn thông thường của người dùng hay không và nếu hiệu suất trang web có thể ảnh hưởng đến việc tối ưu hóa công cụ tìm kiếm, bạn có thể nhấp vào Ngọn hải đăng chuyển hướng. Điều này cung cấp các cài đặt mà bạn có thể chọn hoặc bỏ chọn cho báo cáo của mình — nhấp vào Tạo báo cáo để tạo báo cáo để xem.
Điều này hầu như không làm trầy xước bề mặt của tiềm năng mà chế độ nhà phát triển Chrome có thể mang lại cho các nhà phát triển. Nếu bạn muốn tìm hiểu thêm, tài liệu Công cụ dành cho nhà phát triển của Chrome sẽ giúp bạn về các công cụ và tính năng được cung cấp, bao gồm cả cách tạo các thử nghiệm người dùng của riêng bạn với nó.
Thủ thuật Google Chrome nâng cao
Hầu hết người dùng Chrome sẽ không bao giờ biết rằng bộ công cụ Google Chrome DevTools tồn tại trong trình duyệt của họ, nhưng đối với những người dùng thành thạo, nó vẫn là một cách đặc biệt hữu ích để kiểm tra và phân tích các trang web. Ngoài ra còn có các tiện ích mở rộng Chrome của bên thứ ba dành cho nhà phát triển web để giúp kiểm tra thêm trang web của bạn.
Nếu bạn đang xây dựng một trang web cơ bản, việc chuyển sang chế độ nhà phát triển Chrome có thể giúp bạn phát hiện các lỗi mà trang web của bạn không hiển thị ngay lập tức. Bạn chỉ có thể thực hiện việc này nếu Chrome hoạt động bình thường, vì vậy nếu bạn đang gặp khó khăn với các sự cố Chrome, trước tiên, bạn có thể cần phải đặt lại hoặc cài đặt lại trình duyệt của mình.