F12 trên safari trên mac

Hầu hết mọi người đều không biết rằng có một kho tàng các 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 nhìn vào 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 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. Đây là cách bạn có thể truy cập tính năng này trên Google Chrome:

  1. Mở trang web bạn muốn kiểm tra
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Nhấp chuột phải vào bất kỳ đâu trên trang và chọn Kiểm tra
    F12 trên safari trên mac
    F12 trên safari trên mac

    HOẶC LÀ
  3. 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
    F12 trên safari trên mac
    F12 trên safari trên mac
  4. Đi tới Công cụ khác
    F12 trên safari trên mac
    F12 trên safari trên mac
  5. Chọn công cụ dành cho nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac

    HOẶC LÀ
  6. Nhấn phím tắt bàn phím F12 trên PC hoặc CMD + Options + I trên máy Mac

Microsoft Edge hoạt động tương tự:

  1. Mở một trang web
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. 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
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Cuộn xuống và nhấp vào Công cụ khác
    F12 trên safari trên mac
    F12 trên safari trên mac
  4. Nhấp vào Công cụ dành cho nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac

    HOẶC LÀ
  5. Nhấp chuột phải vào bất kỳ đâu trên trang web
  6. Nhấp vào Kiểm tra
    F12 trên safari trên mac
    F12 trên safari trên mac

    HOẶC LÀ
  7. 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 mình. Đâ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ử.

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:

  1. 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
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Chọn một mặt đế (bên trái, dưới cùng hoặc bên phải) hoặc mở khóa vào một cửa sổ riêng biệt
    F12 trên safari trên mac
    F12 trên safari trên mac

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ư:

  1. Xem trước thiết kế trang web trên thiết bị di động
  2. Tìm ra các từ khóa mà đối thủ cạnh tranh đang sử dụng
  3. Kiểm tra tốc độ
  4. Thay đổi văn bản trên trang web
  5. 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 bạn khởi chạy bảng Kiểm tra phần tử, bạn sẽ thấy tất cả mã cho trang web. Điều đó bao gồm tất cả mã JavaScript, CSS và HTML được tích hợp trong nó. Nó giống như việc xem 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 của trình duyệt Chrome để truy cập Kiểm tra phần tử. Đây là một khóa học bổ sung nhỏ dành cho bạn:

  1. Mở một trang web
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Nhấp vào ba đường thẳng đứng ở góc trên bên phải của thanh công cụ
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Chọn các công cụ khác
    F12 trên safari trên mac
    F12 trên safari trên mac
  4. Nhấp vào Công cụ dành cho nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac

Bạn cũng có thể sử dụng phương pháp nhấp chuột phải hoặc phím chức năng F12 để 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:

  1. Nhấn phím chức năng F12
  2. Chọn chuyển đổi thanh thiết bị
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Chọn thiết bị Android từ menu thả xuống
    F12 trên safari trên mac
    F12 trên safari trên mac

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 của mình.

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:

  1. Mở trang web bạn muốn kiểm tra
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Nhấn vào ba dấu chấm dọc trên góc của cửa sổ trình duyệt
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Cuộn xuống và chọn Công cụ khác
    F12 trên safari trên mac
    F12 trên safari trên mac
  4. Nhấp vào Công cụ dành cho nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac

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ể:

  1. Nhấp vào menu cài đặt hoặc ba dấu chấm dọc trong trình duyệt và chuyển đến Công cụ khác và Công cụ dành cho nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Nhấp chuột phải vào trang web và chọn Kiểm tra
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Sử dụng Ctrl + Shift + I (Kiểm tra)

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:

  1. Mở trình duyệt Safari
  2. Nhấp vào Safari trong tab tiêu đề
  3. Chọn Tùy chọn từ menu thả xuống
  4. Nhấp vào biểu tượng Bánh răng nâng cao nằm ở đầu màn hình
  5. Chọn hộp có nội dung “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 (kiểm tra).

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 Kiểm tra để 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:

  1. Đi tới Cài đặt
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Chọn Safari
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Cuộn xuống dưới cùng và nhấn vào Menu nâng cao
    F12 trên safari trên mac
    F12 trên safari trên mac
  4. Nhấn để bật Trình kiểm tra web
    F12 trên safari trên mac
    F12 trên safari trên mac

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:

  1. Mở Safari
  2. Chọn Safari từ các tiêu đề trên cùng
  3. Nhấp vào Tùy chọn
  4. Nhấp vào Nâng cao
  5. Chọn hộp có nội dung “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

  1. Đi tới Cài đặt
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Tìm kiếm “javascript”
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Tắt javascript
    F12 trên safari trên mac
    F12 trên safari trên mac

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:

  1. Đi tới Cài đặt trong trình duyệt của bạn
    F12 trên safari trên mac
    F12 trên safari trên mac
  2. Chọn các công cụ khác
    F12 trên safari trên mac
    F12 trên safari trên mac
  3. Cuộn xuống và nhấp vào Cài đặt nhà phát triển
    F12 trên safari trên mac
    F12 trên safari trên mac

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

Bạn cũng có thể thử sử dụng phím chức năng F12 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 xem nguồn: [enter full url].

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 lệnh Ctrl + Shift + I hoặc phím 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:

  1. Nhấp chuột phải hoặc chạm hai ngón tay vào trang web và chọn Kiểm tra
    HOẶC LÀ
  2. 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ỉ đ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, Phần tử Kiểm tra không phải là bất hợp pháp. Nó không thay đổi vĩnh viễn bất kỳ điều gì trên trang web mà bạn đang xem.

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 Kiểm tra phần tử 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 thực sự không thể tắt toàn bộ tính năng Kiểm tra phần tử.

Tìm hiểu các nội dung 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.