Chế độ nhà phát triển Chrome là gì và công dụng của nó là gì?

---

Google DevTools cung cấp nhiều hơn thế, tuy nhiên. Bạn có thể sử dụng chế độ nhà phát triển Chrome để thay đổi trang sau khi được tải, chạy các lệnh bảng điều khiển Google Chrome để kiểm soát và thao tác trang, cũng như chạy thử nghiệm tốc độ và mạng để theo dõi lưu lượng truy cập web.

In_content_1 tất cả: [300x250] / dfp: [640x360]->

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ế độ DevTools của Chrome. Điều này cho phép bạn xem một trang web có thiết kế web đáp ứng hay không và nội dung và bố cục của trang sẽ thay đổi tùy thuộc vào độ phân giải hoặc loại thiết bị.

Mặc dù các công cụ này nhắm đến các nhà phát triển hoặc kiểm tra web chuyên nghiệp, nhưng nó cũng tiện dụng để người dùng Chrome tiêu chuẩn biết cách của họ xung quanh bộ DevTools. Nếu bạn gặp sự cố với trang web mà bạn không thể giải quyết, 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 Google Menu DevTools của Chrome

Có một số cách bạn có thể truy cập menu DevTools của Google, tùy thuộc vào công cụ bạn muốn sử dụng.

Phương pháp dễ nhất để làm điều 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 trình đơn ba chấmở góc trên bên phải. Từ menu xuất hiện, nhấp vào Công cụ khác>Công cụ dành cho nhà phát triển.

Điều này sẽ mở bộ DevTools trong menu mới ở phía bên phải của tab hoặc cửa sổ 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 Windows hoặc Linux, hãy mở trình duyệt Chrome và nhấn phím F12. Bạn cũng có thể nhấn các phím Ctrl + Alt + Jhoặc Ctrl + Alt + Itrong tab hoặc cửa sổ Chrome đang mở.

Trên macOS, nhấn F12hoặc nhấn phím Tùy chọn + Lệnh + Jhoặc Tùy chọn + Lệnh + Iđể mở menu DevTools của Chrome thay thế. Điều này sẽ mở bảng điều khiển Chrome, với các tùy chọn để di chuyển đến các công cụ Chrome khác ở đầu trình đơn DevTools.

Nếu bạn muốn, bạn có thể xem mã nguồn cho trang web (mở Các yếu tố tabcủa menu DevTools đang xử lý) 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 tùy chọn Kiểm tra.

Sử dụng DevTools của Chrome

Khi chúng tôi chạm vào một thời gian ngắn, bạn có thể sử dụng bộ Chrome DevTools để xem mã nguồn cho trang web trong tab Yếu tố. Nó sẽ cho phép bạn phân tích mã phía sau trang bạn đã tải, cũng như xem các thông báo lỗi (biểu thị sự cố với cách trang web đã tải) trong bảng điều khiển Chrome trong tab Bảng điều khiển.

Bạn cũng có thể xem các nguồn khác nhau cho nội dung từ một trang web trong tab Nguồn. Ví dụ: nếu một trang web là sử dụng mạng phân phối nội dung (CDN), phương tiện từ một trang web sẽ được liệt kê dưới dạng một nguồn khác ở đâ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 thêm phân tích phức tạp nội dung.

Nếu bạn muốn kiểm tra cách trang web hoạt động, bạn có thể theo dõi và ghi lại việc sử dụng mạng của mình trong tab Mạ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.

Chẳng hạn, 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. Chẳng hạn, 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 tab Hiệu suất, nơi bạn có thể ghi lại mức độ sử dụng trình duyệt Chrome của mình sâu hơn, bao gồm ghi lại ảnh chụp màn hình tại 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 với bị cứng trên bộ nhớ PC của bạn, vì vậy bạn có thể kiểm tra mức độ sử dụng bộ nhớ JavaScript của trang web của mình trong tab Bộ nhớ. Các cấu hình thử nghiệm Chrome khác nhau có thể được sử dụng ở đây, với thông tin thêm về thử nghiệm này tại Trang tài liệu Chrome DevTools.

Để phân tích sâu hơn nội dung trang web của bạn, cũng như bất kỳ lưu trữ trình duyệt nào có thể đang sử dụng (ví dụ: để ghi dữ liệu), bạn có thể tìm kiếm thông qua tab Ứng dụng. Bạn có thể xem thông tin cookie trang web tại đây trong phần Cookieshoặc xóa bộ nhớ đang sử dụng bằng cách nhấp vào tùy chọn Xóa bộ nhớ.

ình>