Thành thạo Inspect Element trên Mac: Hướng dẫn nhanh cho Chrome, Safari, Firefox

Trang web là thứ thiết yếu ở thời đại hiện tại. Chúng ta dùng nó để tra thông tin kinh doanh. Chúng ta thậm chí dùng nó để nghiên cứu cho công việc hoặc học tập. Vì vậy, trang web được hình thành từ ngôn ngữ lập trình web có thể khó hiểu bằng mắt thường.

Nếu bạn muốn tìm hiểu thêm về các phần của trang web, bạn phải biết cách inspect element trên Mac. Tính năng "Inspect Element" này cho phép bạn xem hoặc sửa đổi front-end của trang web. Việc biết cách inspect element trên Mac rất tốt khi bạn muốn tạo trang web riêng (hoặc thậm chí học cách các trang web này hoạt động).

Ngoài việc kiểm tra trang web, dọn dẹp cookie cũng là thao tác nhiều người làm. Nhấp vào liên kết để xem chi tiết.

Bài viết này sẽ cho bạn chi tiết về cách inspect element trên Mac. Chúng tôi sẽ nói về tại sao bạn không thể xem hoặc "inspect" các yếu tố trang web trong một số dịp. Sau đó, chúng tôi sẽ dạy bạn cách inspect các yếu tố trang web dùng các trình duyệt khác nhau.

Phần 1. Tại sao tôi không thể Inspect trên Mac?

Nếu bạn muốn biết cách inspect element trên Mac, bạn phải biết lý do tại sao bạn không thể thực hiện nó từ đầu. Inspect trang web chỉ có thể nếu bạn đã bật Menu Develop trên trình duyệt Safari. Do đó, kích hoạt Menu Develop nên được làm. Điều này cho phép bạn dùng Web Inspector của Apple.

Dưới đây là các bước bật menu develop để có thể inspect element trên Mac:

1. Mở Safari.
2. Tìm phần Preferences của trình duyệt trong giao diện.
3. Chọn nhãn Advanced bằng cách nhấp vào nó.
4. Đi đến phần dưới cùng của pane. Sau đó, tích vào hộp "Show Develop Menu In Menu Bar".
5. Chọn tùy chọn Develop.
6. Nhấp tùy chọn Show Web Inspector.

Phần 2. Cách Inspect Element trên trình duyệt Mac?

Có nhiều cách khác nhau để inspect element trên Mac cho các trình duyệt khác nhau. Hãy xem cách inspect element trên Mac dùng Chrome, Safari, và Firefox bên dưới.

Cách Inspect Element trên Mac dùng Chrome

Dưới đây là một số cách bạn có thể thực hiện inspect element trong Chrome trên Mac:

1. Phương pháp Click chuột phải

• Mở Chrome trên Mac.
• Đi đến bất kỳ trang nào bạn muốn inspect element.
• Bây giờ, click chuột phải vào trang rồi nhấp tùy chọn Inspect. Nếu bạn click chuột phải vào một yếu tố cụ thể trên trang, yếu tố này sẽ mở trong view inspector.

2. Phương pháp Menu Bar

• Nhấp menu bar trên cùng cho menu View.
• Sau đó, chọn tùy chọn Developer, rồi vào Developer Tools.
• Khởi chạy tùy chọn Customize and Control.

3. Phương pháp truy cập biểu tượng Settings

• Vào More Tools bằng cách nhấp biểu tượng ba chấm. Tìm thấy ở góc trên bên phải trình duyệt.
• Nhấp Developer Tools.

4. Phương pháp phím tắt

• Gõ CMD + OPTION + C trên macOS.
• Thay đổi vị trí Panel (Tùy chọn) bằng cách nhấp biểu tượng ba chấm. Chọn vị trí dock bạn muốn. Ví dụ, chọn Dock To Right.

Bây giờ, bạn sẽ thấy nhiều tab khi làm một trong bốn phương pháp inspect element trên Mac. Các tab bao gồm Elements, Sources, Console, v.v. Thông thường, mọi thứ bạn cần nằm trong tab Elements.

Bạn có thể chọn một yếu tố để xem mã nguồn của nó. Ngoài việc xem mã, bạn cũng có thể sửa văn bản, xóa yếu tố, ẩn yếu tố, và sửa chúng như HTML, trong số những thứ khác.

Tab Styles cho phép bạn kiểm tra định dạng của các yếu tố, đặc biệt là yếu tố văn bản. Ngoài ra, bạn có thể inspect trang ở chế độ xem mobile. Điều này có thể là nguồn thông tin tuyệt vời cho lập trình viên web và chủ doanh nghiệp muốn trang web thân thiện mobile.

Cách Inspect Element trên Mac dùng Safari

Trước khi thực hiện inspect Safari trên Mac dùng trình duyệt, bạn nên bật Developer tools cho Safari trước. Dưới đây là các bước làm:

1. Mở trình duyệt Safari và chọn tùy chọn Preferences.
2. Truy cập Advanced.
3. Tích vào hộp "Show Develop Menu In Menu Bar".
4. Kiểm tra lại xem menu có tùy chọn mới tên Develop không.

Vậy, cách inspect element trên Mac dùng Safari. Dưới đây là một số phương pháp bạn có thể thực hiện:

1. Phương pháp Click chuột phải

• Đi đến trang bạn muốn kiểm tra yếu tố.
• Click chuột phải trang đó ở bất kỳ phần nào.
• Chọn Inspect.

2. Phương pháp Menu Develop

• Điều đầu tiên để inspect element trên Mac dùng Safari là vào menu Develop.
• Nhấp tùy chọn Show Web Inspector.

3. Phương pháp phím tắt

• Dùng phím tắt đúng. Bây giờ, để làm điều này, chỉ cần nhấp tùy chọn CMD + OPTION + I.

Bây giờ, bạn có thể thực hiện inspect element trên Mac dùng Safari. Thôi, nếu bạn tải chậm khi mở Safari, bạn có thể xem giải pháp trong bài viết liên kết.

Cách Inspect Element trên Mac dùng Firefox

Có nhiều cách khác nhau để inspect dùng trình duyệt Firefox trên Mac. Dưới đây là một số phương pháp bạn có thể dùng:

1. Phương pháp Click chuột phải

• Điều đầu tiên là truy cập trang và click chuột phải vào nó.
• Sau đó, nhấp tùy chọn Inspect Element.
• Một việc tùy chọn là click chuột phải vào một yếu tố cụ thể trong trang rồi inspect nó.

2. Phương pháp Menu Tools

• Bạn cũng có thể mở menu Tools trong trình duyệt Firefox.
• Sau đó, nhấp tùy chọn Web Developer. Sau đó, nhấp tùy chọn Inspect.

3. Phương pháp phím tắt

• Dùng phím tắt. Ví dụ, bạn có thể nhấn CTRL + Shift + C (Trên Windows) và bạn cũng có thể nhấn COMMAND + OPTION + C (trên Mac).

Cách Inspect Element trên Mac không dùng Click chuột phải?

Có cách inspect element trên Mac không click chuột phải vào trang. Bạn có thể dùng phím tắt để làm. Dưới đây là phím tắt inspect element trên các trình duyệt khác nhau trên Mac:

• Safari – COMMAND + OPTION + I
• Chrome – COMMAND + OPTION + C
• Firefox – COMMAND + OPTION + C

Ngoài ra, bạn cũng có thể dùng preferences hoặc tools hoặc menus cho ba trình duyệt này để inspect element trên Mac mà không click chuột phải. Bạn có thể xem các phương pháp trên cho Safari, Chrome, và Firefox.