Question

Hi, for my WordPress theme developing I am using PHPStorm IDE and it is great! :-)

However, I am trying to find a solution to auto reload (auto refresh) the browser (I am using Chrome) whenever I am changing the PHP files in my localhost enviorment (XAMPP).

If it is possible to recommend some extensions, add-ons for Chrome/Firefox (maybe also for CSS, JS and HTML).

I want to avoid the F5 and CTRL + F5 refreshing... :-)

Thanks!

Answer 1

Here is another solution for live reloading ALL the inner WP pages (not only the main index.php) in Chrome (not sure whether it works with Firefox...):

1. Install LiveReload software from: HERE

2. Install the Chrome add-on from: HERE

3. Watch this video to connect the dots: https://www.youtube.com/watch?v=sUY06rWklXU

Answer 2

For HTML + CSS + JS files the best auto-refresh (+debugging) solution is the original JetBrains IDE support Chrome add-on: CLICK HERE to view the extension.

Here is also a video.

These are my settings for using it with PHPStorm (screenshot below):

Answer 3

The best option for auto-reload Chrome browser which I found is: Live Reload: https://chrome.google.com/webstore/detail/live-reload/jcejoncdonagmfohjcdgohnmecaipidc

It works like a charm! So simple to set up. Hard to believe it took installing/uninstalling several extensions to get to this PERFECTLY working extension.

This is particularly useful for WordPress developers!

My 2-minute setup as a WordPress developer:

1. Run localhost (XAMPP) for a live server.

2. Install Live Reload

3. Click on your extension icon --> click "Create a new reload rule..."

4. Add Title of rule (can be your website name)

5. Host URL: http://localhost/ (don't forget the forward slash at the end)

6. Source file URL's: http://localhost/* Note: you cannot technically monitor changes in local folders/files (on your comp). Instead, you refer to the root folder by using your source URL followed by a forward slash (/) and asterisk (*) to monitor ALL files

7. Ignore source file URL's:

http://localhost/wp-admin

http://localhost/wp-admin/customize.php

Note: This allows your website to use Live Reload without reloading WordPress admin areas. There may be other admin areas to ignore, but this setup works for me.

8. Decide how many seconds the extension should wait before checking for updated source files. I set mine to 1s so the updates are immediate.

9. Choose to enable/disable two reload options based on preference.

10. Click "Save reload rule".

Here are my settings for my WordPress dev environment (with PHP files):

Here are my settings for HTML/CSS/JavaScript project:

* or in the Host URL you can also type:

http://localhost:63342/space/*

Cheers