Some assets missing – BrowserSync on mobile device

SOLVED (see below) When proxying my site using BrowserSync (via gulp watch) on my phone (iPhone 5), I’m finding a lot of assets missing (really wish there were more tools available to debug problems on iOS – or perhaps there are and I just don’t know about them). It seems mainly to be scripts that aren’t loading, but there are a handful of styles not coming across as well. I know this is a difficult problem to get to bottom of without standing over my shoulder, but any ideas would be much appreciated.

Here is my public repository if you wanted to see my config files etc (current active branch is buffon: GitHub - theagsco/theagsc at buffon.

Here is a screenshot of my phone, showing the way the site displays incorrectly: Dropbox - File Deleted

And a screenshot of my desktop, displaying correctly: Dropbox - Screenshot 2016-02-28 18.24.21.png - Simplify your life

Thanks guys!

UPDATE: I found Safari’s remote developer tools (so handy!) and found that the main problem is that my svg and image files aren’t loading. Font files and styles etc are loading just fine. I get an Failed to load resource: The request timed out. on img’s and svg’s. Hope this helps.
UPDATE #2 I discovered that assets with URL’s formatted like the following svg file work correctly:
Whilst assets formatted like the following do not work:
UPDATE #3 – SOLUTION Apologies for the ‘thinking out loud’ post, but I realised (even though I swear I’d already checked) I was referencing my files differently in my source code. I was using <?php echo get_template_directory_uri(); ?>/assets/images/... instead of the correct method: <?php bloginfo('template_directory'); ?>/assets/images/....

Thought I would leave this here in case it helps someone else.

get_template_directory_uri() is the correct method. Don’t use bloginfo('template_directory').

The problem is you’re referencing assets instead of dist.

1 Like