Việc phát triển các trang web cho thiết bị di động hoặc gỡ lỗi ứng dụng kết hợp của bạn thường rất khó khăn. Nhưng may mắn cho những người thiết kế trên iOS, bắt đầu từ iOS 6, Apple đã cung cấp tính năng kiểm tra web từ xa trong iOS.
Trình kiểm tra web cho phép các nhà phát triển web và ứng dụng di động sử dụng MacOS và OS X Safari Developer Tools để gỡ lỗi từ xa nội dung web hoặc ứng dụng kết hợp trong Safari di động trên iPad hoặc iPhone.
Đây là một cách dễ dàng và thiết thực để gỡ lỗi, tối ưu hóa và sửa đổi các trang web hoặc ứng dụng kết hợp của bạn trên iOS.
Để truy cập các công cụ phát triển này, hãy bật menu Phát triển trên tùy chọn Nâng cao của Safari trên máy Mac của bạn.
Thực hiện theo các mẹo nhanh sau để giúp trình kiểm tra web hoạt động để bạn có thể gỡ lỗi trang web hoặc ứng dụng của mình cho Safari
- Đặt lại cài đặt vị trí và quyền riêng tư của bạn trên iPhone, iPad hoặc iPod touch. Đi đếnCài đặt> Chung> Đặt lại> Đặt lại Vị trí & Quyền riêng tư
- Đảm bảo bạn đăng nhập vào cùng một ID Apple trên máy tính như iPhone, iPad hoặc iPod touch của bạn
- Bật đồng bộ hóa Safari iCloud cho cả máy tính và bất kỳ iPhone, iPad hoặc iPod touch nào
- Trên iPhone hoặc iPad, hãy truy cậpCài đặt> Safari> Nâng cao và bật Trình kiểm tra web
- Trên máy tính, mở Safari và chuyển đếnMenu Safari> Tùy chọn> Nâng cao và đánh dấu Hiển thị menu Phát triển trong thanh menu
Yêu cầu máy tính Mac
Xin lỗi các bạn Windows nhưng Safari’s Web Inspector chỉ tương thích với máy Mac!
Sử dụng cùng một ID Apple và Đồng bộ hóa iCloud!
Đảm bảo rằng cả iDevice và máy Mac của bạn đều được đăng nhập bằng cùng một ID Apple và bạn đã bật BẬT Safari trong iCloud.
Đối với iDevice của bạn:Cài đặt> Hồ sơ ID Apple> iCloud> Safari> bật tắt BẬT
Đối với máy Mac của bạn:Menu Apple> Tùy chọn hệ thống> Apple ID hoặc iCloud> Safari> Đã đánh dấu chọn
Và kiểm tra xem Safari cũng là phiên bản tương tự
Đảm bảo Safari trên máy Mac của bạn là cùng một phiên bản với Safari trên iDevice của bạn. Bạn có thể cần cập nhật phiên bản iOS hoặc phiên bản Safari chạy trên máy Mac của mình.
Đặt lại cài đặt vị trí và quyền riêng tư của bạn
- Đi đến Cài đặt> Chung
- Lựa chọn Cài lại
- Chọn để Đặt lại vị trí và quyền riêng tư
Mẹo sử dụng phím tắt dành cho bàn phím chuyên nghiệp trên Mac dành cho Web Devs
Nếu bạn nhấn CTRL + Command + R trong Safari, bạn có thể xem trang web sẽ trông như thế nào trên một thiết bị cụ thể bằng cách chọn thiết bị đó.
Chuyển đổi phím tắt để thoát khỏi chế độ xem web dev. Sử dụng Trình kiểm tra web để gỡ lỗi Safari di động
1. Trên iPad, iPhone hoặc iPod touch của bạn, hãy nhấn Cài đặt> Safari> Nâng cao và bật Thanh tra Web. Và bật JavaScript nếu nó chưa được bật
2. Trên máy Mac của bạn, khởi chạy Safari và đi tới Menu Safari> Tùy chọn> Nâng cao sau đó kiểm tra "Hiển thị menu Phát triển trong thanh menu”Nếu bạn chưa làm như vậy
3. Kết nối thiết bị iOS của bạn với máy Mac bằng cáp USB. Điều này rất quan trọng - bạn phải kết nối các thiết bị theo cách thủ công, sử dụng cáp. Nó không hoạt động qua WiFi!
4. Bây giờ trên iPad của bạn, hãy mở trang web mà bạn muốn gỡ lỗi, sau đó, trên máy Mac, hãy mở Safari và đi tới “Phát triển, xây dựng" thực đơn. Bây giờ bạn thấy iDevice của mình mà bạn đã kết nối với máy Mac của mình. Nếu bạn không mở bất kỳ trang nào trên iDevice của mình, bạn sẽ thấy thông báo “Không có ứng dụng có thể kiểm tra”.
5. Bây giờ gỡ lỗi trang đang mở trên Safari di động giống như bạn gỡ lỗi trên Mac, kiểm tra các phần tử DOM, sửa đổi CSS, đo hiệu suất trang và chạy các lệnh Javascript.
Sử dụng công cụ gỡ lỗi để giúp bạn tìm ra nguyên nhân của bất kỳ lỗi JavaScript nào trên trang web của bạn. Bạn có thể thêm các điểm ngắt, gỡ lỗi javascript và kiểm tra giá trị của các biến trong thời gian chạy.
Safari cũng sẽ phát hiện bất kỳ lỗi CSS, HTML và JavaScript nào. Và bạn sẽ thấy chi tiết của từng lỗi trong trình gỡ lỗi.
iDevice không hiển thị trong menu phát triển trong Safari?
- Xóa bộ nhớ cache và cookie Safari của bạn
- Cập nhật Safari trên máy Mac và iDevice của bạn nếu có bản cập nhật
- Nếu bạn chạy phiên bản iOS hoặc macOS beta, bạn có thể cần chạy bản beta mới nhất trên tất cả các thiết bị
- Thử cáp và / hoặc cổng khác trên máy Mac của bạn. Đảm bảo rằng cáp đó là cáp Lightning chính hãng của Apple hoặc được Chứng nhận MFI (Sản xuất cho iPhone)
- Kiểm tra xem Trình kiểm tra web có được bật BẬT không. Các bản cập nhật iOS đôi khi chuyển điều này trở lại cài đặt TẮT mặc định. Vì vậy, chỉ cần đảm bảo kiểm traCài đặt> Safari> Nâng cao> Trình kiểm tra web
- Thử tắt Trình kiểm tra web, đợi 10 giây và bật lại
- Hãy dùng thử trình duyệt Safari Technology Preview để thay thế
- Thoát khỏi Safari trên máy Mac của bạn và khởi động lại nó. Xem liệu Safari của máy Mac có nhận ra thiết bị của bạn hay không và cho phép gỡ lỗi
- Kiểm tra để đảm bảo rằng bạn không sử dụng chế độ Duyệt web riêng tư của Safari nếu iDevice của bạn chỉ hiển thị trong thời gian ngắn trong menu Phát triển của Safari và sau đó biến mất
- Mở Trình theo dõi hoạt động và kiểm tra những gì đang diễn ra với Safari
Mẹo dành cho người đọc 
- Nếu bạn đang sử dụng iDevice cũ hơn với iOS 6 trở xuống, trình duyệt web Safari trên thiết bị của bạn có Bảng điều khiển gỡ lỗi tích hợp riêng! Chỉ cần truy cập Bảng điều khiển gỡ lỗi của Safari bằng cách đi tớiCài đặt > Safari > Nhà phát triển > Bảng điều khiển gỡ lỗi
