iOS Remote Debugging

Question

With the recent release of Chrome for iOS  I was wondering how do you enable remote debugging for Chrome iOS   Update  With the release of iOS 6  remote debugging can now be done with Safari

User · Answer

Disclaimer  I work at BrowserStack   Confirmed that whether am allowed to post this  Can I suggest a product of the company am working at      Debug Safari on iOS  not for Chrome as of now  read ahead for more details    How this works    You need to start a session on any real device  there are emulators but you need to start a session on a real device  on BrowserStack  say iPhone 6S - Safari   Chrome no devtools for Chrome yet  but it is on our Roadmap  Type in the URL You can trigger DevTools to inspect the webpage opened on the BrowserStacks remote device  I ve shared the screens for the same below      Using DevTools with Real Phones  Hover over the elements  edit HTML  CSS just like desktop browser devtools work       Executing JavaScript in real phone using DevTools  Switch to Console tab  execute JavaScript code  check console log   output and so on         Network tab  check request headers  response and so on         Support for DevTools on BrowserStack    DevTools are available on     Real Devices - iOS - Safari  DevTools for iOS Chrome is on our Roadmap  Real Devices - Android - Chrome  Only Chrome is available on Android devices for now   Client browser needs to be Chrome or Firefox  That means you need to use Chrome or Firefox browser on MacOSX or Windows to use BrowserStack Real Device DevTools    Note  You need to buy a plan to test on all real devices  as a free user  you ll get couple of Real Android devices  includes tablets  and couple of Real iOS devices  includes tablets   Also  emphasizing on the word Real Devices because they provide emulators as well   More details on this  please refer to DevTools section on Mobile Features page

User · Answer

You also need to have  Private Browsing  turned OFF   Settings   Safari   Private Browsing   OFF

User · Answer

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     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

User · Answer

Adobe Edge Inspect  https   creative adobe com products inspect  is another way to debug all your mobile devices IOS and Android  no Windows Phone though   It uses weinre for remote DOM inspection changing  It s not the fastest of methods  but it works on Windows

User · Answer

I haven t tried it  but iOS WebKit debug proxy  ios webkit debug proxy   iwdp  supposedly lets you remotely debug UIWebView  From the README md     The ios webkit debug proxy  aka iwdp  allows developers to inspect   MobileSafari and UIWebViews on real and simulated iOS devices via   the Chrome DevTools UI and Chrome Remote Debugging Protocol  DevTools   requests are translated into Apple s Remote Web Inspector service   calls

User · Answer

Note  I have no affiliation with Ghostlab creators Vanamco whatsoever   It was important to me to be able to debug Chrome-specific problems  so I set out to find something that could help me with that  I ended up happily throwing my money at Ghostlab 3  I can test Chrome and Safari mobile browsers as if I was viewing them on my desktop  It just gives me a LAN address to use for any device I   d like to debug  Each application using that address will appear in the list in Ghostlab       Highly recommended

User · Answer

Update   This is not the best answer anymore  please follow gregers  advice   New answer   Use Weinre   Old answer   You can now use Safari for remote debugging  But it requires iOS 6   Here is a quick translation of http   html5-mobile de blog ios6-remote-debugging-web-inspector   Connect your iDevice via USB with your Mac Open Safari on your Mac and activate the dev tools On your iDevice  go to settings   safari   advanced and activate the web inspector Go to any website with your iDevice On your Mac  Open the developer menu and chose the site from your iDevice  its at the top Safari Menu    As pointed out by Simons answer one need to turn off private browsing to make remote debugging work   Settings   Safari   Private Browsing   OFF

User · Answer

You cannot directly remote debug Chrome on iOS currently  It uses a uiWebView that may act subtly different than Mobile Safari   You have a few options   Option 1  Remote-debug Mobile Safari using Safari s inspector  If your issue reproduces in Mobile Safari  this is definitely the best way to go  In fact  going through the iOS simulator is even easier   Option 2  Use Weinre for a slimmed down debugging experience   Weinre doesn t have much features but sometimes it s good enough   Option 3  Remote debug a proper uiWebView that functions the same   Here s the best way to do this  You ll need to install XCode    Go to github com paulirish iOS-WebView-App and  Download Zip  or clone   Open XCode  open existing project  and choose the project you just downloaded  Open WebViewAppDelegate m and change the urlString to be the URL you want to test  Run the app in the iOS Simulator  Open Safari  Open the Develop Menu  Choose iOS Simulator and select your webview  Safari Inspector will now be inspecting your uiWebView

User · Answer

I am using remotedebug-ios-webkit-adapter  works well for me with IOS and debugger open in Chrome on Windows 10   Will be glad if it helps some one Link

User · Answer

Many remote consoles work fine  http   farjs com is my project  and I was able to successfully debug issues specific to Crome iOS and not happening in safari using it   and probably all other mobile browsers   The problem is that injecting the debugging code is slightly tricky since Chrome doesn t allow you to install bookmarklets    Instead you could open one tab on the page that you would debug  and another on farjs com and then click  the bookmarklet   Copy the bookmarklet JS code  get back to the first tab  with the page that should be debugged  and paste the bookmarklet code in the location bar   Last step is to scroll to the beginning of the location bar and add  javascript    since Chrome will remove it

User · Answer

iOS WebKit debug proxy is the simpliest solution - debug and live preview directly in Chrome

User · Answer

There is an open bug on Chromium  https   bugs chromium org p chromium issues detail id 584905  Unfortunately they depend on Apple to open up an API in WKView for this to happen  after which maybe debugging will be available from Safari

User · Answer

I recommend Vorlon  works like weinre  I like the UI of Vorlon  and it support SSL  my application is in HTTPS  I tried weinre with ngrok  ghostlab and vorlon  only vorlon works fine

User · Answer

Vorlon JS can be used for remote debugging of iOS or any other client    Just install it globally using npm i -g vorlon Start server using vorlon With the server is running  open http   localhost 1337 in your browser to see the Vorlon JS dashboard The last step is to enable Vorlon JS by adding this script tag to your app   lt script src  http    lt yourExternalIP gt  1337 vorlon js  gt  lt  script gt  All connected clients e g  iPhone  Android will become available in client list on Vorlon JS dashboard    Note that this approach can also be used to debug apps not running on localhost using ngrok  See https   stackoverflow com a 45443203 2073920 for details   Disclaimer  I am just a user and I am not affiliated with Vorlon JS and ngrok

User · Answer

Even I am looking for the same feature  and as of today  its yet to be implemented  I can think of two options however     I noticed that the behavior of Chrome and Safari are quite identical  Chrome even supports the Gyroscope and other related events which are supported by Safari  I am currently debugging my Web App by enabling the debug console on Safari  Through Settings- Safari  Also try Adobe Shadow  which allows remote debugging inspection and Sync    HTH

User · Answer

Open Safari Desktop iOS  Develop -  Responsive Design Mode  Click  Other  under device  Paste this  Mozilla 5 0  iPad  CPU OS 10 2 1 like Mac OS X  AppleWebKit 602 1 50  KHTML  like Gecko  CriOS 56 0 2924 79 Mobile 14D27 Safari 602 1  Use Safari inspect tools

User · Answer

From my understanding  Google Chrome utilizes the iOS s UIWebView rather than a full blown implementation of Chrome like the Android counterpart

[google-chrome] iOS Remote Debugging

Examples related to google-chrome

Examples related to google-chrome-devtools

Examples related to chrome-for-ios