mobile web debugging in desktop / in mobile

While  developing mobile web sites, the behavior of real mobile browsers are a litter different with desktop's. While debugging, Developers  are using console.log. But developers cannot see logs in mobile phones. It makes it hard to figure out ,when unexpected errors occurred in phones . 

Like desktop,  there are solutions in iOS and android. 

1. android 

    ref: https://developer.chrome.com/docs/devtools/remote-debugging/

2. ios debugging. Window  and osX

• iOS mobile debugging is more complicated then android 
• Install iTunes
• Install Node.js
• open command window or powershell as Admin Mode
• install debugging adaptor 
• npm install remotedebug-ios-webkit-adapter -g
  
  
• run below command , if you see 'firewall warnning', allow 'access'
• remotedebug_ios_webkit_adapter --port=9000 
• In chrome,  type: chrome://inspect/#devices 
• discover network target : configure 
• add "localhost:9000"
• Enable web inspector on your iOS device.
• Settings > Safari > Advanced : enable web inspector( 웹속성)
• Browse sites.
• you can see lists in PC chromes. 
• click inspect. 

* Another ( no additional Install)  : mobile debug in mobile

• ref: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html)
• No install programs  , in Chrome (mobile) 
• Type "chrome://inspect" in url then you can see below screen 
• Click 'logging start'

•  In new tab , browsing your web application,  You can see logs in  inspect Tab.