Mobile web page debugging skills

Original source: Sheng Hanqin

This article mainly lists various methods for debugging local web pages and viewing web pages in the test environment, covering debugging skills on PC, iPad, and mobile terminals.

The shortcoming of this article is that Xiaoxili has not yet found any web pages to debug on WeChat and Android browsers.

Related device concepts:

PC : Mainly refers to the desktop computer or notebook represented by Windows system, which is usually 1 times the screen
MacBook : Mainly refers to MacBook Pro Retina, which is 2x screen, but Mackbook Air1x screen
iPad : Mainly refers to iPad Air Retina and iPad Mini Retina, which are 2 times the screen and 1024 x 768render web pages according to the "width and height". Here iPad Pro Retina 1366 x 1024renders the web page according to the "width and height", which can be set according to the "notebook" breakpoint in the CSS media query
Mobile: mainly refers to mobile phones.

iPhone 5s and below devices: 320renders web pages as "wide" as 2x the screen
Regular Android devices: usually at a resolution of 3 times the screen to render the web page as "wide 1080 x 1920"360
iPhone 6: The resolution is 750 x 1344, according to 375the "width" of the rendering web page, which is 2 times the screen
iPhone 6 plus: The actual resolution is to render the web page 1242 x 2208according to 414the "width", which is 3 times the screen. PS: It looks like the resolution rendered on the actual display of the iPhone 6 plus is 1080 x 1920.

Develop web pages locally

Mainly for front-end engineers, test engineers can also learn to use it.

When the front-end develops mobile web pages, it is usually used localhost to access web pages locally, and it needs to be replaced IP by access on devices other than this machine.

ifconfig : Name of viewing network information on OS X system, Macbook Proon en0 behalf of Wifi, so you can use ifconfig en0it to view Wifi information directly.
ipconfig : Command for viewing network information on Windows systems.

`Chrome Emulation` Instantly "emulate" debugging web pages

Chrome Emulation There may be differences between the current Chrome version Webkitor the Blink rendered web page and the web page rendered by iPhone the browser on the Android device. For example, there are various small bugs in the Android UC browser.

Inspect element: right click or use shortcut key (Mac: command + option + i)
Recall Emulation: After reviewing the element again, click the corresponding icon or use the shortcut key (Mac: command + option + m)

If you want to use the censorshipChrome element to view Chromethe web pages opened on the browser on the Android device, you still need it 翻墙, but you cannot view the browsers packaged by domestic manufacturers on the Android device, such as UC browser and QQ browser.

`Safari` even when debugging web pages

"Responsive Design Mode"
Safari There is "Responsive Design Mode" in the "Develop" menu, which has common iOS devices such as iPhone 4s, iPhone 5s, iPhone 6s, iPhone 6s plus, iPad mini 4, iPad Air 2, iPad Pro Wait.
Of course, Safari the kernel here should still be based on the current system, and there may be differences from the respective Safari on iOS devices.
The awesome censorship element
on Safari it can not only debug the web pages opened by the browser itself, but also open the Xcode Simulatoropen web pages mentioned below, and even open the iPhone/iPad connected with USB.

`Xcode Simulator` emulator

Xcode Simulator It is a variety of devices that can simulate various versions of iOS systems. The Safari better part is that it simulates Safari on various iOS systems, so it can reproduce various strange bugs.

The system covers various versions from iOS 8.0 to iOS 9.2, tvOS, watchOS
Devices cover iPhone, iPad, tvOS, Apple Watch, Apple TV

Xiaoxili recommends downloading iOS 8.1, because the latest iOS simulator that comes with it may get stuck when running.

Visit the web page of the test environment

Mainly for test engineers, front-end engineers are also so easy to learn.

static IP

Principle analysis: Static IP actually focuses on setting a specific DNS on the mobile device, and the specific DNS is related to the test environment.
Disadvantages: After configuring static IP on iPad and mobile, browsers can access web pages in the test environment, but WeChat can only access web pages in the official environment.

Setup steps:

Remember the automatically assigned IP
Set the static IP of the corresponding device

iOS: Settings - Wireless LAN - Check Network - IP Address - Static
Android：设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 静态 IP

网络代理

原理简析：在 PC 或Mac 上已经设置成功了测试环境，而移动设备通过网络代理访问 PC 或 Mac 上的网络设置，就可以访问测试环境了，无论是浏览器还是微信。

设置代理的常见方式（具体请自行百度）

Fiddler 代理，只适用于windows系统
Charles 代理，适用于OS X系统（即Mac电脑）
微信web开发者工具（以下简称“微信工具”），适用于windows和Mac

微信web开发者工具

官网地址

使用自己的微信号来调试微信网页授权

调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出

使用基于 weinre 的移动调试功能

利用集成的 Chrome DevTools 协助开发

移动调试
可以在微信中查看位于测试环境的网页

确保本机和移动设备在同一局域网网段中
将移动设备的网络代理配置到：http://\*\*.\*\*.\*\*.\*\*（ PC或Mac 的IP），端口： 9973

iOS：设置 – 无线局域网 – 选中网络 – HTTP代理手动
Android：设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动

重启微信，并在微信中访问网页

PS：在小溪里的电脑上并没有像官网宣传的那样可以审查元素

在小溪里所在的公司里面，设置网络代理的步骤：

连接 Wifi
弹出验证窗口，输入公司账户
设置网络代理

PS：连接 Wifi后，要确保没有设置网络代理，这样才可以弹出验证窗口。

QQ技术交流群290551701 http://cxy.liuzhihengseo.com/554.html