Đối với một người không quen viết mã, rất dễ sợ hãi sau khi vô tình mở phần tử Kiểm tra. Tuy nhiên, nếu bạn bình tĩnh sau khi xem đoạn mã phức tạp, Kiểm tra phần tử cho phép bạn thực hiện một loạt việc hữu ích (và một số việc không quá hữu ích), miễn là bạn biết cách thực hiện.
Ở đây, chúng ta sẽ xem xét bảy điều thú vị mà bạn có thể làm bằng cách sử dụng các công cụ dành cho nhà phát triển của trình duyệt và Kiểm tra phần tử.
Phần tử Kiểm tra là gì?
Kiểm tra phần tử là một công cụ dành cho nhà phát triển được cung cấp bởi các trình duyệt để xem và tạm thời thay đổi mã nguồn của bất kỳ trang web nào. Bằng cách sử dụng công cụ này, các nhà phát triển và nhà thiết kế có thể kiểm tra và sửa đổi giao diện người dùng của bất kỳ trang web nào.
Khi bạn thay đổi mã, trình duyệt sẽ tiếp tục cập nhật trang web trong thời gian thực. Thay đổi này chỉ kéo dài miễn là phiên của bạn trên trang web và chỉ hiển thị với bạn trên một thiết bị. Tất cả các thay đổi sẽ bị xóa ngay khi bạn rời khỏi trang web.
1. Tải xuống Hình ảnh và Video
Thông thường, bạn có thể dễ dàng tải ảnh xuống từ web bằng cách nhấp chuột phải và lưu chúng. Nhưng bạn không thể làm điều đó trên tất cả các trang web. Trong trường hợp này, tính năng Kiểm tra phần tử có ích.
Để tải xuống bất kỳ tệp phương tiện nào, hãy nhấp chuột phải vào tệp đó và chọn Kiểm tra . Mở rộng các thẻ
2. Thay đổi Tiêu đề và Văn bản thành Trò đùa của Bạn bè
Thay vì tạo một hình ảnh giả từ đầu, bạn có thể sử dụng DevTools để thay đổi văn bản trên trang web và lôi kéo bạn bè của bạn ra chơi khăm.
Để tạo trang web giả mạo, hãy mở bất kỳ trang nào của trang web có uy tín và nhấp chuột phải vào tiêu đề của trang web đó. Sau đó, nhấp vào Kiểm tra để mở ngăn. Nhấp vào Thêm biểu tượng của mã được đánh dấu và chọn Chỉnh sửa dưới dạng HTML . Sau đó, thay thế tiêu đề bằng dòng tiêu đề giả của riêng bạn.
Tương tự, bạn có thể thay đổi các nội dung khác của văn bản như đoạn trích, ngày tháng và tên tác giả. Để thay đổi hình ảnh, hãy xóa nguồn hình ảnh bằng các bước tương tự. Sau đó, tìm một hình ảnh có liên quan từ Google, sao chép địa chỉ hình ảnh và dán nó vào nguồn.
Bằng cách này, bạn có thể chơi khăm bạn bè mà không gặp nhiều khó khăn. Tuy nhiên, hãy đảm bảo gửi ảnh chụp màn hình có ẩn ngăn DevTools thay vì liên kết vì thay đổi chỉ là tạm thời.
3. Thay đổi Màu sắc và Phông chữ của Trang web
Một điều lén lút khác mà bạn có thể làm khi sử dụng Kiểm tra phần tử là thay đổi màu sắc và phông chữ của bất kỳ trang web nào. Nhấp chuột phải vào đối tượng có màu bạn muốn thay đổi và chọn Kiểm tra . Sau đó, trong Kiểu , tìm màu hoặc màu nền và nhập mã hex. Tương tự, bạn có thể thay đổi kích thước và kiểu phông chữ từ tab Kiểu.
Bạn có thể sử dụng thủ thuật này để thay đổi giao diện của bất kỳ trang web nào và làm cho nó dễ đọc. Ví dụ:bạn có thể tạo chế độ tối cho bất kỳ trang web nào, tăng kích thước phông chữ để tăng khả năng đọc và loại bỏ các yếu tố gây khó chịu bằng cách xóa chúng.
4. Xem mật khẩu ẩn
Nếu bất kỳ trang web nào đã ẩn mật khẩu của bạn bằng dấu hoa thị, bạn có thể chỉnh sửa mã trang web đó để xem. Đi tới Công cụ dành cho nhà phát triển bằng cách nhấp chuột phải vào mật khẩu ẩn. Sau đó, trong thẻ nhập, thay đổi loại từ mật khẩu thành văn bản và nhấp vào màn hình trống. Bây giờ, mật khẩu của bạn đã hiển thị.
Thủ thuật này rất hữu ích khi bạn quên mật khẩu nhưng đã lưu nó trên trình quản lý mật khẩu. Vì vậy, bạn có thể xem và nhớ mật khẩu của mình trực tiếp từ trang web.
5. Xem phiên bản di động của trang web
Tất cả chúng ta đều biết cách xem trang web trên máy tính để bàn trên điện thoại di động của bạn. Nhưng bạn cũng có thể sử dụng Kiểm tra phần tử để xem phiên bản di động trên máy tính để bàn. Để làm như vậy, hãy mở DevTools và nhấp vào Chuyển đổi Thanh công cụ thiết bị (nút thứ hai từ trên cùng bên phải).
Tương tự, bạn có thể chuyển đổi tác nhân người dùng và xem các phiên bản khác nhau của trang web. Trong công cụ dành cho nhà phát triển, nhấp vào nút Thêm ở góc trên bên trái và chọn điều kiện mạng. Bỏ chọn mục Sử dụng trình duyệt mặc định trong hộp Tác nhân người dùng và chọn bất kỳ tác nhân người dùng nào khác từ trình đơn thả xuống bên dưới.
6. Chọn màu từ trang web
Thay vì cài đặt tiện ích mở rộng bộ chọn màu của bên thứ ba, giờ đây bạn có thể chọn màu sắc yêu thích của mình bằng cách sử dụng Kiểm tra phần tử. Để chọn bất kỳ màu nào từ trang web, hãy đi tới Kiểm tra phần tử . Sau đó, chuyển đến Kiểu tab và tìm màu hoặc nền. Bây giờ, hãy nhấp vào ô nhỏ sau màu để hiển thị công cụ chọn màu.
Giờ đây, bạn có thể nhấp vào bất kỳ đâu trên trang để chọn màu và sao chép mã hex từ Kiểu chuyển hướng. Nếu bạn muốn mã RGB hoặc HSLA, bạn có thể xem chúng bằng cách sử dụng Mũi tên các nút.
Vì vậy, bất cứ khi nào bạn nhìn thấy màu sắc tuyệt vời trên bất kỳ trang web nào mà bạn có thể muốn sử dụng trong tương lai, chỉ cần sử dụng Kiểm tra phần tử và lưu mã để tham khảo.
7. Chụp ảnh màn hình mà không có bất kỳ tiện ích mở rộng nào
DevTools cũng cho phép bạn chụp ảnh màn hình rõ ràng và sạch sẽ. Để chụp ảnh màn hình, hãy mở DevTools , nhấp vào nút Thêm và chọn Chạy lệnh . Trong hộp tìm kiếm, nhập ảnh chụp màn hình. Bạn sẽ thấy bốn loại tùy chọn chụp ảnh màn hình khác nhau.
Bằng cách chọn ảnh chụp màn hình khu vực, bạn có thể đánh dấu bất kỳ khu vực cụ thể nào trên cửa sổ và trình duyệt của bạn lưu nó dưới dạng tệp PNG.
Chụp ảnh màn hình ở kích thước đầy đủ sẽ lưu hình ảnh của toàn bộ trang web, bao gồm cả những thứ không hiển thị trên màn hình của bạn. Ảnh chụp màn hình nút chỉ chụp ảnh của phần tử cụ thể. Cuối cùng, tùy chọn chụp ảnh màn hình lưu hình ảnh của mọi thứ hiển thị trên màn hình của bạn.
Tìm hiểu các thủ thuật ẩn khi kiểm tra phần tử
Đây chỉ là một vài thủ thuật mà bạn có thể thực hiện bằng cách sử dụng Kiểm tra phần tử. Có rất nhiều điều hữu ích khác mà bạn có thể làm bằng DevTools.
Vì vậy, nếu bạn muốn trở thành một người dùng thành thạo và gây ấn tượng với bạn bè, bạn nên tìm hiểu thêm các tính năng ẩn của DevTools.