Web App, App development of Hybrid chrome-devtools debugging

Today we talk about the development of APP, now ah, all hands more than a cell phone, even 7-8-year-olds comes with a mobile phone, cell phone to cell phone we bring much change it.

Data point to pull Kazakhstan, in April 2016, on the mobile Internet, the average user spent 200 minutes per day. There are three Chinese Internet giant, Tencent, Alibaba, Baidu, and Internet users spend time on these three company's products, while 71% of total spending long, in which micro-channel accounted for 35%, QQ accounting for 10%.

Micro-channel accounted for 35%, and now the micro-channel ah, is already a strength than the QQ era occupation, breadth is bigger Yeah, the whole family, except my grandmother did with micro letter, which is not every day micro-channel left pulled a right pull a Yeah.

Oh, pull away, back to back.

Now our APP development, can be divided into Web App, , Hybrid App, Native Appand that the number of micro-channel public open html5 page, we referred to as the web app, Web App refers to the use of written language Html5 App, you do not need to download and install. It said light similar to the current application. Application in the browser's survival, basically said that the touch-screen version of the web application.

PC as the king of the times, when we develop web, debugging is very simple and convenient, with the most is Google developed artifact chrome-devtools, the Google browser, F12 directly open chrome-devtoolscan be developed directly debugging.

Now that the king of the era of our mobile phones, we shift our attention from the computer to the palm-sized phone. When developing web app, of course, debug it. Usually we in the development of web app, in function, interface development, you can first developed on a PC, mobile phone and other final walk test debugging.

''

When we come blog example, now open, it is adapted PC interface, when we want to end development of mobile phones, please click on the phone icon, see screenshots.

''

We now see a screenshot, you can see the size of a mobile phone interface, and help us by phone resolution for development.

When we have completed the basic development, although tested in real end of the phone, or to blog as an example.

''

The question is, if we directly analogous pc end of the phone side chrome-devtoolshow to do it? Before this problem has troubled me for a long time, especially in the development of micro letter only allowed in open end of the project, to get a PC side, fiercely give you tips, please open the page in the micro end of the letter, the feeling is not love again.
Later, micro-letter launched a micro-channel web developer tools to be used over a period of time, can also be used Chrome DevToolsto remotely assist in the development of today's tutorial is not this because mainly aimed at micro-channel development, this tutorial is not limited to micro-letters, but web app can use the remote chrome-devtoolsto debug, children's shoes want to know if there are micro-channel web development tools, please click here. click here! click here!

Let me think about it, what tools do we need points, oh, yes, but also an Android phone, Apple will not do it (if I do not make black powder, only supports Android).

The Android phone is open USB debugging mode (do not know where it quickly Baidu), and then use the USB connection on the computer, and then open the browser, in the usual place we enter the domain, enter the following letter codes.

chrome://inspect

''

Screenshot, position "1" is input chrome://inspectEnter to read.
Focus here, PC era we come out of Yaoan F12 chrome-devtools, to phone era, please click on the screenshot "2" inspect.

''

Gee, familiar chrome-devtoolsappeared, press to open the PC function is the same page, there is a bright spot Oh, Come on, look at screenshots.

''

Highlight is mapped to an interface chrome-devtoolswhere you can also directly in the chrome-devtoolsoperation, it let go with both hands. Open method of this interface, see screenshots of Kazakhstan arrow, click on it to see.

The debugger uses a very broad, usually we develop Web App, Hybrid App, Native Appwhen, in use only in open web, which can use this method to debug.

Touch on a little bit more tonight, and in the morning Yeah, go it all the time.

Articles starting in:http://lanchenglv.com/article...

Guess you like

Origin www.cnblogs.com/jlfw/p/12635275.html