Cách kiểm tra phần tử (Inspect Element) trên iPhone: Mọi thứ bạn cần biết để học chỉnh code trang Web

Trong trường hợp bạn không biết, một trang web được tạo thành từ một loạt các Element / phần tử được format để xuất hiện dưới dạng một thực thể duy nhất. Các nhà phát triển web được yêu cầu phải hiểu từng yếu tố này, cách chúng được bố trí trên trang web và xem từng yếu tố trong số chúng hoạt động như thế nào.

Người dùng Windows và Mac sẽ quen thuộc với tùy chọn “Inspect” hoặc “Inspect element” khả dụng khi nhấp chuột phải vào bất kỳ trang web nào. Những gì tùy chọn này cung cấp là một cách để xem mã nguồn của trang web, xem tất cả các phần tử của nó, dòng mã đằng sau mỗi phần tử đó và chỉnh sửa Javascript, HTML, CSS và tất cả các file phương tiện khác có trên đó. Bằng cách này, bạn không chỉ tìm hiểu cách hoạt động và chức năng của một trang web cụ thể mà còn thực hiện các sửa đổi đối với nó trên trình duyệt của riêng bạn mà chúng không ảnh hưởng đến trang web thực tế. 

Hình ảnh và văn bản hiển thị trên Web là các phần tử như HTML, CSS …

Mặc dù tùy chọn kiểm tra được biết đến là một công cụ “developer” nhưng không chỉ các lập trình viên được hưởng lợi từ nó. Ngay cả những người mới bắt đầu và những người không phải là nhà phát triển cũng có thể sử dụng công cụ này để tìm hiểu cách một trang web được xây dựng và cách mỗi phần tử của nó hoạt động chung. Nếu bạn đang muốn sử dụng tùy chọn phần tử kiểm tra khi duyệt web trên iPhone, bài đăng này sẽ giúp bạn tìm ra cách để thực hiện điều đó. 

Bạn có thể kiểm tra các phần tử web trực tiếp trên Safari không?

Câu trả lời đơn giản là không có. Safari trên iOS, giống như nhiều trình duyệt di động khác không cung cấp cho bạn công cụ kiểm tra gốc để xem sự phát triển của trang web. Apple không cung cấp lý do tại sao không có tùy chọn như vậy nhưng chúng tôi tin rằng nó có liên quan đến việc màn hình nhỏ trên smartphone như thế nào. Kích thước hiển thị nhỏ hơn có thể khiến người dùng khó di chuyển xung quanh các hộp đang được kiểm tra vì bạn có thể phải đặt con trỏ cẩn thận khi bạn muốn chỉnh sửa mã của trang web hoặc thậm chí định vị mã của trang web. 

Một lý do khác cho điều này có thể là do smartphone thiếu sức mạnh tính toán. Mặc dù iPhone hiện đại có đủ sức mạnh để chạy các game đòi hỏi nhiều đồ họa, nhưng có thể hơi khó để xem thông tin trang của trang web vì không phải tất cả các trang web đều được tạo như nhau. Một số trang web có thể có nhiều tài nguyên và các lớp được làm cẩn thận để làm cho nó trông liền mạch nhưng các tài nguyên giống nhau có thể mất một khoảng thời gian để tải lên khi được kiểm tra. 

Kiểm tra phần tử trên iPhone: Bạn có những tùy chọn nào khác?

Mặc dù ban đầu bạn không thể sử dụng công cụ ‘Inspect element’ trên ứng dụng Safari trên iOS, nhưng vẫn có nhiều cách để khắc phục hạn chế này. Dưới đây là ba cách bạn có thể kiểm tra các phần tử của trang web bạn truy cập trên Safari trên iPhone của mình. 

Phương pháp # 01: Sử dụng Safari trên máy Mac

Nếu bạn sở hữu một thiết bị macOS ngoài iPhone, thì bạn vẫn có thể kiểm tra các trang web trực tiếp từ ứng dụng Safari, nhưng trên máy Mac. Apple cho phép bạn gỡ lỗi các trang web từ Safari trên iOS giống như bạn làm trên Mac bằng công cụ ‘Develop’ của nó. Mặc dù quá trình gỡ lỗi một trang web tương đối đơn giản, nhưng quá trình thiết lập ban đầu của nó có thể lâu hơn những gì bạn có thể mong đợi. Nhưng đừng lo, chúng tôi sẽ giải thích quá trình thiết lập theo cách đơn giản nhất có thể và giúp bạn kiểm tra các trang một cách dễ dàng sau lần đầu tiên. 

Bật Web Inspector trên iOS

Để có thể debug các phần tử web, trước tiên bạn cần bật Trình kiểm tra web cho ứng dụng Safari trên iOS. Để thực hiện việc này, hãy mở ứng dụng Cài đặt và chọn ‘Safari’.

Trong Safari, cuộn xuống và nhấn vào ‘Advanced’. 

Trên màn hình tiếp theo, hãy nhấn vào nút chuyển đổi bên cạnh ‘Trình kiểm tra web’ cho đến khi nó chuyển sang màu xanh lục. 

Thiết lập ban đầu trên Mac

Khi bạn đã bật thành công Trình kiểm tra web cho Safari trên iOS, bây giờ đã đến lúc hoàn tất thiết lập trên máy Mac. Trên Mac, mở ứng dụng Safari, nhấp vào tùy chọn ‘Safari’ từ thanh Menu và chọn ‘Preferences’. 

Trong cửa sổ xuất hiện, chọn tab ‘Advacned’ từ trên cùng và chọn hộp ‘Show Develop menu in menu bar’. 

Bây giờ bạn sẽ thấy tùy chọn ‘Develop’ xuất hiện ở thanh Menu ở trên cùng. 

Bây giờ, sử dụng cáp USB đi kèm với iPhone, hãy thiết lập kết nối giữa iPhone và Mac. Khi iPhone được kết nối với Mac, bạn có thể nhấp vào ‘Develop’ trên thanh Menu và xem iPhone có xuất hiện trong danh sách thiết bị hay không. Nếu có, hãy nhấp vào tên thiết bị từ danh sách này. 

Để đảm bảo bạn có thể kiểm tra các trang web không dây mà không cần cáp USB như cách bạn vừa làm vừa rồi, hãy nhấp vào tùy chọn ‘Connect via Network’ khi menu iPhone mở ra. 

Bây giờ, bạn có thể ngắt kết nối iPhone của mình khỏi máy Mac và bạn vẫn có thể kiểm tra các trang web mà không cần kết nối cáp giữa chúng. 

Kiểm tra các trang web từ iOS trên máy Mac

Bây giờ bạn đã bật ‘Connect via Network’ trên menu ‘Develop’, bạn có thể kiểm tra các trang web từ Safari trên iOS trực tiếp trên máy Mac của mình. Bạn chỉ cần đảm bảo rằng cả iPhone và Mac đều được kết nối với cùng một mạng không dây để có thể gỡ lỗi không dây các trang web. 

Đối với điều này, hãy mở ứng dụng Safari trên iPhone và truy cập trang web bạn muốn kiểm tra. 

Khi iPhone được mở khóa và trang web đã chọn đang mở, hãy chuyển sang máy Mac và mở ứng dụng Safari ở đó. Tại đây, nhấp vào ‘Develop’ từ thanh menu và chuyển đến ‘iPhone’. 

Khi di chuột qua ‘iPhone’, bạn sẽ thấy danh sách các trang web đang mở trên iOS. Nhấp vào trang web bạn muốn kiểm tra từ danh sách này. 

Một cửa sổ mới sẽ tải lên trên máy Mac hiển thị tất cả thông tin có thể được kiểm tra từ trang web đã chọn. 

Bất kỳ lúc nào trong quá trình kiểm tra, bạn sẽ có thể xem dòng mã trỏ đến phần nào của trang bằng cách tìm kiếm vùng màu xanh lam trên iPhone.

Vùng màu xanh lam này cho biết rằng mã bạn đang di chuột qua trên Mac là mã tạo nên phần tử được đánh dấu cho trang web cụ thể này. Di chuyển giữa các dòng mã khác nhau sẽ di chuyển điểm đánh dấu màu xanh lam này qua các phần khác nhau của trang trên iPhone trong thời gian thực. 

Phương pháp # 02: Sử dụng phím tắt trên iOS 

Nếu bạn không sở hữu máy Mac hoặc muốn xem trước một trang web trực tiếp từ iPhone của mình, thì bạn sẽ rất vui khi biết rằng ứng dụng Phím tắt iOS dành cho việc này. Ứng dụng Phím tắt trên iOS cung cấp một loạt các lựa chọn được tạo sẵn cho phép bạn xem mã nguồn của trang, chỉnh sửa trang web, lấy hình ảnh từ trang web và tìm kiếm các phiên bản cũ hơn của trang web từ bên trong ứng dụng Safari. Thật không may, không có phím tắt duy nhất cung cấp gỡ lỗi web chính thức trên iOS, vì vậy bạn sẽ cần thêm một phím tắt cho từng mục đích này. 

Chúng tôi đã tìm thấy các phím tắt sau mà bạn có thể sử dụng để thực hiện gỡ lỗi trên các trang web trực tiếp từ iOS. Đó là:

View Source – Phím tắt này cho phép bạn xem mã nguồn của một trang web ở format cơ sở. 

Chỉnh sửa trang web – Lối tắt này cho phép bạn chỉnh sửa cục bộ nội dung của trang web để bạn có thể kiểm tra thiết kế hoặc format mới và giao diện của nó trên iPhone. 

Lấy Hình ảnh từ Trang – Lý do chính để kiểm tra một trang có thể là xem hình ảnh hoặc lưu những hình ảnh không tương tác. Phím tắt này lấy tất cả các hình ảnh từ một trang web nhất định và sau đó xem trước chúng một cách chung. Như ảnh chụp màn hình bên dưới chỉ ra, bạn có thể xem từng hình ảnh trong số 24 hình ảnh được lưu trữ trên trang web đã chọn. 

Wayback Machine – Lối tắt này đưa bạn đến Wayback Machine của trang web nơi bạn có thể xem các phiên bản trước của nó vẫn được lưu trên Internet Archive. 

Tùy thuộc vào cách bạn muốn kiểm tra các trang web trên iOS, bạn có thể thêm bất kỳ phím tắt nào trong số này vào iPhone của mình bằng cách nhấp vào các liên kết có liên quan ở trên hoặc tìm kiếm chúng trong Phím tắt> Thư viện. 

Trong kết quả tìm kiếm, hãy nhấn vào phím tắt bạn muốn thêm vào iPhone. 

Khi màn hình xem trước mở ra, hãy nhấn vào tùy chọn ‘Thêm tiện ích con’ ở dưới cùng. 

Tất cả các phím tắt sẽ xuất hiện bên trong màn hình Phím tắt của tôi> Tất cả phím tắt và chúng cũng sẽ có thể truy cập được bên trong trang Chia sẻ của Safari.  

Để kiểm tra một trang web, hãy mở nó trên Safari và nhấn vào nút ‘Chia sẻ’ ở dưới cùng. 

Trong trang Chia sẻ xuất hiện, cuộn xuống và tìm các phím tắt bạn đã thêm vào iPhone của mình. 

Việc chọn ‘Chỉnh sửa Trang Web’ sẽ cho phép bạn chỉnh sửa trực tiếp các phần của trang web. Khi bạn chọn bất kỳ tùy chọn nào trong ba tùy chọn còn lại, bạn sẽ được nhắc xem bạn có muốn phím tắt để truy cập trang web hay không. Tại đây, hãy nhấn vào ‘Cho phép một lần’. 

Liên quan: Cách thêm WidgetSmith vào Màn hình chính

Phương pháp # 03: Sử dụng ứng dụng của bên thứ ba

Nếu không hài lòng với kết quả trên, bạn sẽ phải khám phá các ứng dụng của bên thứ ba để có thể kiểm tra các thành phần của trang web. Tương tự như Safari, bạn sẽ không tìm thấy cách kiểm tra trang web bên trong các trình duyệt web phổ biến nhất (Chrome, Firefox, Brave, v.v.). Thay vào đó, bạn sẽ phải dựa vào một ứng dụng được tạo ra để thực hiện tác vụ cụ thể này và những ứng dụng như thế này có thể khó tìm.

Mặc dù một tìm kiếm đơn giản trên App Store sẽ mang lại cho bạn một số kết quả để kiểm tra các yếu tố web, nhưng bạn sẽ không tìm thấy nhiều ứng dụng có sẵn miễn phí và được đánh giá cao. Dựa trên phản hồi của người dùng, chúng tôi khuyên bạn nên cài đặt  ứng dụng Inspect Browser hoặc Gear Browser từ App Store, ứng dụng này cung cấp khả năng kiểm tra và chỉnh sửa phần tử trên JavaScript, CSS và HTML. 

Đó là tất cả những gì bạn cần biết về việc kiểm tra và chỉnh sửa Code trên iPhone. 

Xem thêm về:

Chia sẻ suy nghĩ, quan điểm của bạn

Leave a reply

Tìm kiếm

Copyright Saohaivuong All Rights Reserved.

Sao Hải Vương
Logo