Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the methods of debugging mobile website pages". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought slowly and deeply. Let's study and learn "what are the methods of debugging mobile website pages?"

Point static resources locally

Mobile is becoming more and more important, Hybrid App is becoming more and more popular, but debugging web pages on mobile phones is not as easy as on computers. About half a year ago, I began to turn to the development of Mobile Web. I made a lot of attempts in debugging, and recently I slowly shared it with you.

The development process is inseparable from debugging, especially to do front-end development, almost debugging while developing.

The first step in debugging: let the browser / webview request your local source code directly

Experience on the PC side

How to achieve the goal? I believe that when you are doing PC Web development, you have come into contact with the following solutions:

Edit the local hosts file, point the domain name of the static resource to the local, build the static resource HTTP server locally, and make the browser load the local source code directly.

Set up a proxy server locally, set the proxy of the browser to the proxy server, and read the local source code directly to the browser according to the rules in the proxy server. For example, there is a nproxy to meet such needs.

Use the AutoResponder features of Fiddler. This method is actually the same as the previous one. Fiddler is a very powerful and free GUI tool that is easy to use.

Use the debug function provided by the module loader to map online resources to local resources, such as seajs-debug.

The task to be accomplished in these ways is to have the browser request your local source code directly.

As long as we do this, we can change the code in the editor, refresh the browser and immediately see the effect of the changes, avoiding the tedious operation of deploying the code.

The scheme of mobile terminal

What should be done on the mobile side?

Just to achieve the same goal: to load the mobile browser / webview directly into the source code on our work computers. Let's first see if these common methods on PC are still applicable to mobile phones.

Edit hosts's scheme

When editing hosts files on PC, you should note that on WIN7/8 systems, administrator privileges are required, and under Mac/Linux, root permissions are required. This is indeed a very safe and sensitive document. So on the phone, you also need root permission to edit these files. This means that iOS needs a jailbreak and Android needs root. I don't think this solution is advisable on mobile phones. There are many difficulties in editing hosts on mobile phones. You can't guarantee that every development machine has root permission. When debugging compatibility, what to do when you encounter a machine that cannot root?

Solutions for using agents (including self-built proxy server and using fiddler)

It is very easy to configure the HTTP proxy server of the system on iOS, and most Android machines can also be configured, but the location of the configuration menu is different for different models. All that's left to do is to configure the rules to proxy some files locally, just as on PC.

The problem that may be encountered when using this scheme is that the self-built proxy server is generally not compatible with HTTPS well enough, for Hybrid App, some requests in native may be HTTPS, and the pages in webview are HTTP. After HTTP Proxy is set, all requests will go through this proxy server. If the support for HTTPS is not good enough, you may not be able to log in. I would like to praise Fiddler for this point, and it has been handled very well.

In addition, Mac users may not have a good alternative to Fiddler, Charles is free, and not as good as Fiddler.

Use the debug functionality provided by the module loader

You usually need to enter something on the page to complete the resource mapping. Typing text on the phone is too troublesome, and the screen is too small to display the content, so this scheme is not good either.

To sum up, the scheme of using proxy server can be used from the PC side to the mobile side.

But as we have mentioned above, using a proxy server also has some disadvantages, so can you achieve the effect of binding hosts painlessly on the phone? The answer is yes. Our binding to hosts only changes the resolution result of the domain name. Normally, who will resolve the domain name? DNS!

Customize the scheme of DNS

We only need to run a special DNS server on the development computer, and then change the DNS in the mobile network configuration to the IP of the development computer. We do some tampering in the DNS server to resolve the domain names of static resources to the development computer, and we can achieve exactly the same effect as editing hosts files.

On the other hand, it is very easy to change the address of the DNS server on the mobile phone, which is more general than modifying the proxy server.

To achieve this, I wrote a very easy to configure DNS Server: xdns, which is compatible with the syntax of the hosts file, while providing a higher-level syntax than the hosts file.

For example, xdns supports the mode of using wildcards for domain names. Support IP address to use the interface name of the network card as a placeholder, the runtime can be automatically replaced with the IPv4 address on the interface of the network card, so that when your development computer IP changes, you do not need to modify the configuration file.

Installation and startup are very convenient, using Node.js development, Node should be familiar to the front end. After npm is installed, a command can be started. Please see the document: xdns for details.

Remote debugging

Experience on the PC side

When developing using desktop browsers, almost every browser has its own developer tools, such as firebug, chrome develper tools, safari developer tools. Even IE and even IE6 have their own developer tools. We use these tools to check debug styles, javascript, view modified cookie, view network requests, and so on. These are all very familiar to everyone.

The scheme of mobile terminal

It is impossible for a browser or webview on the phone to integrate a developer tools on the phone because the screen is too small. Fortunately, major manufacturers are still very concerned about the convenience of developers, and now there are a variety of remote debugging programs. That is, the page is loaded on the phone and the debugging tools are displayed on the computer. Let's take a look at some of the current mainstream tools.

IOS platform

1.Safari Mobile

Safari supports remote debugging. You need to do the following steps:

Find Settings-> safari-> Advanced-> Web Checker in your phone and turn on this function.

Connect to your Mac with a data cable (no Mac? Ask the boss to go! ).

Open safari under Mac, go to preferences, at the bottom of the Advanced column, and check to display the "Development" menu in the menu bar.

Visit a web page with your mobile safari, find your phone in the safari development menu on Mac, and find the web page in the secondary menu.

After doing this, we enter the familiar safari developer tools, debug css, js network requests, and so on.

2.iOS webview

Webview in iOS APP also supports remote debugging, but with a little more restrictions. The APP must be compiled and installed into the phone, that is, you must have an iOS developer account. For Hybrid APP developers, this is not a difficult task, the team must have a developer account. What you need to do is to know a little bit about the basics of iOS development, or at least be able to compile and install the code on your phone.

For your own compiled APP, you only need to load the page you want to debug in APP, and the other steps are the same as the remote debugging of safari.

Android platform

1.Chrome Mobile

Chrome for android 32 and later versions have the function of remote debugging. What you need to do is:

Turn on the USB debugging function of Android.

Use USB to connect to your computer first (windows users need to install Android drivers).

Open the web page you want to debug on Chrome for android.

Open chrome on your computer (also a minimum of 32), go to the menu-> tools-> check the device page, and make sure Discover USB devices is checked.

If the settings are correct, you can now see the page that opens on your phone. Click inspect to enter our familiar Chrome develper tools.

As there are all kinds of Android phones, if you encounter trouble, please read the official documents carefully.

2.Android Webview

Since Android 4. 4, the default browser is chrome, so webview is also chrome, which gives webview the ability to debug remotely. We need to make the following settings for Webview in Android:

Java Code copies content to the clipboard

If (Build.VERSION.SDK_INT > = Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled (true)

}

Then open the page you want to debug in your App, and do the same remote debugging as you did with Chrome for Android.

3. Use the Android simulator

In view of the small number of Android 4.4 phones, you can choose to use the simulator for debugging. The official simulator is too slow, it is recommended to use genymotion, X86 architecture simulator, the speed is no different from the real machine. For a front end that only does webview debugging, you only need to use a personal free version.

4. Other ways

If your debugging conditions do not meet any of the above, you can also use weinre. You only need to insert a script into the page and you can debug remotely, with almost no other restrictions. But there are obvious disadvantages to using this:

You can't break javascript, you can only debug it with console.

It is not supported to view the style of the element in which line of css, nor in which file it is displayed.

Because it is connected through the network, it is difficult to operate when debugging the mobile network (requires the server to run on a machine accessible to the mobile network)

In short, weinre is only suitable for situations where you can't use Safari or Chrome for remote debugging, which is better than nothing, which is often encountered when debugging Android hybrid APP.

Summary

To sum up, the optimal debugging scheme can be selected according to the following figure:

Thank you for your reading. the above is the content of "what are the methods of debugging the website page on the mobile side". After the study of this article, I believe you have a deeper understanding of the method of debugging the page of the website on the mobile side. The specific use situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.