Cách sử dụng phần tử Kiểm tra

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 ý của 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 có thể cung cấp những gì và cách sử dụng nó.

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 nút 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ả tương tự.

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 Phần tử. Đây là công cụ bạn cần để Kiểm tra Phần tử.

cách thay đổi ảnh đại diện trên facebook mà không cần đăng

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.

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 những 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 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á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 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 nút F12 phím chức năng.
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 trình đơn thả xuống.

Cách sử dụng phần tử Kiểm tra trên 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ể bạn ưa thích trình duyệt nào.

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 phím chức năng F12 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 Chrome

Có ba cách để truy cập Kiểm tra phần tử trên Chrome. Bạn có thể:

cách hủy liên kết instagram khỏi facebook

Nhấp vào menu cài đặt hoặc ba dấu chấm dọc trong trình duyệt và đi tới Công cụ khác> Công cụ dành cho nhà phát triển .
Nhấp chuột phải vào trang web và chọn Quan sát .
Sử dụng Ctrl + Shift + I (Quan sát).

Cách đầu tiên trực quan hơn để người dùng Kiểm tra phần tử mới ghi nhớ. Tuy nhiên, nếu bạn định sử dụng tính năng này thường xuyên, các phím nhanh có thể hữu ích.

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 Nâng 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 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 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. Tuy nhiên, 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.

Dù bằng cách nào, 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 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 mình:

Đi đến Cài đặt .
Lựa chọn Safari .
Cuộn xuống dưới cùng và nhấn vào Menu nâng cao .
Nhấn để 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.
Bấm vào Sở thích .
Bấm vào Nâng 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 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ếmJavaScript.
Tăt JavaScript .

Phương pháp 2 - Truy cập Công cụ dành cho nhà phát triển một cách lâu 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 Cài đặt nhà phát triển .

Phương pháp 3 - Sử dụng phím chức năng

thay đổi kích thước ký quỹ trong tài liệu google

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 cấp, 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 .
HOẶC LÀ
nhấn Ctrl + Shift + I

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 liên hệ với tổ chức hoặc quản trị viên trường học của mì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ỉ cần 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, Phần tử Kiểm tra không phải là bất hợp pháp. 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, bạn không thể thực sự tắt toàn bộ 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 rằng 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.