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
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"
Top comments (0)