
上QQ阅读APP看书,第一时间看更新
How to do it...
- First, you need to be in the project folder. Let's assume that it is the side menu HelloWorld:
$ cd HelloWorld_Sidemenu
- From there, just issue the simple command line, as shown:
$ ionic serve
That's it! There's no need to go into the /www folder or figure out which port to use. The command line will provide the following options while the web server is running:

The most common option to use here is Ctrl + C to quit when you are done.
There are additional steps to view the app with the correct device resolution:
- Install Google Chrome if it's not already on your computer.
- Open the link (for example, http://localhost:8100/) from Ionic serve in
Google Chrome. - Turn on Developer Tools. For example, in Mac's Google Chrome, navigate to View | Developer | DeveloperTools:
- Click on the small mobile icon in the Chrome Developer Tools area, as illustrated:
- There will be a long list of devices to pick from, as shown:
- After selecting a device, you need to refresh the page to ensure that the UI is updated. Chrome should give you the exact view resolution of the device.

Most developers would prefer to use this method to code, as you can debug the app using Chrome Developer Tools. It works exactly like any other web application. You can create breakpoints or output variables to the console.