Debugging Angular App on Android from Mac

#todayilearned #tooling #angular #android

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

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

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

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

E.g. http:192.168.1.4:4000

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

Find your device in the list and click "inspect"