Công cụ Element Inspector (Kiểm tra phần tử) trong trình duyệt có vẻ như chỉ dành cho các nhà phát triển web, nhưng thực tế, bạn có thể thực hiện nhiều điều thú vị với nó ngay cả khi không có kiến thức về lập trình. Đây là một công cụ mạnh mẽ được tích hợp sẵn trong hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge, giúp bạn khám phá và tương tác với cấu trúc của một trang web. Từ việc giải quyết những rắc rối nhỏ khi lướt web đến việc thỏa mãn sự tò mò về thiết kế, Element Inspector mở ra cánh cửa đến thế giới ẩn sau giao diện website mà bạn không ngờ tới. Hãy cùng tincongnghemoi.com tìm hiểu 8 thủ thuật tuyệt vời để tận dụng tối đa công cụ này, biến bạn thành một người dùng công nghệ sành điệu mà không cần biết một dòng code nào.
1. Tải xuống hình ảnh dễ dàng
Đôi khi, bạn muốn lưu một hình ảnh từ trang web nhưng không thể nhấp chuột phải để “Lưu hình ảnh” hoặc chỉ tải được ảnh thumbnail nhỏ. Điều này thường xảy ra khi các nhà phát triển cố tình vô hiệu hóa chức năng này hoặc sử dụng framework web không hỗ trợ. Đừng lo, công cụ Element Inspector sẽ giúp bạn vượt qua rào cản này và tải xuống bất kỳ tài nguyên hình ảnh nào với kích thước đầy đủ chỉ trong ba bước đơn giản. Tuy nhiên, hãy luôn nhớ rằng một số hình ảnh có thể bị khóa vì lý do bản quyền và cấp phép. Hãy tuân thủ nguyên tắc sử dụng hợp lý để tránh các vấn đề pháp lý.
Bước 1
Nhấp chuột phải vào bất kỳ đâu trên trang và chọn “Kiểm tra phần tử” (Inspect Element) hoặc “Kiểm tra” (Inspect). Bạn cũng có thể sử dụng phím tắt F12 (hoạt động trên hầu hết các trình duyệt và hệ điều hành) để mở công cụ này.
Bước 2
Trong cửa sổ kiểm tra phần tử, nhấp vào tab “Network” (Mạng). Tab Network sẽ có một menu phụ là “Images” (Hình ảnh). Nhấp vào đó.
Bây giờ, hãy tải lại trang (sử dụng nút làm mới bên cạnh thanh địa chỉ của trình duyệt hoặc nhấn Ctrl+R) để tất cả tài nguyên hình ảnh hiển thị trong tab “Images”.
Giao diện tab Network và phần Images trong công cụ Element Inspector của trình duyệt Firefox, hiển thị danh sách các tài nguyên hình ảnh được tải trên trang web, giúp người dùng dễ dàng tải xuống.
Bước 3
Giờ đây, toàn bộ thư viện hình ảnh đã được tải vào danh sách. Danh sách này sẽ cập nhật động, vì vậy khi có thêm hình ảnh tải trên trang web, chúng cũng sẽ xuất hiện ở đây.
Bạn có thể di chuột qua một tệp để xem bản xem trước và kích thước của nó. Nhấp đúp vào tệp để mở nó trong một tab mới, nơi bạn có thể lưu bằng cách nhấp chuột phải.
Danh sách các tệp hình ảnh trong tab Images của Element Inspector, cho phép xem trước kích thước và định dạng tệp, sau đó double-click để mở và lưu ảnh full-size.
2. Tải xuống Video nhanh chóng
Tương tự như hình ảnh, đôi khi các trang web không cho phép bạn tải video trực tiếp. Nhưng bạn có thể tải chúng bằng cách tải chúng vào công cụ kiểm tra phần tử. Khi video đã được tải vào công cụ này, bạn chỉ cần nhấp đúp vào tên tệp để mở nó trong một tab mới và tiến hành tải xuống.
Bước 1
Mở cửa sổ kiểm tra phần tử bằng cách nhấn phím tắt F12 (hoạt động trên hầu hết các hệ thống). Hoặc, bạn có thể nhấp chuột phải vào bất kỳ đâu trên trang web và chọn “Kiểm tra”. Cửa sổ kiểm tra phần tử sẽ bật lên.
Bước 2
Nhấp vào tab “Network”, sau đó nhấp vào “Media” (Đa phương tiện) để lọc tất cả trừ các tệp video. Tải lại trang bằng cách nhấp vào nút làm mới trình duyệt hoặc nhấn Ctrl+R.
Bước 3
Các tệp video sẽ được tải vào một danh sách. Bạn không thể xem trước chúng ngay lập tức, nhưng bạn có thể nhấp đúp vào một tệp để mở nó trong một tab mới. Tại đây, bạn chỉ cần nhấp chuột phải và tải xuống.
Màn hình công cụ kiểm tra phần tử với tab Network và tùy chọn Media được chọn, liệt kê các tệp video đã tải trên trang web, cho phép tải xuống video dễ dàng từ trình duyệt.
3. Chụp ảnh màn hình toàn trang (Full-page Screenshot)
Nếu bạn muốn lưu toàn bộ một trang web, bạn có thể tải nó dưới dạng tệp PDF hoặc HTML. Nhưng nếu bạn muốn chụp một ảnh tĩnh thông thường của cả trang thì sao? Dưới đây là cách thực hiện.
Lưu ý: Trình duyệt Firefox có công cụ chụp ảnh màn hình chuyên dụng trong menu ngữ cảnh thông thường, vì vậy hướng dẫn này sẽ tập trung vào Google Chrome và các trình duyệt tương tự.
Mở công cụ kiểm tra phần tử bằng cách nhấp chuột phải vào bất kỳ đâu trên trang hoặc nhấn F12.
Giao diện DevTools trong Google Chrome, minh họa việc mở bảng lệnh (Command Palette) bằng Ctrl+Shift+P để tìm kiếm và thực hiện lệnh chụp ảnh màn hình toàn trang (Capture full size screenshot).
Nhấn Ctrl+Shift+P để mở cửa sổ Run (Chạy lệnh). Trong cửa sổ này, gõ Capture full size screenshot và nhấp vào nó.
Một cửa sổ “Lưu dưới dạng” (Save As) sẽ xuất hiện ngay lập tức, cho phép bạn lưu ảnh chụp màn hình toàn trang ở định dạng JPG.
Hộp thoại "Lưu dưới dạng" hiện ra ngay sau khi chụp ảnh màn hình toàn trang bằng Element Inspector trong Chrome, cho phép người dùng lưu tệp ảnh JPG đã chụp.
4. Giả lập thiết bị di động (Responsive Design Mode)
Hầu hết các trang web tải khác nhau tùy thuộc vào loại thiết bị và kích thước màn hình. Nếu bạn muốn “đánh lừa” trang web nghĩ rằng bạn đang sử dụng một thiết bị khác (vì bất kỳ lý do gì), bạn có thể dễ dàng làm điều đó với công cụ kiểm tra phần tử.
Trong Chrome, mở cửa sổ Kiểm tra phần tử từ menu chuột phải hoặc bằng F12. Sau đó, nhấp vào biểu tượng laptop và điện thoại nhỏ ở góc trên bên trái. Firefox có một nút tương tự, được gọi là Responsive Design Mode (Chế độ thiết kế đáp ứng) với phím tắt Ctrl+Shift+M.
Biểu tượng chuyển đổi thanh công cụ thiết bị (Toggle device toolbar) trong Element Inspector của Chrome, cho phép người dùng chuyển đổi giữa chế độ xem trên máy tính và giả lập thiết bị di động.
Bạn sẽ nhận được một danh sách các thiết bị có thể giả lập, và bạn cũng có thể điều chỉnh kích thước màn hình thủ công. Khi bạn đã chọn một thiết bị di động, bạn sẽ nhận thấy trình duyệt đang mô phỏng các cử chỉ chạm.
5. Xác định và Tải Font chữ
Thủ thuật này dành cho những người sáng tạo hoặc bất kỳ ai tò mò về font chữ trên một trang web. Bạn có thể sử dụng công cụ kiểm tra phần tử để xác định và đôi khi còn tải xuống các font chữ.
Đầu tiên, mở công cụ kiểm tra phần tử. Tiếp theo, nhấp vào tab “Network” (nó có thể bị ẩn trong menu tràn) và chọn “Font”.
Tab Network trong Element Inspector hiển thị danh sách các tệp font chữ (định dạng WOFF) được sử dụng trên trang web, cho phép người dùng xác định và tải xuống font trực tiếp.
Sau đó nhấn Ctrl+R. Các font chữ đã render sẽ tải vào danh sách, thường ở định dạng WOFF (Web Open Font Format). Bạn có thể tải chúng trực tiếp bằng cách nhấp đúp vào tên font. Ví dụ, trang How-To Geek sử dụng Roboto làm font mặc định.
Nếu bạn cần thông tin font chi tiết hơn, hãy chuyển đến tab “Elements” và chọn “Styles”. Cuộn xuống thuộc tính font-family và nhấp vào đó. Văn bản tương ứng sẽ sáng lên trên trang web. Bằng cách này, bạn có thể xác định chính xác một font chữ.
6. Chỉnh sửa văn bản trên trang (Tạm thời)
Bạn có biết rằng bạn có thể chỉnh sửa tạm thời hầu hết mọi thứ trên một trang web bằng cách sử dụng công cụ kiểm tra phần tử không? Công cụ này cho phép chúng ta chỉnh sửa mã tạo nên trang web, vì vậy nếu bạn biết mã, bạn có thể làm cho trang web trông như bất cứ điều gì (chỉ trên máy của bạn, cho đến khi bạn tải lại trang).
Ngay cả khi bạn không biết gì về lập trình, bạn vẫn có thể chỉnh sửa văn bản cơ bản trên bất kỳ trang web nào. Đây có thể là một trò đùa nhỏ thú vị để chơi với bạn bè hoặc kiểm tra nhanh một ý tưởng về nội dung.
Chọn văn bản trên trang mà bạn muốn chỉnh sửa và nhấp chuột phải vào nó. Sau đó nhấp vào “Kiểm tra” hoặc “Kiểm tra phần tử”.
Đoạn văn bản liên quan sẽ hiển thị trên tab Elements. Chỉ cần nhấp đúp vào nó và thay thế văn bản bằng bất cứ thứ gì bạn muốn.
Đóng công cụ kiểm tra phần tử và bạn đã hoàn tất! Hãy nhớ rằng, tải lại trang sẽ hoàn tác các thay đổi của bạn.
7. Xóa các phần tử trên trang (Tạm thời)
Cũng giống như chỉnh sửa văn bản, bạn cũng có thể xóa các phần tử cụ thể khỏi một trang web. Một lần nữa, các thay đổi chỉ có hiệu lực cho đến khi bạn tải lại trang.
Nhấp chuột phải vào phần tử bạn muốn xóa, sau đó nhấp vào “Kiểm tra” hoặc “Kiểm tra phần tử”.
Di chuột qua các thẻ HTML cho đến khi toàn bộ phần tử được tô sáng. Sau đó, chỉ cần nhấn phím Delete.
Một phần tử HTML được tô sáng trong tab Elements của công cụ kiểm tra phần tử, minh họa cách người dùng có thể dễ dàng xóa bỏ các thành phần không mong muốn khỏi trang web tạm thời.
Đơn giản như vậy, phần tử đó đã biến mất khỏi giao diện tạm thời của bạn.
8. Xác định giá trị màu sắc (HEX, RGB)
Một mẹo khác dành cho những người sáng tạo và bất kỳ ai muốn tìm hiểu chi tiết về thiết kế web: bạn có thể lấy các giá trị màu RGB và HEX cho bất kỳ màu nào trên trang web bằng công cụ Eyedropper (ống nhỏ giọt) trong Element Inspector.
Nhấp chuột phải vào bất kỳ đâu trên trang và mở công cụ Kiểm tra phần tử. Theo mặc định, cửa sổ Rules (Quy tắc) sẽ mở trong tab Inspector. Cuộn xuống để tìm bất kỳ thuộc tính nào có nhãn color.
Thuộc tính color sẽ có một vòng tròn hoặc hình vuông màu bên cạnh. Nhấp vào đó để mở công cụ chọn màu và nhấn biểu tượng ống nhỏ giọt bên cạnh.
Cửa sổ công cụ chọn màu trong Element Inspector, hiển thị tùy chọn eyedropper (ống nhỏ giọt) để xác định giá trị màu sắc (HEX, RGB) của bất kỳ pixel nào trên trang web một cách chính xác.
Bạn có thể di chuột công cụ ống nhỏ giọt này đến bất kỳ đâu trên trang để tra cứu giá trị màu. Nhấp vào ống nhỏ giọt sẽ tự động điền thuộc tính với giá trị màu bạn vừa chọn. Từ đây, bạn có thể dễ dàng sao chép nó.
Công cụ eyedropper đang được sử dụng để lấy mẫu màu trên trang web thông qua Element Inspector, hiển thị giá trị mã màu HEX và RGB của điểm ảnh được chọn, giúp dễ dàng sao chép.
Những mẹo này chỉ là một phần nhỏ trong những gì bạn thực sự có thể làm bằng Công cụ Element Inspector. Từ việc gỡ lỗi nhanh chóng đến tùy chỉnh trải nghiệm duyệt web cá nhân, công cụ này là một kho tàng bí mật dành cho mọi người dùng. Việc khám phá và thành thạo những thủ thuật này không chỉ giúp bạn sử dụng trình duyệt hiệu quả hơn mà còn mở ra một cái nhìn sâu sắc hơn về cách thế giới kỹ thuật số được xây dựng. Hãy thử nghiệm những thủ thuật trên và đừng ngần ngại khám phá thêm các tính năng khác của Element Inspector để làm chủ trình duyệt của mình!
Bạn đã từng sử dụng Element Inspector để làm gì? Hãy chia sẻ những thủ thuật yêu thích của bạn hoặc những điều bạn đã khám phá được trong phần bình luận dưới đây!
