Cross-platform Mobile development Combat (III)------HTML5 development environment to build __html

Source: Internet
Author: User
Tags chrome developer chrome developer tools dreamweaver

The Cross-platform mobile development is actually based on the HTML5 development software interface and the main business logic, so a perfect HTML5 development environment based on mobile platform is very necessary. My main focus here is the following four points: JavaScript and jquery Mobile editor HTML5 elements of Inspector JavaScript remote breakpoints Debug mobile platform JavaScript development mode

1 JavaScript and jquery mobile editors

Speaking of JavaScript editor, there are many on the market, we all have their favorite choice, I just recommend three I prefer: Aptana studio. Eclipse Plugin Update Address: Http://download.aptana.com/studio3/plugin/install Dreamweaver CS6. Official address: http://success.adobe.com/en/na/sem/products/dreamweaver.html
Appmobi. Official address: http://www.appmobi.com/

Aptana Studio has the advantage of being lightweight, integrated with Eclipse, and code completion and JS syntax error correction done very well, the whole style is similar to VI, a bit more geek:

Dreamweaver CS6 is the most powerful HTML5 development environment and the only development tool I know to support jquery mobile (except for the official online editor), and JavaScript, CSS, and HTML are very handy to develop. , the biggest drawback is to charge:

Appmobi is ideal for debugging at different resolutions, and very cool interfaces are also very useful for demos:

Code Editor:

Simulator Demo:

The specific installation and use of these tools I do not say more, go straight, experience it yourself will know

2) The inspector of HTML5 elements

If the browser on the desktop system, such tools are many, such as Firefox on the Firebug,chrome developer tools, ie on the HTTP watch and IE with debugging tools, but if placed on the mobile platform, Especially based on the built-in phonegap such as webview, such tools are not very common. Here is a PHONEGAP official reference to the tool: Weinre

Weinre through a server to connect the debugger and the device, the principle is to say, after 2.0 did not see the version of Java, so only through NPM to install, incidentally, NPM is the Nodejs package management tool, similar to Maven for Java. After installing Nodejs, NPM is installed. After installation weinre is very simple:

NPM Install Weinre-g

If no configuration is configured on the Windows platform, Weinre is installed in c:\users\***\appdata\roaming\npm\node_modules\weinre\ and then starts the server:

Node Path-to-weinre-node/weinre--boundhost-all---httpport 8082
Here with the-all-is to open port 8082 on the 0.0.0.0, to avoid non-local can not remotely request this port, and then in the page to be debugged add weinre agent:

<script src= "Http://computer-ip:8082/target/target-script-min.js#anonymous" ></script>
Here Computer-ip use can let device connect the host's address, of course, about device and host network connection problem I will be in later article concrete to talk about. Then you start the app on the device, and here's the example of Android, which is the same as iOS. After the device is started, open the Chrome browser (based on the WebKit kernel), visit: http://localhost:8082/client/#anonymous, if all the questions before, You can see the device connection at Target, click, you will find that the connection is green, this shows that the remote device can be debugged, and then can be used as firebug or Chrome developer tools, but it is missing a very important function is remote JS breakpoint debugging, But I'll introduce another tool to implement it later, and here's a look at the screenshot on the debug:

3 JavaScript remote breakpoint Debug

It is recommended to use Aardwolf (https://github.com/lexandera/Aardwolf/) To implement this feature, which is similar to weinre and remote debug device via a rack server. After downloading the aardwolf, start the server:

Node Aardwolf_install_folder/app.js-h-D Web_app_path
Web_app_path is the Web application you need to debug, which contains the JS you need to debug.

Then, like weinre, you need to add Aardwolf proxies in HTML: <script src= "Http://computer-ip:8500/aardwolf.js" ></script> < Script src= "Http://computer-ip:8500/js/main.js" ></script>

Where Aardwolf.js is the system js,js/main.js is required to debug JS, this main.js after Aardwolf translation, with the ability to be debugged. Then, when you start the application, you can debug on the localhost:8000:

4) Mobile platform JavaScript development model

Although all the above methods can be device on the debugging HTML5, but the whole development is so estimated that everyone is crazy, so I am still more recommended now desktop browser to develop the main interface and logic, the main phonegap and the device of the combination of points outside, Other basic and desktop browsers are the same. So I will first develop a Chrome app version, focus on this version and then migrate to other platforms, so that on the other platform only debugging and device related points. I'll talk about chrome apps in the back.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.