Học cách kiểm tra các thành phần trong trình duyệt rất có ích, đặc biệt nếu bạn làm việc trong lĩnh vực CNTT. Kiểm tra phần tử cho phép khách truy cập và tạm thời chỉnh sửa mã nguồn mặt trước của trang web, bao gồm các tệp HTML, CSS, JavaScript và hình ảnh của nó Ngoài việc thao tác nhanh giao diện của trang web, công cụ Kiểm tra phần tử cho phép người dùng kiểm tra tập lệnh, gỡ lỗi và tìm siêu dữ liệu của trang web Kiểm tra phần tử là một tính năng tích hợp trong tất cả các trình duyệt chính. Bài viết này sẽ hướng dẫn bạn cách truy cập và sử dụng Inspect Element trong Google Chrome, Safari và Mozilla Firefox Chúng tôi cũng sẽ thảo luận về các cách sử dụng khác nhau của nó, bao gồm cách sửa đổi thành phần trang, kiểm tra các lớp CSS và bật Chế độ thiết kế đáp ứng Tải xuống danh sách kiểm tra khởi chạy trang web Bạn có thể làm gì với phần tử kiểm tra?Tính năng Inspect Element mang lại nhiều lợi ích cho người dùng. Dưới đây là một số điều bạn có thể làm với nó - Chỉnh sửa trực tiếp CSS – cho phép bạn thực hiện các chỉnh sửa trong bảng điều khiển CSS và xem các thay đổi trong thời gian thực
- Kiểm tra bố cục – cho phép bạn kiểm tra các bố cục trang web khác nhau
- Chẩn đoán gỡ lỗi – giúp bảo trì trang web vì nó có thể kiểm tra xem trang web có chứa mã bị hỏng hay không
- Chỉnh sửa tạm thời – cho phép bạn chỉnh sửa các thành phần trang mà không thực hiện các thay đổi vĩnh viễn đối với mã
Tại sao bạn cần kiểm tra các phần tử web?Tính năng Inspect Element có giá trị đối với nhiều trường hợp sử dụng, đặc biệt đối với - Nhà phát triển web – bạn có thể kiểm tra mã bạn đã viết và tương tác với mã đó trên trang web. Bạn cũng có thể sử dụng Kiểm tra phần tử để tìm lỗi hoặc lỗi trên trang web
- Người viết nội dung – tính năng Kiểm tra phần tử cho phép bạn bỏ qua thông tin nhạy cảm khỏi trang web trước khi chụp ảnh màn hình. Thao tác trên trang bằng Inspect Element nhanh hơn phần mềm chỉnh sửa ảnh
- Nhà tiếp thị kỹ thuật số – cho phép bạn kiểm tra các nỗ lực tối ưu hóa công cụ tìm kiếm (SEO), siêu dữ liệu trang web, từ khóa được nhắm mục tiêu và trạng thái chỉ mục của Google của đối thủ cạnh tranh
- Đại lý hỗ trợ khách hàng – trợ giúp khi hỗ trợ các nhà phát triển web xác định và sửa lỗi trang web
- Nhà thiết kế – giúp sửa đổi thiết kế của trang web và xem các thay đổi trước khi triển khai chúng. Công cụ này cũng cho phép bạn xem trước giao diện của trang web trên máy tính để bàn hoặc thiết bị di động. Điều này tiết kiệm thời gian và làm cho giao tiếp với khách hàng hiệu quả hơn
Làm cách nào để kiểm tra phần tử bằng Công cụ dành cho nhà phát triển Chrome?Trước khi khám phá công cụ Kiểm tra phần tử trong Google Chrome, bạn cần biết về Công cụ dành cho nhà phát triển. Đây là một bảng điều khiển đi kèm với Công cụ kiểm tra và nó bao gồm ba phần chính - Bảng Thành phần/Mô hình đối tượng tài liệu (DOM) – chứa cây DOM của trang và cung cấp quyền truy cập vào mã nguồn Ngôn ngữ đánh dấu siêu văn bản (HTML). Nó nằm ở thanh tác vụ trên cùng của Công cụ dành cho nhà phát triển Chrome
- Bảng điều khiển CSS – cho phép bạn thay đổi, thêm và xóa các thuộc tính CSS để sửa đổi các quy tắc kiểu của trang web. Nó nằm ở phần giữa của Công cụ dành cho nhà phát triển, bên dưới Kiểu
- Bảng điều khiển – hiển thị các thông báo đã ghi và chạy mã JavaScript. Nó xuất hiện ở thanh tác vụ nút của Công cụ dành cho nhà phát triển
Đây là cách mở Inspect Element bằng Google Chrome - Mở một trang web trong Google Chrome. Chúng tôi sẽ sử dụng hostinger. com cho hướng dẫn này
- Nhấp vào ba dấu chấm dọc trên thanh menu trên cùng của Chrome, chọn Công cụ khác, sau đó chọn Công cụ dành cho nhà phát triển
Ngoài ra, hãy sử dụng phím tắt – Ctrl + Shift + I cho Windows hoặc Linux và Cmd + Option + I cho người dùng macOS Hoặc nhấp chuột phải vào trang web và chọn Kiểm tra để truy cập bảng công cụ dành cho Nhà phát triển - Khi tab Thành phần xuất hiện trên cửa sổ trình duyệt của bạn, bạn có thể chỉnh sửa mã nguồn của trang. Thay đổi kích thước hộp kiểm tra bằng cách kéo các góc của nó để dễ đọc hơn
- Theo mặc định, bảng Thành phần sẽ xuất hiện ở bên phải cửa sổ trình duyệt. Nếu bạn muốn thay đổi vị trí của nó hoặc di chuyển nó sang một cửa sổ riêng, hãy nhấp vào ba dấu chấm dọc ở góc trên bên phải của bảng điều khiển và chọn cài đặt bên Dock ưa thích của bạn
- Để xem cách trang web xuất hiện trên thiết bị di động, hãy nhấp vào thanh công cụ Chuyển đổi thiết bị ở góc trên cùng bên trái của bảng điều khiển. Phía trên phần xem trước, bạn có thể thay đổi các biến để kiểm tra xem trang hoạt động như thế nào với độ phân giải màn hình hoặc mức điều chỉnh băng thông khác
Mẹo chuyên nghiệpĐể kiểm tra một phần tử cụ thể, nhấp chuột phải vào phần tử đó và chọn tùy chọn Kiểm tra. Các công cụ phần tử kiểm tra sẽ mở và tự động đánh dấu mã nguồn của phần tử được chọn Bạn có thể sử dụng Kiểm tra phần tử để thay đổi, xóa hoặc ẩn nội dung trang web và kiểm tra các lớp CSS. Chúng tôi khuyên bạn nên xóa bộ nhớ cache của trình duyệt thường xuyên để đảm bảo bạn đang xem giao diện ban đầu của trang web Các phần sau đây sẽ cung cấp thông tin chuyên sâu về cách thực hiện các tác vụ Kiểm tra phần tử phổ biến Đảm bảo trang web của bạn có thể xử lý mọi thứ – từ lưu lượng truy cập cao đến thời gian tải nhanh, v.v. Mua dịch vụ lưu trữ web Thay đổi một phần tửĐể thay đổi thành phần trang, bạn cần thay đổi mã nguồn CSS hoặc HTML của trang. Bằng cách này, bạn có thể chỉnh sửa văn bản và các thành phần kiểu của văn bản, chẳng hạn như độ đậm, kích thước và màu sắc của phông chữ Bảng điều khiển DOM cho phép sửa đổi văn bản đơn giản. Đây là cách thực hiện - Mở Google Chrome và truy cập một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ đâu trên trang web và chọn Kiểm tra để mở Công cụ dành cho nhà phát triển
- Sau khi mở hộp Thành phần, hãy sử dụng công cụ Kiểm tra ‒ biểu tượng con trỏ ở trên cùng bên trái của bảng điều khiển ‒ để đánh dấu thành phần mã nguồn bạn muốn thay đổi
- Nhấp chuột phải vào mã được đánh dấu trong cây DOM và chọn Chỉnh sửa dưới dạng HTML. Ngoài ra, bấm đúp vào văn bản bạn muốn thay đổi
- Hộp soạn thảo sẽ mở rộng, cho phép bạn sửa đổi văn bản. Các thành phần văn bản thường được đặt trong dấu ngoặc kép
- Bỏ chọn phần tử để xem trước các thay đổi
Việc sửa đổi kiểu của các phần tử web bao gồm các bước tương tự, nhưng thay vào đó, bạn sẽ sử dụng bảng điều khiển CSS. Chúng tôi sẽ chủ yếu sử dụng yếu tố. kiểu, bao gồm các thuộc tính khác nhau để chọn và thêm vào trang web Thực hiện theo các bước sau - Mở Google Chrome và truy cập một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ đâu trên trang web và chọn Kiểm tra
- Sử dụng công cụ Kiểm tra để đánh dấu một phần tử
- Bấm vào phần tử. style ở phần trên của bảng CSS và thêm các khai báo kiểu mong muốn bên trong dấu ngoặc nhọn. Trong ví dụ sau, chúng tôi đã thêm màu nền vào khối văn bản
- Nếu muốn đặt khai báo kiểu khác thì chọn phần tử. phong cách tài sản một lần nữa. Trình kiểm tra web sẽ thêm một dòng trống khác để điền vào. Ở đây, chúng tôi nối thêm một thuộc tính thứ hai để hiển thị văn bản in nghiêng
- Di chuột qua các thuộc tính CSS trong bảng điều khiển sẽ hiển thị hộp kiểm bên cạnh mỗi dòng. Bỏ chọn nó để bỏ qua bất kỳ phong cách nào được hiển thị. Ngoài ra, bạn có thể nhấp vào một thuộc tính hoặc một giá trị để thay thế nó
Ẩn hoặc xóa một phần tửCông cụ dành cho nhà phát triển cũng cho phép bạn ẩn các thành phần trang web trên các trang web. Với tính năng Ẩn phần tử, bảng điều khiển CSS có thể tạo thuộc tính hiển thị để ẩn bất kỳ nội dung trang nào mà không xóa nội dung đó Làm theo những chỉ dẫn này - Mở Google Chrome và truy cập một trang web. Ở đây, chúng tôi sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ phần nào của trang web và chọn Kiểm tra
- Kích hoạt tính năng Kiểm tra và nhấp vào phần tử bạn muốn ẩn
- Nhấp chuột phải vào mã được đánh dấu trên cây DOM và chọn Ẩn phần tử. Một thuộc tính khả năng hiển thị mới sẽ xuất hiện trên bảng điều khiển CSS. Bỏ chọn nó để hoàn tác thay đổi
- Thay vào đó, nếu bạn muốn xóa phần tử HTML, hãy nhấp chuột phải vào mã được đánh dấu và chọn phần tử Xóa. Làm mới trang sẽ khôi phục mã đã xóa
Mẹo chuyên nghiệpBạn có thể hoàn tác tất cả các thay đổi đã thực hiện trong công cụ Kiểm tra phần tử bằng cách nhấn Ctrl+Z trên Windows và Linux hoặc Command+Z trên macOS Kiểm tra các lớp CSSKiểm tra các thành phần trang là một cách tuyệt vời để kiểm tra mã thiết kế web. Bạn cũng có thể sao chép chúng để tạo kiểu cho các phần trang web của mình bằng cách sử dụng các lớp CSS Đây là cách thực hiện - Mở Google Chrome và truy cập một trang web. Ở đây, chúng tôi sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ đâu trên trang web và chọn Kiểm tra
- Kích hoạt công cụ Kiểm tra và di con trỏ chuột qua phần tử bạn muốn kiểm tra. Thông tin cơ bản của nó như màu sắc, phông chữ và lề sẽ xuất hiện trong một hộp và bảng điều khiển DOM sẽ làm nổi bật mã nguồn của nó
- Bạn cũng có thể tìm một kiểu CSS cụ thể bằng cách nhấn Ctrl+Shift +F trên Windows và Linux hoặc Command+Option+F trên macOS
- Một tab tìm kiếm sẽ xuất hiện ở phần dưới của bảng điều khiển. Nhập truy vấn của bạn và trình kiểm tra sẽ tạo kết quả
Cách kiểm tra phần tử trong các trình duyệt khácHầu hết các trình duyệt đều có một tính năng tương tự như công cụ Google Chrome Inspect Element. Mặc dù các tính năng chủ yếu hoạt động theo cùng một cách, nhưng các trình duyệt khác nhau yêu cầu các bước khác nhau để chạy nó Kiểm tra phần tử trong SafariTrước khi bạn có thể sử dụng công cụ Kiểm tra phần tử trong Safari, bạn cần bật menu Phát triển - Chọn Safari trên thanh menu và chọn Preferences từ menu
- Chọn Nâng cao và đánh dấu vào ô bên cạnh Hiển thị menu Phát triển trong thanh menu để bật Kiểm tra phần tử
- Sau khi kích hoạt tính năng này, bạn sẽ thấy tùy chọn Phát triển được thêm vào menu
Đây là cách sử dụng Inspect Element trên Safari - Mở trình duyệt Safari
- Nhấp chuột phải vào bất kỳ đâu trên trang và chọn Kiểm tra phần tử hoặc bạn có thể sử dụng phím tắt Command+Option+I
Ngoài ra, chọn Phát triển -> Hiển thị Trình kiểm tra Web từ thanh menu Theo mặc định, công cụ Inspect Element trong Safari xuất hiện ở cuối cửa sổ trình duyệt. Để thay đổi vị trí, hãy nhấp vào biểu tượng để gắn bảng điều khiển ở bên phải hoặc mở nó trong một cửa sổ riêng Bảng điều khiển Trình kiểm tra web bao gồm hai cột – cột đầu tiên hiển thị mã nguồn HTML và cột thứ hai hiển thị CSS. Sử dụng con trỏ để điều hướng giao diện và khám phá mã và dòng tương ứng với từng khu vực Ngoài ra, hãy kiểm tra trang trực tiếp bằng cách nhấp vào nút công cụ Kiểm tra ở góc trên bên trái của bảng điều khiển. Khi bạn di chuyển con trỏ, công cụ sẽ hiển thị mã nguồn tương ứng Giống như công cụ Google Chrome Inspect Element, Safari cho phép người dùng chỉnh sửa, xóa và thêm các thành phần trang web Đây là cách sửa đổi một phần của trang - Mở Safari
- Tới một trang web. Trong ví dụ này, chúng tôi sử dụng hostinger. com
- Nhấp chuột phải vào mã HTML trên bảng Thành phần và di chuột qua Chỉnh sửa
- Chọn một tùy chọn từ menu Chỉnh sửa
- Trình kiểm tra web sẽ nhắc bạn nhập văn bản mới và hiển thị những thay đổi bạn đã thực hiện trong thời gian thực
Thực hiện theo các bước sau để thêm phần tử mới vào trang - Mở Safari
- Truy cập một trang web. Trong trường hợp này, chúng tôi sẽ sử dụng hostinger. com
- Nhấp chuột phải vào một dòng mã và chọn một tùy chọn từ menu Thêm. Trong ví dụ này, chúng tôi đang chọn Trẻ em
- Specify the element. In this example, we’ll add an
. You can continue writing any code you’d like next to it.
Đây là cách xóa một phần tử trang - Mở Safari
- Tới một trang web. Trong ví dụ này, chúng tôi đang truy cập hostinger. com
- Chọn bất kỳ mã nào và nhấn Delete
Ngoài ra, nhấp chuột phải vào một dòng mã và chọn Xóa -> Nút - Để ẩn một thành phần của trang web mong muốn, chỉ cần nhấp chuột phải vào mã bạn muốn ẩn và chọn Toggle Visibility
Ngoài ra, Safari có Chế độ thiết kế đáp ứng cho phép bạn xem trước trang web trên nhiều thiết bị khác nhau, chẳng hạn như màn hình máy tính để bàn và thiết bị di động. Đây là cách sử dụng nó - Mở Safari
- Truy cập một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Chọn tùy chọn Phát triển trên thanh menu
- Chọn Nhập Chế độ thiết kế đáp ứng
- Nó sẽ hiển thị các tùy chọn thiết bị có sẵn và độ phân giải màn hình để xem trước trang web
Kiểm tra phần tử trong Mozilla FirefoxBảng Inspect Element cũng là một tính năng tích hợp trong trình duyệt Mozilla Firefox. Đây là cách sử dụng nó - Mở Mozilla Firefox
- Tới một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ phần nào của trang và chọn Kiểm tra
Ngoài ra, nhấp vào menu ba sọc -> Công cụ khác - Chọn Công cụ dành cho nhà phát triển web
Bạn cũng có thể sử dụng phím tắt Ctrl+Shift+I để truy cập Inspect Element Trình kiểm tra Firefox xuất hiện ở cuối cửa sổ theo mặc định. Để thay đổi vị trí của nó, hãy nhấp vào menu ba chấm ở góc trên bên phải của bảng điều khiển và chọn một tùy chọn hiển thị khác Công cụ này cho phép bạn chọn một phần tử cụ thể để tìm mã của nó. Nhấp vào công cụ Kiểm tra ở góc trên cùng bên trái của bảng điều khiển để vào chế độ lựa chọn Bảng điều khiển Trình kiểm tra trong Firefox hoạt động tương tự như Chrome và Safari. Mã nguồn HTML được mã hóa màu – màu xanh là nội dung, màu vàng là lề và màu tím là phần đệm Đây là cách sửa đổi một thành phần trang trên Firefox - Mở Mozilla Firefox
- Truy cập một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Nhấp chuột phải vào bất kỳ phần cụ thể nào của trang web và chọn Kiểm tra
- Nhấp đúp chuột để thay đổi văn bản
Ngoài ra, nhấp chuột phải và chọn Chỉnh sửa dưới dạng HTML để sửa đổi văn bản. Hộp sẽ mở rộng để cho phép bạn viết mã - Để thêm một văn bản mới, chọn Tạo mã mới
- Để xóa mã, chỉ cần nhấp đúp và nhấn Backspace hoặc Delete
Thực hiện theo các bước sau để sửa đổi kiểu của một phần tử - Mở Mozilla Firefox
- Tới một trang web. Trong ví dụ này, chúng tôi đang sử dụng hostinger. com
- Mở bảng Thanh tra và đi đến Kiểu bộ lọc ở phần dưới cùng
- Bỏ chọn hộp bên cạnh khai báo CSS để hủy kích hoạt một kiểu
- Nhấp vào phần và công cụ sẽ cung cấp một dòng mới để thêm mã mới
Mozilla Firefox cũng cung cấp Chế độ thiết kế đáp ứng để xem trước một số độ phân giải màn hình đặt trước. Đây là cách thực hiện - Mở Mozilla Firefox
- Truy cập một trang web. Trong ví dụ này, chúng tôi đang mở hostinger. com
- Mở bảng Thanh tra và nhấp vào biểu tượng Chế độ thiết kế đáp ứng ở góc trên bên phải
Ngoài ra, nhấp vào menu ba sọc -> Công cụ khác -> Chế độ thiết kế đáp ứng - Kích hoạt chế độ cho phép bạn kiểm tra tốc độ kết nối và tỷ lệ pixel của thiết bị
Đảm bảo trang web của bạn có thể xử lý mọi thứ – từ lưu lượng truy cập cao đến thời gian tải nhanh, v.v. Mua dịch vụ lưu trữ web Phần kết luậnTính năng Kiểm tra phần tử cho phép người dùng sửa đổi, chỉnh sửa hoặc thêm mã vào trang web hiện có. Nó hữu ích để thử nghiệm thiết kế trang web, gỡ lỗi, loại trừ thông tin nhạy cảm khỏi ảnh chụp màn hình, nghiên cứu siêu dữ liệu và tìm từ khóa ẩn Trong bài viết này, chúng tôi đã giải thích các bước để truy cập Kiểm tra phần tử và cung cấp các cách sử dụng phổ biến của nó trong ba trình duyệt web – Google Chrome, Safari và Mozilla Firefox Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách sử dụng Inspect Element và một số triển khai của nó. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy cho chúng tôi biết trong phần bình luận bên dưới Tìm hiểu thêm về bảo trì trang webliên kết nóng. Nó là gì và tại sao nó xấu?
Cách chuyển hướng tên miền
Cách sử dụng tên miền không có cookie
Cách kiểm tra Nhật ký lỗi PHP của trang web của bạn Tác giả Lina L Linas bắt đầu với tư cách là một đại lý thành công của khách hàng và hiện là nhà phát triển web toàn diện và Trưởng nhóm kỹ thuật tại Hostinger. Anh ấy đam mê giới thiệu cho mọi người những giải pháp kỹ thuật hàng đầu, nhưng cũng như niềm yêu thích viết mã, anh ấy thầm mơ ước trở thành một ngôi sao nhạc rock Thêm từ Linas L Đồng tác giả Noviantika G Noviantika là Người viết nội dung kỹ thuật số tại Hostinger. Đam mê lưu trữ web, WordPress và SEO, cô ấy muốn chia sẻ kiến thức của mình với thế giới thông qua bài viết của mình. Trong thời gian rảnh rỗi, Noviantika thích lên máy bay và khám phá các địa điểm | 
