DEV Community

Rich Field
Rich Field

Posted on • Updated on

Debugging Angular App on Android from Mac

Today I needed to inspect an Angular web app I'm building to determine why it was not displaying correctly.

(It displayed just fine in the Chrome Dev Tools Emulator, but not on a real device).

I've done this a lot in the past and thought I knew how to set this up, but there was one thing particular to Angular that I was missing.

1. Determine your Mac's IP address

Open a Terminal window and type ifconfig
Look for the inet entry under en0 and make a note of it

Screen Shot 2021-09-13 at 12.31.18 PM

2. Update your hosts file

Open a Terminal window and type the following to open the hosts file on your Mac

sudo nano /etc/hosts

Add the following entry, where Mac IP is what you copied above

127.0.0.1 <Mac IP> E.g. 127.0.0.1 192.168.1.4

3. Start Angular with host parameter

This is the bit I was missing, you need to serve the Angular app with an additional flag.

ng serve --host 0.0.0.0

By default Angular will be served on localhost but here we need to use 0.0.0.0

4. Open the app in Chrome on Android

In your mobile browser, use the IP address of your Mac and the appropriate port number

E.g. http:192.168.1.4:4000

5. Inspect your device from Mac Chrome

Start Chrome on your Mac and in the address bar type
chrome://inspect/#devices

Find your device in the list and click "inspect"

Discussion (0)