Remote Debugging for Chrome iOS (and Safari)

by

The selected answer is only for Safari. At the moment it’s not possible to do real remote debugging in Chrome on iOS, but as with most mobile browsers you can use WeInRe for some simple debugging. It’s a bit work to set up, but lets you inspect the DOM, see styling, change DOM and play with the console.

enter image description here

To setup:

  • Install nodejs
  • npm install -g weinre
  • weinre --boundHost -all-
  • Open http://{wifi-ip-address}:8080/ and copy the target script code
  • Paste the script tag into your page (or use the bookmarklet)
  • Click on the link to the debug client user interface (http://{wifi-ip-address}:8080/client/#anonymous)
  • When you get a green line under Clients the browser is connected

The bookmarklet is a bit more of an hassle to install. It’s easiest if you have bookmark-sync turned on for both desktop and mobile Chrome. Copy the bookmarklet url from the local weinre server (same as above). Unfortunately it doesn’t work because it’s not url-encoded properly. So open the JavaScript console and type in:

copy(encodeURI('')); // paste bookmarklet inside quotes

You should now have the url-encoded bookmarklet in your clipboard. Paste it into a new bookmark under Mobile Bookmarks. Call it weinre or something simple to type. It should be synced to your mobile pretty fast, so load the page you want to inspect. Then type in the bookmark name in the url-bar, and you should see the bookmarklet as an auto-complete-suggestion. Click it to run bookmarklet code 🙂

enter image description here

More Related Contents:

  1. Disabling Chrome cache for website development
  2. “CAUTION: provisional headers are shown” in Chrome debugger
  3. Is there a way to get the XPath in Google Chrome?
  4. Using Chrome’s Element Inspector in Print Preview Mode?
  5. How do you inspect the web inspector in Chrome?
  6. What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
  7. What’s the difference between “Normal Reload”, “Hard Reload”, and “Empty Cache and Hard Reload” in Chrome?
  8. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  9. Chrome stalls when making multiple requests to same resource?
  10. Automatically open Chrome developer tools when new tab/new window is opened
  11. Chrome DevTools Devices does not detect device when plugged in
  12. How to reposition Chrome Developer Tools
  13. Bizarre Error in Chrome Developer Console – Failed to load resource: net::ERR_CACHE_MISS
  14. Making HTTP Requests using Chrome Developer tools
  15. Chrome: Source of Post Data?
  16. How to search all loaded scripts in Chrome Developer Tools?
  17. “Inspect” a hover element?
  18. Chrome not showing OPTIONS requests in Network tab
  19. Multiple URLs copy in Sources/Network tab
  20. Understanding Chrome network log “Stalled” state
  21. Chrome 84 Inspect element, find results not highlighted in yellow like before
  22. Chrome developer tools workspace mappings
  23. Chrome Dev Tools: How to trace network for a link that opens a new tab?
  24. How to block a URL in Chrome’s developer tools network monitor
  25. Chrome Console SameSite Cookie Attribute Warning
  26. Chrome remote debugging doesn’t work with IP
  27. Can Google Chrome open local links?
  28. Is it possible to run Google Chrome in headless mode with extensions?
  29. Why XPath does not highlighted the yellow mark in Chrome84?
  30. Chrome blocks FastAPI file download using FileResponse due to using HTTP instead of HTTPS

Leave a Comment