Với DevTools bạn có thể chụp ảnh màn hình theo nhiều cách trong phạm vi cửa sổ ứng dụng của trình duyệt Google Chrome mà không cần cài thêm tiện ích nào.
Chụp ảnh màn hình với Command Menu
Bước 1: mở DevTools bạn dùng chuột phải chọn “Inspect” hoặc cách khác ở đây.
Bước 2: mở Command Menu với tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac), một cách khác là bạn vào DevTools menu 
sau đó chọn Run command.
Bước 3: nhập “screenshot” vào Command Menu
Có 4 lựa chọn screenshot khác nhau:
- Capture screenshot: chụp toàn bộ vùng của trang web đang được hiển thị.
- Capture area screenshot: chụp một vùng tùy chỉnh theo ý bạn. Con trỏ chuột sẽ có hình dấu cộng, hãy chọn điểm bắt đầu rồi nhấn và giữ đến điểm kết thúc mà bạn muốn rồi thả ra.
- Capture full size screenshot: chụp toàn bộ trang web kể cả vùng mà bạn phải kéo xuống mới nhìn thấy.
- Capture node screenshot: chụp thành phần HTML đang được “focused” bởi DevTools.
Cuối cùng là lưu ảnh vào thư mục bạn muốn.
Chụp ảnh màn hình với Device toolbar
Device toolbar giúp chúng ta giả lập một trang web hoạt động trên các thiết bị như iPad, smartphone với rất nhiều lựa chọn có sẵn và bạn cũng có thể tùy chỉnh kích cỡ mong muốn.
Bước 1: mở DevTools bạn dùng chuột phải chọn “Inspect” hoặc cách khác ở đây.
Bước 2: mở Device toolbar với tổ hợp phím Control+Shift+M hoặc Command+Shift+M (Mac), hoặc
click vào icon 
.
Bước 3: chọn kích thước màn hình bạn muốn, ví dụ: iPhone 12 Pro. Click More options sẽ có 2 lựa chọn:
- Capture screenshot: Chụp vùng đang hiển thị theo kích thước màn hình iPhone 12 Pro.
- Capture full size screenshot: Chụp toàn bộ trang web hiển thị theo kích thước màn hình iPhone 12 Pro kể cả vùng phải scroll xuống mới nhìn thấy.
Và cuối cùng là lưu ảnh thôi.
Tất nhiên có nhiều công cụ khác tiện lợi hơn nhiều chức năng hơn như kiểu chụp xong rồi lưu vào Google Drive hoặc ‘copy’ vào clipboard, bạn có thể tham khảo Lightshot. Hy vọng qua bài viết này các bạn biết thêm cách để luôn linh động trong mọi tình huống.
