Cách chỉnh sửa trang web trên Safari bằng phần tử Kiểm tra

Với công cụ Kiểm tra phần tử, Safari cho phép bạn chỉnh sửa mã giao diện người dùng của bất kỳ trang web nào. Nếu bạn muốn kiểm tra xem một trang trông như thế nào với các văn bản hoặc hình ảnh khác nhau, bạn có thể làm như vậy bằng cách thay đổi mã của trang đó với Kiểm tra phần tử.

Đây là một hướng dẫn đơn giản dành cho người mới bắt đầu để giải thích cách bạn có thể bắt đầu thử nghiệm với Kiểm tra phần tử trong Safari để chỉnh sửa văn bản và hình ảnh của trang web với kiến ​​thức mã hóa tối thiểu.

Phần tử Kiểm tra là gì?

Kiểm tra phần tử là một công cụ dành cho nhà phát triển. Nó có sẵn trên Safari, mặc dù cũng có trên các trình duyệt web khác như Chrome, Firefox và Edge. Với Kiểm tra phần tử, bạn có thể nhìn vào phía sau bức màn của một trang web để tiết lộ mã giao diện người dùng của nó, như HTML và CSS. Tuy nhiên, nó không cung cấp cho bạn khả năng hiển thị của back-end, giống như cơ sở dữ liệu của nó.

Bạn không chỉ có thể nhìn thấy mã này mà còn có thể chỉnh sửa nó. Điều này có nghĩa là bạn có thể thay đổi giao diện của một trang web. Bạn có thể thay thế một hình ảnh, diễn đạt lại một số văn bản, sử dụng một phông chữ khác, chuyển đổi bảng màu của nó và hơn thế nữa. Tuy nhiên, những chỉnh sửa này là cục bộ. Họ sẽ không xuất hiện với bất kỳ ai khác ngoại trừ bạn; chúng sẽ biến mất khi bạn làm mới hoặc di chuyển khỏi trang.

Tại sao bạn nên sử dụng phần tử Kiểm tra?

Kiểm tra phần tử là một công cụ tuyệt vời nếu bạn là một nhà phát triển web mới bắt đầu. Theo đúng nghĩa đen, bạn có thể thấy mã hỗ trợ trang web yêu thích của mình, điều chỉnh nó theo ý muốn trong môi trường thế giới thực. Có rất nhiều thông tin chi tiết thú vị mà bạn có thể đạt được khi sử dụng phần tử Kiểm tra.

Ví dụ: chủ doanh nghiệp có thể xem xét các từ khóa có trong trang web của đối thủ cạnh tranh hoặc các nhà thiết kế có thể sử dụng Kiểm tra phần tử để xác định phông chữ mà họ thấy hấp dẫn hoặc để nhanh chóng thử nghiệm một bảng màu khác trên trang web của họ.

Hiện tại, chúng ta sẽ tập trung vào việc chỉnh sửa những điều cơ bản của một trang web bằng cách sử dụng phần tử Kiểm tra.

Cách truy cập phần tử Kiểm tra trên Safari

Bạn có thể mở Kiểm tra phần tử trên Safari bằng menu nhà phát triển:

1. Mở Safari.
2. Nhấp chuột Safari trong thanh menu trên cùng.
3. Từ menu thả xuống, hãy chọn Sở thích.
4. Chọn Nâng cao Lựa chọn.
5. Chọn hộp cho biết Hiển thị menu Phát triển trong thanh menu.

Sau khi chọn tùy chọn này, bạn có thể nhấp chuột phải trên một trang web và chọn Kiểm tra nguyên tố. Ngoài ra, bạn có thể chọn Phát triển, xây dựng trong thanh menu, và sau đó Hiển thị trình kiểm tra web.

Cách tìm phần tử web trong phần tử kiểm tra

Để bắt đầu chỉnh sửa một phần tử, nhấp chuột phải những gì bạn muốn chỉnh sửa và nhấp vào Kiểm tra nguyên tố. Thao tác này sẽ mở ra cửa sổ nhà phát triển, với phần có liên quan được đánh dấu. Bạn có thể thấy rằng phần tử cụ thể mà bạn muốn thành phần (ví dụ như hình ảnh hoặc văn bản) bị ẩn; để xác định vị trí của nó, hãy sử dụng mũi tên ở bên trái để mở rộng các phần lồng nhau.

Để giúp thu hẹp lựa chọn của bạn, hãy nhấp vào biểu tượng mục tiêu từ thanh công cụ Kiểm tra phần tử. Bây giờ, khi bạn điều hướng qua mã, nó sẽ làm nổi bật phần đó trên trang web. Hoặc bạn có thể sử dụng con trỏ để xác định một phần trên trang web. Điều này rất hữu ích khi bạn muốn trau dồi một thứ gì đó cụ thể trong một khu vực đông đúc của một trang web.

Cách chỉnh sửa văn bản của trang web bằng phần tử kiểm tra

Để làm cho một đoạn văn bản có thể chỉnh sửa được sau khi tìm thấy nó trong mã nguồn của trang web, nhấn đúp chuột nó. Bạn có thể nhập văn bản mới trực tiếp vào mã hoặc xóa văn bản hiện có. Khi quá trình chỉnh sửa hoàn tất cho một chuỗi văn bản nhất định, hãy nhấn đi vàovà văn bản trên trang web sẽ thay đổi.

Nó thực sự đơn giản như vậy! Lần duy nhất điều này không hoạt động là khi văn bản thực sự là một phần của hình ảnh, chẳng hạn như biểu trưng.

Cách chỉnh sửa hình ảnh của trang web bằng phần tử kiểm tra

Mặc dù hình ảnh hiển thị trực quan với bạn trên giao diện người dùng, nhưng trong mã trang web, chúng xuất hiện dưới dạng liên kết. Bạn có thể nhấp chuột phải và hình ảnh và chọn Kiểm tra nguyên tố để chuyển đến vị trí của hình ảnh đó trong mã. Hình ảnh trang web thường có phần mở rộng tệp JPG, GIF hoặc PNG, mặc dù không chỉ.

Nhấn đúp chuột những chuỗi hình ảnh này và bạn có thể chỉnh sửa chúng hoặc chỉ cần lưu chúng vào hệ thống của bạn nếu muốn. Nếu bạn muốn thay thế hình ảnh, hãy chuyển nó sang một URL hình ảnh thay thế. Hoặc bạn có thể xóa hoàn toàn chuỗi mã để xóa hình ảnh khỏi chế độ xem.

Tìm hiểu các trang web bằng Safari

Công cụ Kiểm tra phần tử của Safari cho phép bạn dễ dàng tìm và thay đổi mã tương ứng với văn bản và hình ảnh, dễ dàng như chuyển đổi một văn bản hoặc chuỗi URL. Khi bạn đã hoàn tất việc chỉnh sửa một trang web với phần tử Kiểm tra, chỉ cần làm mới trang và mọi thứ sẽ trở lại bình thường.

Đọc tiếp

Thông tin về các Tác giả