Serenader

Learning by sharing

移动端开发调试

Mr. serenader Published at , updated at
on 移动端开发,调试

Android Chrome remote debugging

Get Started with Remote Debugging Android Devices | Tools for Web Developers | Google DevelopersRemote debug live content on an Android device from a Windows, Mac, or Linux computer.https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Requirement
  • Chrome 32 or higher in your desktop
  • USB driver installed
  • Android 4.0 or higher
  • Chrome for Android installed
Step
  1. Open chrome, and open DevTools.(does not work in incognito mode or guest mode)
  2. In your desktop's DevTools, click Main Menu, and select More Tools -> Remote devices
  3. Enable Discover USB device in Remote devices setting tab.
  4. Enable USB debugging in Android device.
  5. Connect Android device with USB cable.
  6. Accept Allow USB debugging permission prompt in Android device, and the desktop's Remote devices tab will show up your device.
  7. Open Chrome for Android
  8. Click your device name in Remote devices setting tab, it will show all your webpage that opened in your Chrome, including apps that use webview.
  9. In your opened webpage, click Inspect next to the URL, will launch a new instance of DevTools. DevTools may look different base on the Android's Chrome version.
  10. Click Toggle Screencast to view the content of your Android Device. You can interact with the screencast.

iOS Safari remote debugging

Requirement

Can be used in a physical iPhone device or iPhone Simulator(using Xcode).
  • iOS 6 and later

Step

  1. Enable the Develop menu in your desktop's Safari: Open Safari's Preference -> Advanced -> Show Develop menu in menu bar.
  2. Enable Web Inspector in iOS device: Open Settings -> Safari -> Scroll down and select Advanced -> Select Web Inspector.
  3. Connect your iPhone to the Mac using a USB cable(physical iPhone device), or starting the iPhone simulator(Xcode's iPhone Simulator), and open a webpage using iOS's Safari
  4. In Mac's Safari, select Develop menu, and you can see the iPhone option or the Simulator option. Select iPhone(or Simulator) and select a webpage, it will launch a new Web Inspector instance.

Wechat/QQ remote debugging

微信公众平台https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
【第一季】TBS开发调试利器--TBS Studio开篇 - QQ浏览器移动产品论坛手机QQ浏览器官方论坛 手机浏览器是腾讯公司推出的新一代浏览器，采用全新架构并针对IE内核做了全面优化。QQ浏览器开启速度超快，设计灵动轻逸，可以电脑上微信，边上网边聊天，更有强大的安全保障。QQ浏览器旨在为用户，带来更轻、更快、更安全的浏览体验。http://bbs.mb.qq.com/thread-1416936-1-1.html

Generic webpage remote debugging

Weinre(WEb INspector REmote)

apache/cordova-weinrecordova-weinre - Mirror of Apache Weinrehttps://github.com/apache/cordova-weinre
weinre - RunningThis is your web page that you want to debug. This name (Debug Target) is also used to refer to the machine running the browser displaying the web page. Since a design point of weinre is to allow debugging applications on mobile devices, the debug target, when speaking of the machine, is your mobile device.http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

Requirement

  • Node.js

Step

  1. Install weinre: npm i -g weinre
  2. Start weinre debug server: weinre --httpPort 8080 --boundHost -all-
  3. Open localhost:8080 in your browser
  4. Add a script to your html file: <script src="http://localhost[Your IP]:8080/target/target-script-min.js#anonymous"></script>
  5. Using mobile device to open the html file
  6. Open http://localhost[Your IP]:8080/client/#anonymous you'll see all the client that have opened the target html, and you click one of the client, you can start to inspect the webpage.

vConsole

Tencent/vConsolevConsole - A lightweight, extendable front-end developer tool for mobile web page.https://github.com/WechatFE/vConsole

Eruda

liriliri/erudaeruda - Console for mobile browsershttps://github.com/liriliri/eruda