Hầu hết mọi người đều không biết rằng có một kho tàng công cụ dành cho nhà phát triển theo ý họ và nó được ẩn trong trình duyệt yêu thích của họ.
Mỗi trình duyệt web cung cấp các công cụ dành cho nhà phát triển để kiểm tra mã hóa của một trang web, tuy nhiên, đó là một thực thể nước ngoài đối với người dùng internet bình thường. Rốt cuộc, ai muốn xem mã hóa của một trang web, phải không?
Hóa ra, có rất nhiều điều bạn có thể học được bằng cách xem mã hóa của một trang web. Đọc tiếp để tìm hiểu xem tính năng phần tử kiểm tra phải cung cấp những gì và cách sử dụng nó.
Cách sử dụng phần tử kiểm tra trong một trình duyệt cụ thể
Hầu hết các trình duyệt đều có các công cụ để kiểm tra các thành phần của một trang web, nhưng chúng thường hoạt động theo cùng một cách.
Sử dụng phần tử Kiểm tra trong Google Chrome
- Mở trang web bạn muốn kiểm tra.
- Nhấp chuột phải vào bất kỳ đâu trên trang và chọn Quan sát.
HOẶC LÀ
- Nhấp vào ba dấu chấm dọc ở góc bên phải của thanh công cụ của bạn.
- Đi đến Thêm công cụ.
- Lựa chọn Những công cụ phát triển.
HOẶC LÀ
- Nhấn vào F12 phím tắt bàn phím trên PC hoặc CMD + Tùy chọn + I trên máy Mac.
Sử dụng phần tử Kiểm tra trong Microsoft Edge
- Mở một trang web.
- Nhấp vào ba dấu chấm dọc ở góc trên bên phải của thanh công cụ của trình duyệt.
- Cuộn xuống và nhấp vào Thêm công cụ.
- Bấm vào Những công cụ phát triển.
HOẶC LÀ
- Nhấp chuột phải vào bất kỳ đâu trên trang web.
- Bấm vào Quan sát.
HOẶC LÀ
- nhấn Ctrl + Shift + I.
Bất kỳ phương pháp nào trong ba phương pháp này sẽ cho bạn kết quả giống nhau.
Nếu bạn làm đúng cách, bạn sẽ thấy một ngăn mới mở ra ở cuối trình duyệt của bạn. Đây là các Công cụ dành cho nhà phát triển và bao gồm tab Thành phần. Đây là công cụ bạn cần để Kiểm tra Phần tử.
Bảng điều khiển sẽ mở ở cuối màn hình của bạn theo mặc định, nhưng bạn luôn có thể thay đổi cách nó xuất hiện. Làm theo các bước đơn giản sau để định vị lại bảng điều khiển Công cụ dành cho nhà phát triển:
- Nhấp vào ba dấu chấm dọc ở góc trên của bảng điều khiển Công cụ dành cho nhà phát triển.
- Chọn một mặt đế (bên trái, dưới cùng hoặc bên phải) hoặc bỏ gắn vào một cửa sổ riêng biệt.
Di con trỏ bên cạnh cạnh của khung bảng Công cụ dành cho nhà phát triển và kéo sẽ thu hẹp hoặc mở rộng không gian làm việc. Ví dụ: nếu bạn chọn gắn bảng điều khiển vào bên phải của cửa sổ trình duyệt, hãy thử di chuột vào đường viền bên trái. Bạn có thể kéo bảng để thay đổi kích thước khi bạn nhìn thấy con trỏ mũi tên.
Sử dụng phần tử kiểm tra (dành riêng cho hệ điều hành)
Mặc dù rất nhiều bước liên quan có thể đã được thực hiện bằng cách chỉ cho bạn cách sử dụng Kiểm tra phần tử trong trình duyệt, nơi nó tồn tại ngay từ đầu, nhưng dù sao thì chúng tôi cũng sẽ chỉ cho bạn cách thực hiện trên hầu hết các hệ điều hành.
Cách sử dụng phần tử Kiểm tra trên Chromebook
Trình duyệt mặc định trên Chromebook là Google, vì vậy hãy làm theo hướng dẫn trình duyệt Chrome để truy cập Kiểm tra nguyên tố. Đây là một khóa học bổ sung nhỏ dành cho bạn:
- Mở một trang web.
- Nhấp vào ba đường thẳng đứng ở góc trên bên phải của thanh công cụ.
- Lựa chọn Thêm công cụ.
- Bấm vào Những công cụ phát triển.
Bạn cũng có thể sử dụng phương pháp nhấp chuột phải hoặc F12 phím chức năng để truy cập Công cụ dành cho nhà phát triển nhanh hơn.
Cách sử dụng phần tử Kiểm tra trên thiết bị Android
Chạy phần tử Kiểm tra trên thiết bị Android hơi khác một chút. Xem cách truy cập bảng Kiểm tra phần tử trên Android:
- Nhấn vào F12 nút chức năng.
- Lựa chọn Chuyển đổi thanh thiết bị.
- Chọn thiết bị Android từ menu thả xuống.
Khi bạn chọn một thiết bị Android cụ thể, bạn sẽ nhận thấy rằng phiên bản di động của trang web sẽ tải. Từ đây, bạn có thể thoải mái sử dụng tính năng Kiểm tra phần tử trên thiết bị Android của mình một cách thoải mái trên máy tính để bàn.
Phương pháp này hoạt động cho cả trình duyệt Chrome và Firefox vì chúng có một tính năng trong Công cụ dành cho nhà phát triển được gọi là Mô phỏng thiết bị.
Nó cũng hoạt động theo cách tương tự đối với các thiết bị iPhone. Bạn chỉ cần chọn đúng trong menu thả xuống.
Cách sử dụng phần tử Kiểm tra trong Windows
Công cụ Kiểm tra phần tử không nhất thiết phải dành riêng cho hệ điều hành nhưng dành riêng cho trình duyệt. Điều đó có nghĩa là Công cụ dành cho nhà phát triển là một tính năng của trình duyệt mà bạn sử dụng và không nhất thiết phải là Windows. Tuy nhiên, bạn có thể vào bảng Kiểm tra phần tử bất kể trình duyệt nào bạn ưa thích.
Nếu đang sử dụng hệ điều hành Windows, bạn cũng có thể sử dụng trình duyệt Microsoft Edge. Kiểm tra cách truy cập Kiểm tra phần tử trên MS Edge:
- Mở trang web bạn muốn kiểm tra.
- Nhấn vào ba dấu chấm dọc trên góc của cửa sổ trình duyệt.
- Cuộn xuống và chọn Thêm công cụ.
- Bấm vào Những công cụ phát triển.
Bạn cũng có thể sử dụng F12 phím chức năng nếu bạn muốn truy cập Kiểm tra phần tử nhanh hơn. Ngoài ra, nhấp chuột phải vào trang web và chọn Kiểm tra hoạt động.
Cách sử dụng phần tử Kiểm tra trên máy Mac
Nếu bạn đang sử dụng máy Mac, trình duyệt bạn chọn có thể là Safari. Mở phần tử Kiểm tra trên Safari hơi khác so với trên Chrome và Firefox. Nhưng nó chỉ đơn giản với các bước sau:
- Mở trình duyệt Safari.
- Bấm vào Safari trong tab tiêu đề.
- Lựa chọn Sở thích từ menu thả xuống.
- Bấm vào Trình độ cao biểu tượng bánh răng nằm ở đầu màn hình.
- Chọn hộp cho biết Hiển thị menu Phát triển trong thanh menu.
Thực hiện qua các bước này sẽ bật tính năng Kiểm tra phần tử trên trình duyệt của bạn. Nếu bạn không bật Kiểm tra phần tử trước, bạn sẽ không thấy tùy chọn khi mở một trang web.
Sau khi bạn hoàn thành bước này, chỉ cần nhấp chuột phải vào bất kỳ trang web nào đang mở và chọn Kiểm tra. Bạn cũng có thể sử dụng lệnh phím nhanh: CMD + Option + I (quan sát).
Cách sử dụng phần tử Kiểm tra trên iPhone
Bạn có muốn sử dụng tính năng Kiểm tra phần tử để xem cách phiên bản di động của trang web xuất hiện trên iPhone không? Bạn có thể làm điều này và hơn thế nữa chỉ với một vài bước đơn giản. Nhưng trước khi xem xét một phần tử, bạn cần bật Trình kiểm tra web cho thiết bị iOS của bạn:
- Đi đến Cài đặt.
- Bây giờ, hãy chọn Safari.
- Cuộn xuống dưới cùng và nhấn vào Menu nâng cao.
- Bây giờ, hãy nhấn vào công tắc bật tắt để bật Trình kiểm tra web.
Ngoài ra, bạn cần đảm bảo rằng menu Phát triển đã được bật trên máy Mac của mình:
- Mở Safari.
- Lựa chọn Safari từ các tiêu đề trên cùng.
- Tiếp theo, nhấp vào Sở thích.
- Sau đó, nhấp vào Trình độ cao.
- Chọn hộp cho biết Hiển thị menu Phát triển trong thanh menu.
Sau khi bật cả thiết bị di động iOS và máy Mac, bạn sẽ thấy menu Phát triển ở thanh trên cùng trên máy Mac của mình. Nhấp vào nó để xem iPhone đã kết nối và trang web đang hoạt động trên thiết bị. Việc chọn trang web cũng sẽ mở ra cửa sổ Trình kiểm tra web cho cùng một trang trên màn hình máy Mac của bạn.
Tuy nhiên, hãy nhớ rằng những hướng dẫn này chỉ hoạt động cho Safari chạy Mac, không phải Safari trên Windows.
Cách sử dụng phần tử Kiểm tra trong Google Biểu mẫu
Bạn cũng có thể sử dụng Phần tử Kiểm tra trên Google Biểu mẫu. Tuy nhiên, nếu bạn đang tìm kiếm câu trả lời cho một câu đố, bạn đã không gặp may. Bạn sẽ không tìm thấy câu trả lời được nhúng trong mã hóa. Bạn chỉ có thể xem câu trả lời nếu bạn là người tạo hoặc người chỉnh sửa biểu mẫu. Dù bằng cách nào, nếu bạn là sinh viên trả lời câu hỏi trên Google Biểu mẫu, bạn sẽ chỉ thấy câu trả lời của riêng mình.
- Bạn có thể nhấp chuột phải vào biểu mẫu và chọn Quan sát để xem tất cả mã cho biểu mẫu.
Cách sử dụng Kiểm tra phần tử khi nó bị chặn
Đôi khi, bạn sẽ thấy rằng bạn không thể kiểm tra một trang web và lựa chọn Kiểm tra sẽ chuyển sang màu xám nếu bạn cố gắng nhấp chuột phải vào nó. Bạn có thể nghĩ rằng nó đã bị chặn, nhưng có nhiều cách để giải quyết vấn đề này:
Phương pháp 1 - Tắt Javascript
- Đi vào Cài đặt.
- Tìm kiếm "JavaScript”.
- Tăt JavaScript.
Phương pháp 2 - Truy cập Công cụ dành cho nhà phát triển trong một chặng đường dài
Thay vì nhấp chuột phải vào chuột để Kiểm tra, hãy làm như sau:
- Đi đến Cài đặt trong trình duyệt của bạn.
- Lựa chọn Thêm công cụ.
- Cuộn xuống và nhấp vào Những công cụ phát triển.
Phương pháp 3 - Sử dụng phím chức năng
Bạn cũng có thể thử sử dụng F12 phím chức năng trên các trang web chặn nhấp chuột phải để Kiểm tra.
Bạn có thể phải thử tất cả các phương pháp này trước khi bắt gặp một phương pháp phù hợp với mình. Phương án cuối cùng, bạn cũng có thể thử xem mã nguồn bằng cách nhập vào view-source: [nhập url đầy đủ]. 
Cách sử dụng Kiểm tra phần tử trên Bất hòa
Kiểm tra mã của bạn trên Discord là một quá trình dễ dàng. Chỉ cần sử dụng Ctrl + Shift + I lệnh hoặc F12 trên trang Discord.
Cách sử dụng phần tử Kiểm tra trên Chromebook dành cho trường học
Nếu Chromebook của bạn do trường học phát hành, việc sử dụng tính năng Kiểm tra phần tử bao gồm một vài bước đơn giản:
- Nhấp chuột phải hoặc chạm hai ngón tay vào trang web và chọn Quan sát.
- nhấn Ctrl + Shift + I.
- Hãy thử và sử dụng phương thức view-source: [url], chẳng hạn như “view-source: //www.wikipedia.com“, Không có dấu ngoặc kép.
Tuy nhiên, một số trường học và tổ chức chặn tính năng này. Vì vậy, nếu nó không hiệu quả với bạn, bạn có thể cần phải liên hệ với tổ chức hoặc quản trị viên trường học của mình.
Cách sử dụng phần tử Kiểm tra để tìm câu trả lời
Bạn có thể sử dụng Kiểm tra phần tử để tìm câu trả lời cho nhiều thứ như:
- Xem trước thiết kế trang web trên thiết bị di động.
- Tìm ra các từ khóa mà đối thủ cạnh tranh đang sử dụng.
- Kiểm tra tốc độ.
- Thay đổi văn bản trên một trang web.
- Tìm các ví dụ nhanh để cho các nhà phát triển thấy những gì bạn cần.
Khi khởi chạy bảng Kiểm tra phần tử, bạn sẽ thấy tất cả mã hóa cho trang web. Điều đó bao gồm tất cả mã JavaScript, CSS và HTML được tích hợp sẵn trong đó. Nó giống như nhìn thấy mã nguồn của một trang web, ngoại trừ việc bạn có thể thực hiện các thay đổi đối với mã. Ngoài ra, bạn có thể xem bất kỳ thay đổi nào được triển khai trong thời gian thực.
Công cụ này làm cho nó trở nên vô giá đối với các nhà tiếp thị, nhà thiết kế và nhà phát triển để xem bất kỳ thay đổi thiết kế nào trước khi hoàn thiện chúng. Tuy nhiên, việc thực hiện các thay đổi trong mã hóa với phần tử Kiểm tra không kéo dài mãi mãi. Khi bạn tải lại trang, nó sẽ trở lại trạng thái mặc định.
Câu hỏi thường gặp bổ sung
Làm cách nào để sử dụng lệnh Kiểm tra phần tử để tìm câu trả lời?
Cách duy nhất để tìm câu trả lời bằng cách sử dụng tính năng Kiểm tra thành phần là nếu trang web ngay lập tức hiển thị nó sau khi gửi. Trong trường hợp này, các câu trả lời có trong mã hóa.
Nếu không, bạn chỉ đang xem mã hóa cho bài kiểm tra hoặc bài kiểm tra khi bạn sử dụng tính năng Kiểm tra phần tử, cũng như bất kỳ câu trả lời nào bạn gửi.
Kiểm tra phần tử có bất hợp pháp không?
Không, công cụ Kiểm tra phần tử không phải là bất hợp pháp, nó được thiết kế cho các nhà phát triển web. Việc xem mã nguồn của một trang web không phải là bất hợp pháp, nó chỉ trở thành vấn đề nếu bạn sử dụng thông tin thu thập được cho các mục đích bất chính, chẳng hạn như cố gắng khai thác, v.v.
Có thể tắt kiểm tra phần tử trong trình duyệt không?
Câu trả lời ngắn gọn là không.
Bạn không thể tắt Phần tử Kiểm tra trong trình duyệt. Nhưng bạn có thể đặt các thông số ngăn người dùng thực hiện các hành động nhất định như nhấp chuột phải vào một trang web. Có rất nhiều hướng dẫn trực tuyến để thiết lập các tập lệnh phù hợp để vô hiệu hóa các sự kiện nhất định. Tuy nhiên, trên thực tế bạn không thể tắt hoàn toàn tính năng Kiểm tra phần tử.
Tìm hiểu các cấu trúc nội bộ của một trang web
Kiểm tra tính năng Kiểm tra phần tử của một trang web có thể là một công cụ dành cho nhà phát triển mà bạn chưa bao giờ biết là mình cần - ngay cả khi bản thân bạn không phải là nhà phát triển. Nó có rất nhiều ứng dụng thiết kế và tiếp thị có thể giúp trang web của bạn chạy mượt mà hơn. Và có thể giúp bạn có lợi thế hơn đối thủ cạnh tranh.
Bạn sử dụng Kiểm tra Phần tử để làm gì? Hãy cho chúng tôi biết về điều đó trong phần bình luận bên dưới.
