my main issue with live-reload is that it generates new files at the bottom of the head. This makes sense so it can overwrite the previous declared rules (cascading).

If you now have two different CSS-files and the first one gets changed it gets generated at the bottom of the head... Here's an example:

`<link href="/assets/main.css media="screen" rel="stylesheet">

In main.css I have the rule body {background: white;} and in dark.css I have body {background: black;}

So if I change something in main.css (not the background, just anything else) the new CSS file gets placed at the bottom:

`<link href="/assets/main.css media="screen" rel="stylesheet">

So even if I didn't change the value of body in main.css I now get a white background instead of the black background.

It really would make sense to place the new files beneath the previous file, like:

`<link href="/assets/main.css media="screen" rel="stylesheet">
<link href="/assets/main.css&livePage=123456789?LivePage=123456789 media="screen" rel="stylesheet">

this way the cascading would still be intakt. Hope you understand what I mean.

If you havent read this answer yet, please note I have edited it with a quick fix, however I don't think it is a good thing
Hi
This is a great little plugin by the way. I am trying to print out the contents of the file that has changed. This works fine when the file type that changed is html, however when its javascript or css, it doesnt seem to get set.

In LiveResource.prototype.check() there is the line _this.response = _this.tidyCode(this.responseText);. If I console.log(this.responseText) it is not set to anything. Whats interesting is it does notice the file change and refresh the page. Any ideas why this might be happening?

EDIT: Looking at the inspector in Chrome, I can see the css file being loaded:

I am interested that its being loaded over HTTP HEAD protocol, and the file has no content/response:

even though the file loaded fine:

EDIT: OK I have fixed it, but I am suspicious as to my fix. By changing the line:

this.method = 'HEAD';

to

this.method = 'GET';

It now works. However Im not sure why it was set to HEAD for all files not html and therefore what I have undone by changing that? I think it will just slow down the connection but without the body Im not sure why we were checking the headers only?

Just curious as I evaluate various livereload options...

What are the advantages of LivePage vs LiveReload?

Do you have anything on the roadmap for Grunt integration? Or will this extension accept the same protocol as LiveReload, making grunt-contrib-livereload viable here?

Thanks!

For external hosted websites (like shopify) with lots of assets 1000ms is locking my browser down even though i have a decent computer/network. While probably extension may need some performance improvements i think manually entering a number more than 1000ms would be very good i think.

For now i manually changed it from web inspector to 10000ms and it's better.

PS: I have a page with 3d transitions with very large assets and scroll movement is important. When it reloads the page it freezes scroll action for 1 second or so.

If you have Adblock installed it will chuck an error in the console stopping the script from running.

Currently, LivePage will keep yielding errors if there is a 404 file:

I think this can be an option:
Should LivePage ignore non-existing files

so we can get rid of these errors in some cases.

Got the following error while trying to update CSS:

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
LiveResource.refresh @ live_resource.js:140
xhr.onreadystatechange @ live_resource.js:74
XMLHttpRequest.send (async)LiveResource.check @ live_resource.js:79
livePage.check @ livepage.js:180
livePage.checkBatch @ livepage.js:163
(anonymous function) @ livepage.js:181
setTimeout (async)(anonymous function) @ livepage.js:181
xhr.onreadystatechange @ live_resource.js:56
XMLHttpRequest.send (async)LiveResource.check @ live_resource.js:79
livePage.check @ livepage.js:180
livePage.checkBatch @ livepage.js:163
(anonymous function) @ livepage.js:181
setTimeout (async)(anonymous function) @ livepage.js:181
xhr.onreadystatechange @ live_resource.js:56

Any ideas why it happens and how it can be fixed?

The HTML checker can struggle to spot changes to the code, this can be due to the wrong headers being sent or caches being loaded maybe.

I need to add a Cache breaker & better reload system.

It currently runs in the same thread as the web page. I want to experiment with the boosts in performance I can gain using web workers.

Not important yet but just for heads up my chrome dev tool is throwing this warning:

livepage.js:297:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. 

I have two CSS files in the /css/ folder.

First one is styles.css, second is reset.css.

@import url(reset.css); from the styles.css doesn't work.

When http://test/index.html is opened:

HEAD http://test/reset.css?livePage=1354648256605 500 (Internal Server Error) 
LiveResource.check
livePage.check
livePage.checkBatch
(anonymous function)

Right path is http://test/css/reset.css

My current stack is Heroku and Django with Sublime Text 2 and Chrome (OS X 10.11.2), and I can't seem to get my local pages to update. I can see the requests being made but the page doesn't reload.

I have an editor and chrome open. When I make a change in the editor and save, nothing happens until I alt-tab back over to chrome. Then the change instantly takes effect.

Maybe Chrome doesn't let the background JS run while out of focus or something?

This is Chrome 38 beta.

So "LivePage will run on" in the options page will update in the background & the option pages setting with take instant affect.

I'm wondering if there is some way to increase the polling setting time to let's say every 5 - 10 minutes?

I'm trying to use it as a way of displaying live info on a remote screen that only needs to update in 5 minutes intervals and the 1000ms seems to decrease the performance of the slide show that displays the data.

but this doesn't work with any templating system right?

we actually use twig a lot and making changes to templates does not issue a reload.

Maybe something like:

LivePage: I've started
LivePage: I am tracking 20 resources
LivePage: I've stopped

When rewriting a domains and paths, the domain is duplicated and a leading slash is added, causing the Chrome extension to 404 every file and eventually reload ever 2-3 seconds.

In my case, a URL like http://client.dev/main.css becomes /http://client.dev/main.css. That leading slash then causes the browser to request http://client.dev/http://client.dev/main.css.

I suspect this comes from the way you re-join the parts of the stack var around livepage.js:47.

Works perfectly with html and css, but when i update less file it crashes.
It notices the change and logs it in the console ( ["refreshing", "........*.less", liveResource] ) and then it crashes saying this
Uncaught ReferenceError: $LivePageLESS is not defined livepage.js:405
LiveResource.refresh livepage.js:405
LiveResource.check livepage.js:329
livePage.check livepage.js:246
livePage.checkBatch livepage.js:214
(anonymous function) livepage.js:217

Check URLs in batches, as sites with lots of resources still feel live. It might be a shout to store the last changed file & check it more frequently.

One thing I was noticing is that when you have your inspector (Chrome-Devtools) open and your CSS gets live-reloaded you have the exact same rules listed twice: (I changed something else than the body rule in my file)

main.css&livePage=123456789?LivePage=123456789:1
body {background:white;}

main.css:1
body {background:white;}

I would like the old files removed (maybe make it an option you can specify).

Would kinda solve the last issue I posted as well if you just replace the old file with the new one keeping the CSS-hierarchy intakt. (except if you use transitions for changes to CSS, then you need both files, personally I don't)

If somethings unclear I can try explaining differently or just post a screenshot to clear things up.

Cheers

It seems that LivePage doesn't work for the CSS-files.

<link rel="stylesheet" href="./css/global.css">

No updates are handled for the files like this one.
In other hand, it works for the .html files.

What is the solution?

OS Windows 7.
Chrome version 21.

LiveJS works well.

In IntelliJ, you can debug javascript in the browser by having the IDE host the pages and connecting to Chrome dev apis. When doing this, LivePage does not work, and prints out the following errors:

Uncaught TypeError: $livePage.checkBatch is not a function
(anonymous function)
Uncaught TypeError: Cannot read property 'refresh_rate' of undefined
(anonymous function)
xhr.onreadystatechange

I really can't say any more than this, other than it happens no matter what page I try to debug, so duplicating it shouldn't be a problem. I'm using the enterprise edition of IntelliJ, so I can't say if it happens on the Community edition.

Info: OSX 10.8, Chrome 49, LivePage 1.6.1, IntelliJ 15.0.1

When brosing a webpage using anchors, it disables LivePage. It shouldn't take care of the anchor in the URL.

Uncaught TypeError: Cannot read property 'refresh_rate' of undefined

I've encountered the following error which does not seem to effect functionality but is repeatedly posted in the console upon live page changes (although not consistently).

I think this has something to do with a need for 'mutual exclusion' during each call of Settings.refresh()- the settings class might benefit from a more asynchronous approach.

I am getting the following issue after which LivePage stops checking.

LivePage: Starting Up
LivePage: ["Scanning Page"]
LivePage: ["Monitoring http://Censored/ at higher priority"]
LivePage: ["Monitoring 19 resources",
Array[19]
]
LivePage: ["Refreshing", "http://Censored/",
LiveResource
]
Uncaught TypeError: Object # has no method 'sendMessage'
LiveResource.refresh
LiveResource.check
livePage.checkBatch
(anonymous function)

I'm using LivePage to auto-refresh a site that has a greater height than my viewport. When I'm scrolled all the way to the bottom (say I'm working on the footer), and I make a change, the auto-refresh often leaves me at the very top of the page.

This does not happen all the time. But I can reproduce it fairly good by modifying the padding of an element. If I modify the color of the same element though, it never happens. This makes me think it could be a problem related to the changing document height.

Wordpress uses PHP includes to generate the page, not static HTML - so any changes to those includes don't automatically show.

eg. The site url might show "domain.com/about/" but be showing content from header.php & page.php etc.

I tried using the link rel in the header as follows but without success:

link rel="livePage" href="/wp-content/themes/themename/page.php"

Is there any method that I could use to enable this, or could you incorporate this into your detection?

I also tried http://blog.readingroom.com/2011/10/27/live-js-why-its-amazing-and-getting-it-to-work-with-php-files/ but it didn't work either.

Thanks!

EDIT: For Wordpress - use this plugin instead https://wordpress.org/plugins/wp-livephp/
I'll still use Livepage for all non PHP included work.

https://developer.chrome.com/webstore/i18n#details - Use the newer style & break up the strings a bit more.

For some reason the CSS is not reloaded

I'm comparing the headers printed in the array in my console (debugging is turned on) to the headers in the network panel coming back from the HEAD request. The Last-Modified and ETag headers are both changing in response to an edit. But nothing happens.

I'd like the debug this myself, but not sure how to use the dev. tools on this extension (it's not listed in content scripts).

Any clues to what might be wrong?

I use an @import of font files in my CSS.

@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,700,300,400);

But getting a 404 error : the extension seems to try loading it on my localhost :

http://localhost/site/css/http://fonts.googleapis.com/css?family=…Condensed:300italic,400italic,700italic,700,300,400&livePage=1363103351970

CDN are disabled in the option page of the extension.

Maybe use the fileAPI to do it?

I got the following error:
Uncaught TypeError: Object false has no method 'checkBatch' (anonymous function)

Maybe because of two loading instances? The html tag had 2 livepage-loading classes.

LivePage only seems to fresh when it detects changes to the index file and the files it directly references (scripts and css).

It does not refresh on editing Angular directives.

I am using this on my localhost and I would like this plugin to watch my whole folder.

When they change, refresh the page.

https://developer.chrome.com/webstore/one_time_payments#verifying-payment - It requires a permission change so I'll just put this on the back burner for now.

I could also remove the free trial & not have to bother with this.

The logo isn't very good right now. I need to find/create a better logo.

Hello,

The extension does not work for me and get the following error:

GET http://www.theloop.nl/framework/?livePage=1425555753572 500 (Internal Server Error)livepage.js:301 LiveResource.checklivepage.js:246 livePage.checklivepage.js:214 livePage.checkBatchlivepage.js:217 (anonymous function)

What am I doing wrong?

Chrome is cool, but LivePage should expand into other browsers.

For a project I'm currently working on, I'm using .shtml files which aren't being detected as being updated. Maybe a feature where you can list your own extensions to watch would be useful.

pages opened via window.open don't get "watched".

image support would also not be a bad idea!

I might add a more agressive tidy html option.