Mobile Web page debugging skills-Original article on the official website license plate: Sheng Hanqin
This article describes how to debug a local webpage and view the webpage of the test environment, covering debugging skills on PCs, iPad, and mobile terminals.
The disadvantage of this article is that xiaoxi has not found any web pages for debugging on Chinese and Android browsers.
Related device concepts:
PC
: It mainly refers to a desktop or notebook represented by a Windows system, which is usually 1 times the screen
MacBook
: It mainly refers to the MacBook Pro Retina, which is twice the screen,Mackbook Air
1 x Screen
iPad
: It mainly refers to the iPad Air Retina and iPad Mini Retina, which are two times the screen, and press1024 x 768
To render the webpage. Here iPad Pro Retina is press1366 x 1024
In the CSS media query, you can set by the breakpoint of the notebook.
- Mobile: mainly refers to mobile phones.
iPhone 5s
And the following devices:320
The "width" of the rendering webpage, which is twice the screen
- Regular Android devices: the normal resolution is
1080 x 1920
, Press360
The "width" of the rendering webpage, which is 3 times the screen
iPhone 6
: Resolution is750 x 1344
, Press375
The "width" of the rendering webpage, which is twice the screen
iPhone 6 plus
: The actual resolution is1242 x 2208
, Press414
The "width" of the rendering page, which is 3 times the screen. PS: It seems that the resolution after rendering on the iPhone 6 plus is1080 x 1920
.
Local development webpage
It is mainly intended for front-end engineers, and test engineers can also learn and use it.
The front-end usually useslocalhost
To access the webpage locally, replaceIP
Access.
ifconfig
: Name of the network information displayed on OS X.Macbook Pro
Upperen0
Indicates Wifi, so you can useifconfig en0
View the Wi-Fi information directly.
ipconfig
: Command for viewing Network Information on Windows.
Chrome Emulation
Instant "simulation" debugging webpage
Chrome Emulation
Currently usedChrome
VersionWebkit
OrBlink
Rendered webpage,iPhone
Or there may be differences in the effects of web pages rendered by browsers on Android devices. For example, there may be various bugs in the android UC browser.
- Review element: Right-click or use a shortcut key (Mac: command + option + I)
- Call up
Emulation
: Review the elements, click the corresponding icon or use the shortcut key (Mac: command + option + m)
Tucao
Connect a PC or Mac to an Android device.Chrome
View audit elements on Android devicesChrome
The web page opened on the browser also needsFQ
But cannot view browsers encapsulated by Chinese manufacturers on Android devices, such as UC and QQ browsers.
Safari
Even if you debug a webpage
"Responsive design model"
Safari
In the "Development" menu, there is a "responsive design mode", which has commoniOS
Devices such as iPhone 4S, iPhone 5S, iPhone 6 s, iPhone 6 s plus, iPad mini 4, iPad Air 2, iPad Pro, etc.
Of courseSafari
The kernel is still based on the current system, which may be different from the Safari on iOS devices.
Superb review elements
InSafari
You can not only debug the web page opened by the browser, but also openXcode Simulator
You can even open the iPhone/iPad connected to USB.
Xcode Simulator
Simulator
Xcode Simulator
It can simulate various iOS devices of different versionsSafari
The better thing is that it simulates Safari on various iOS systems, so it can reproduce various amazing bugs.
- The system covers versions from iOS 8.0 to iOS 9.2, tvOS, and watchOS.
- Devices include iPhone, iPad, tvOS, Apple Watch, and Apple TV.
We recommend that you download iOS 8.1 In xiaoxi because the latest built-in iOS simulator may be stuck during runtime.
Access the webpage of the test environment
For testing engineers, front-end engineers are also easy to learn.
Static IP
Principle Analysis:Static IP actually focuses on setting a specific DNS on a mobile device, which is related to the test environment.
Disadvantages:After configuring a static IP address on the iPad and mobile terminal, the browser can access the webpage in the test environment, but only the webpage in the formal environment can be accessed.
Procedure:
- Remember the automatically assigned IP Address
- Set the static IP address of the corresponding device
- IOS: settings-Wireless LAN-selected network-IP address-static
- Android: settings-WLAN-long press selected network-modify Network-advanced-static IP
Network Proxy
Principle Analysis:The test environment has been successfully set on the PC or Mac, and the mobile device can access the test environment through the network proxy to access the network settings on the PC or Mac.
Set common proxy methods (Baidu for details)
- Fiddler agent, applicable only to windows
- Charles proxy, applicable to OS X systems (Mac computers)
- Web Developer Tools (hereinafter referred to as "Tools"), applicable to windows and Mac
Web Developer Tools
Official Website address
- Use your own number to debug web page authorization
- Debug and verify the JS-SDK related functions and permissions of the page, simulate the input and output of most sdks
- Use weinre-based mobile debugging
- Use integrated Chrome DevTools for development
Mobile debugging
You can view the webpage in the test environment in the middle
- Ensure that the local device and mobile device are in the same lan network segment
- Configure the network proxy of the mobile device to: http ://\*\*. \*\*. \*\*. \ * (PC or Mac IP), Port: 9973
- IOS: settings-Wireless LAN-selected network-HTTP Proxy Manual
- Android: settings-WLAN-long press selected network-modify Network-advanced-proxy settings-Manual
- Restart and access the webpage
PS: The computer in xiaoxi does not review elements as advertised on the official website.
In the company where the creek is located, set the network proxy steps:
- Connect to Wifi
- In the displayed verification window, enter your company account
- Set Network Proxy
PS:After connecting to Wifi, make sure that no network proxy is set so that the verification window is displayed.
QQ technology exchange group 290551701 http://cxy.liuzhihengseo.com/554.html