Hướng dẫn cài đặt công cụ để debug safari của iOS trên windows

https://namth.com/huong-dan-cai-dat-cong-cu-de-debug-safari-cua-ios-tren-windows

Hướng dẫn cài đặt công cụ để debug safari của iOS trên windows

• admin

• Tutorial

Việc làm web hỗ trợ tất cả các trình duyệt từ bé đến to đã không còn xa lạ, nên việc debug trên các trình duyệt để tìm ra được lỗi cũng là vấn nạn lớn.Nếu trên chrome hay Firefox trên win hay mac thì chúng ta có Inspect/Inspect Element để xem log, hoặc chỉnh sửa nếu lỗi css mà không cần edit source. Với Chrome trên Windows/macOS thì đã hỗ trợ sẵn debug inspect Chrome trên Android rồi, nhưng Safari trên iOS lại là chuyện khác, chỉ có thể sử dụng Safari trên macOS để debug. Trước mình dùng macOS để code(vì nó đẹp từ trong ra ngoài) nên việc debug ở tất cả các trình duyệt, hay thiết bị rất dễ dàng. Nhưng khi dùng máy Windows trên công ty thì không thể debug trên iOS nữa, nên phải mò các cách khác để debug. Đã tìm ra được thư viện nhưng chạy được lại là một chuyện khác. Chính chủ thư viện ở đây. https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter Nhưng để cho nó chạy được với các phiên bản iOS khác nhau thì phải làm nhiều cách khác nhau. Tùy thuộc vào phiên bản máy bạn muốn debug mà chỉnh sửa. Các bạn nên đọc hết hướng dẫn rồi mới bắt tay vào làm. Chung cho tất cả các phiên bản:

Cài đặt

1. Cài đặt thư viện cần thiết

Bạn phải cài đặt phiên bản mới nhất của iTunes (nghe nói sắp bị khai tử), chúng ta cần vài thư viện cung cấp bởi iTunes để kết nối với thiết bị iOS. Cài đặt ios-webkit-debug-proxy và libimobiledevice. Trên window bạn có thể sử dụng scoop:

scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

2. Cài phiên bản adapter mới nhất

npm install remotedebug-ios-webkit-adapter -g

3. Bật remote debugging trong Safari

Để mở cửa từ ios trên safari thì bạn cần bật remote debugging trong cài đặt. Mở cài đặt iOS => Tùy chỉnh Safari => Advanced => Bật "Web Inspector"

4. Làm thiết bị iOS tin tưởng máy tính của bạn

Khi bạn kết nối máy iOS qua dây sẽ hiện lên thông báo "Trust this computer". Ấn em đồng ý. Nếu không có thông báo, nghĩa là máy bạn đã thuộc vào dạng trusted, còn không thì chịu.

5. Chạy adapter từ command line

remotedebug_ios_webkit_adapter --port=9000

BTW: ios-webkit-debug-proxy sẽ tự động chạy cùng, không cần phải chạy riêng.

Mở chrome lên và tận hưởng thành quả

Tùy Chỉnh

Usage: remotedebug_ios_webkit_adapter --port [num]

Options:
  -p, --port  the adapter listerning post  [default: 9000]
  --version   prints current version

Cách sử dụng

Có nhiều các sử dụng như readme của thư viện có nói, mình chỉ hướng dẫn với Chome, còn lại các bạn tự mò ). Mở tab mới chrome://inspect/#devices Phần Discover network targets => Configure... Thêm vào localhost:9000(9000 sẽ là port khi bạn chạy adapter ở trên) => Done Thế là xong hết các bước cài đặt và sử dụng. Nhưng theo mình tìm hiểu thì bản hiện tại chỉ hỗ trợ iOS 10, nếu thiết bị của bạn dùng phiên bản iOS 11 hay 12 thì phải làm một số bước nữa.

Tùy chỉnh cho iOS 11

Cách này được tìm thấy từ một issue https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/79#issuecomment-351472710

Tùy chỉnh cho iOS 12

Máy mình sử dụng iOS 12 nên mình biết nó hoạt động, còn lại các iOS khác thì mình chịu, các bạn tự test nhé. Với iOS 12 thì mình sử dụng repo khác <https://github.com/arseneyr/remotedebug-ios-webkit-adapter> pull repo này về và run nó thôi

npm install
npm start

Tổng kết

Cách debug này không thể nào giống như debug Chrome trên Android được, thỉnh thoảng giật lag, hoặc mãi mới hiện ra các tabs, nhưng ít nhất là mình cũng biết được lỗi, info in ra ở console, chỉnh sửa được style... giúp dễ dàng trong việc debug Safari trên iOS.