Mobile Web page debugging skills and web debugging

Mobile Web page debugging skills and web debugging

Source: 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 Air1 x Screen
• iPad: It mainly refers to the iPad Air Retina and iPad Mini Retina, which are two times the screen, and press1024 x 768To render the webpage. Here iPad Pro Retina is press1366 x 1024In the CSS media query, you can set by the breakpoint of the notebook.
• Mobile: mainly refers to mobile phones.
  • iPhone 5sAnd the following devices:320The "width" of the rendering webpage, which is twice the screen
  • Regular Android devices: the normal resolution is1080 x 1920, Press360The "width" of the rendering webpage, which is 3 times the screen
  • iPhone 6: Resolution is750 x 1344, Press375The "width" of the rendering webpage, which is twice the screen
  • iPhone 6 plus: The actual resolution is1242 x 2208, Press414The "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 useslocalhostTo access the webpage locally, replaceIPAccess.

• ifconfig: Name of the network information displayed on OS X.Macbook ProUpperen0Indicates Wifi, so you can useifconfig en0View the Wi-Fi information directly.
• ipconfig: Command for viewing Network Information on Windows.

Chrome EmulationInstant "simulation" debugging webpage

Chrome EmulationCurrently usedChromeVersionWebkitOrBlinkRendered webpage,iPhoneOr 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 upEmulation: 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.ChromeView audit elements on Android devicesChromeThe web page opened on the browser also needsFQBut cannot view browsers encapsulated by Chinese manufacturers on Android devices, such as UC and QQ browsers.

SafariEven if you debug a webpage

"Responsive design model"
SafariIn the "Development" menu, there is a "responsive design mode", which has commoniOSDevices such as iPhone 4S, iPhone 5S, iPhone 6 s, iPhone 6 s plus, iPad mini 4, iPad Air 2, iPad Pro, etc.
Of courseSafariThe kernel is still based on the current system, which may be different from the Safari on iOS devices.
Superb review elements
InSafariYou can not only debug the web page opened by the browser, but also openXcode SimulatorYou can even open the iPhone/iPad connected to USB.

Xcode SimulatorSimulator

Xcode SimulatorIt can simulate various iOS devices of different versionsSafariThe 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:

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

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:

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