I'm looking for a tool and I'm not even sure of the proper name. Please be patient with me as I explain.
I'm doing a lot of HTML/MVC 2 work. Using the standard MVC 2 view engine, I would like to have an editor that shows real time changes in the browser. If I re-arrange div elements containing standard HTML and some server side components, I would like the browser to update without a manual refresh.
Are there any tools that are currently available that would meet that requirement?
If you use firefox, you can use ReloadEvery plugin and set up refresh every x seconds. This will simulate real time editing.
There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free. It works with ASPNET MVC, or any server side technology. It does not require IIS. It does require IE.
It's not an add-on to IE, just a companion tool. It does not change the IE install, does not install a BHO or anything like that. So very low-impact installation.
You choose a URL that you'd like to auto-reload, and specify one or more directory paths to monitor for changes. Press F12 to start monitoring.
After you set it, minimize it. Then edit your content files, in whatever tool you prefer to use. When you save, the page gets reloaded. like this:
Similar to what #LukLed suggested, XRefresh is a plug in that will refresh your browser screen automatically.
Instead of refreshing every X seconds, XRefresh will watch a directory tree/set of files and only refresh when one of them changes.
It's great in multi-monitor setups, and saves a few seconds when switching between windows in single monitor setups.
Related
I am working on a new site and whenever I change CSS settings chrome will not accept those changes unless I close out of chrome completely with Task manager and relaunch it. I have a tried quite a few things. Below is a list of things I've tried:
Versioning the CSS file (I am using a PHP date stamp at the end of the CSS file
Enabling "Clear Cache while developer window is open" in the Developer console
Using Ctrl + F5 to clear cache on refresh
Going to Application and Clear Storage in the developer Console
Clearing Cache folder in local AppData
Deleting CSS file from stie, refreshing, and readding file.
Incognito mode
Adding Launch options to chrome shortcut --disk-cache-dir=null
Adding Browser Plugins to delete cache.
Anyone have any ideas how to help? It is extremely annoying and inefficient to close chrome every time I want to check a CSS change. Another annoyance is that I am trying to listen to music in the browser so if I close chrome I have to go back and get my music playing again and it's just as of now extremely annoying and way more time consuming than I want.
I've tried looking at other articles online about cache busting and other articles on Stack Overflow but I've tried to do most of what they suggest and I haven't seen any positive outcome yet. Most articles say to add some sort of random string or version on the end of the CSS file as a GET request but that isn't working though I know that has worked for me in the past.
pres f12 > f1 > network > disable cache (while DevTools is open). This should solve your problem
Development server was running various caching tools though they should have been turned off. After disabling them chrome started to work better and most of the time CTRL+F5 did the trick.
"clearing cache" is not as easy as it should be. Instead of clearing cache on my browsers, I realized that "touching" the server files cached will actually change the date and time of the source file cached on the server (Tested on Edge, Chrome and Firefox) and most browsers will automatically download the most current fresh copy of whats on your server (code, graphics any multimedia too). I suggest you just copy the most current scripts on the server and "do the touch thing" solution before your program runs, so it will change the date of all your problem files to a most current date and time, then it downloads a fresh copy to your browser:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.css');
touch('/www/sample/file2.css');
?>
then ... the rest of your program...
It took me some time to resolve this issue (as many browsers act differently to different commands, but they all check time of files and compare to your downloaded copy in your browser, if different date and time, will do the refresh), If you can't go the supposed right way, there is always another usable and better solution to it. Best Regards and happy camping. By the way touch(); or alternatives work in many programming languages inclusive in javascript bash sh php and you can include or call them in html.
I used to have the same problem, and I believe it's a (pretty annoying) bug with chrome. You can use the CSS Reloader Chrome Extension to solve it. Not ideal, but better
If you are trying out new CSS updates, I suggest using Chrome's "Inspect" function to dynamically update CSS settings and observe the results interactively. This may save some time during update cycles as compared to manual edits alone.
Another option to try is to define "cache-control" meta tags in your head section. For development/testing, you may want to have no caching. For a real website, you may want to have a shorter age limit. Refer to the following SO Q&A.
Using meta tags to turn of caching in all browsers?
I've been experimenting with using Chrome DevTools as my primary authoring tool, and am now mostly using them.
As I continue to increase my usage, I'm running into some pain points.
Usually, when I begin working on a project, I now create a dedicated Chrome profile for it. I do this automatically by invoking Chrome with the --user-data-dir flag and storing the browser profile right within the project.
Then I go into the tools, set up my workspace, map my local directories, and so forth. This works great.
What doesn't work so great is that this is a very repetitive process. I'd love to be able to specify the workspace mappings within the project somehow, and then generate the appropriate profile. I'd also love to be able to set other preferences (like indentation, and various other settings on the DevTools "General" page) in a standard way.
I've thought of three ways this might be possible:
There might be an API for this, but I doubt it, as programmatic manipulation of browser preferences obviously is disfavored (but would someone have carved out an exception for DevTools?),
There might be a way to import/export DevTools preferences, and I might be able to generate the import format,
I might be able to figure out where they're stored in the user directory, and manipulate them myself (so far I haven't, though).
There's also one partial solution I've considered:
I might be able to copy a "template" browser profile to get some of the shared settings above. Then I'd still have to do the workspace mapping each time, but I might be able to get away with not doing the rest.
One really elaborate strategy I could try would be to use browser automation, as suggested in Google Chrome - how can i programmatically enable chrome://flags some of the modules from disable mode to enabled mode? ... but that seems like overkill even as I start using the stuff more heavily; I don't think I'm quite ready to invest that kind of up-front effort in it.
Is anyone familiar enough with how the Chrome DevTools preferences work to judge which strategies might be most promising?
There is no way easily sync DevTools settings. They are stored in localstorage scoped to the DevTools. Which means they are in a special sqlite DB which isn't easy to transfer between machines (plus you'd bring all the other stuff with it.)
Sadly, you are left porting this all around by-hand with each new machine.
With HTML5's offline capabilities is it possible to create an app that will persist after the connection is lost and the browser is closed? Specifically, here's what I'd like to do:
Connect to the app while online. Download the entire app including a small database it runs on.
Close the browser and disconnect.
Open the browser again while offline and load the app from the local cache.
Thanks to Mark Pilgrim's excellent book I believe I have an idea of how to accomplish the first step, I'm mainly wondering if the last step is possible. If this is possible, I'm guessing it requires some configuration of the browser. Any settings I should be aware of that aren't obvious?
Thanks very much for any help offered.
The last step should be possible - it just depends on what extent you want to implement it to. To my knowledge it shouldn't require any browser settings. You just have to be aware of the limitations of local storage, which I believe is 5mb max at the moment (for most browsers). Obviously you'd have to perform the checks for such permissions as outlined int the Dive Into Html5 guide you linked.
The quickest and dirtiest way is to simply issue a GET request to your online app. If it responds correctly, then use the online version. If not, use the local cache. Just disguise the timeout/failed response as a 'loading' screen.
I'm developing a Chrome App (as a packaged app/extension) which purpose is to act as the base platform for several fullscreen apps to be build on top of. Chrome will be running on Ubuntu Linux.
And no trouble so far. But then I was told, that an intended app it is to be the platform for requires the source code to be updated with very short notice, as it probably is to be deployed for large scale use before the system has been tested through (even though it's a bad idea to deploy software that's not completely stable, but we're on a tight schedule). The problem is, that the "a few hours" interval for the autoupdating mechanism just isn't good enough.
So I somehow need to have the updating interval changed. I know this can be done with the --extensions-update-frequency command line switch, but as apps cannot access the command line (for obvious security reasons), and I'd prefer that the intended background page was to handle all the "administration", I don't think that switch is possible to use.
Is it somehow possible to update at a higher frequency? Or at times when it's ordered to?
There is now a method chrome.runtime.requestUpdateCheck():
Requests an update check for this app/extension.
It will return a status, which can be either "no_update", "update_available" or "throttled".
Unfortunately, the docs do not specify the limits for frequency that will trigger "throttled".
Your best option will be to have the extension manually check with your servers for an updated version. If there is an updated version show the user a desktop notification to manually update.
Potentially you could write a NPAPI plugin to modify the update frequency.
This may cause issues with CSP but you can try to live load JavaScript from your server that executes in the extension. In this case to "update" your extension you would simply update the JS hosted on your servers and the extension would automatically start using it on next load.
Our web analytics package includes detailed information about user's activity within a page, and we show (click/scroll/interaction) visualizations in an overlay atop the web page. Currently this is an IFrame containing a live rendering of the page.
Since pages change over time, older data no longer corresponds to the current layout of the page. We would like to run a spider to occasionally take snapshots of the pages, allowing us to maintain a record of interactions with various versions of the page.
We have a working implementation of this (Linux), but the snapshot process is a hideous Python/JavaScript/HTML hack which opens a Firefox window, screenshotting and scrolling and merging and saving to a file. This requires us to install the X stack on our normally headless servers, and takes over a minute per page.
We would prefer a headless implementation with performance closer to that of the rendering time in a regular web browser, but haven't found anything.
There's some movement towards building something using Mozilla source as a starting point, but that seems like overkill to me, as well as a maintenance nightmare if we try to keep it up to date.
Suggestions?
An article on Digital Inspiration points towards CutyCapt which is cross-platform and uses the Webkit rendering engine as well as IECapt which uses the present IE rendering engine and requires Windows, natch. Nothing off the top of my head which uses Gecko, Firefox's rendering engine.
I doubt you're going to be able to get away from X, however. Since CutyCapt requires Qt, it requires either X or a Windows installation. And, similarly, IECapt will require Windows (or Wine if you want to try to run it under Linux, and then you're back to needing X). I doubt you'll be able to find a rendering engine which doesn't require Qt, Gtk, GDI, or Cocoa, and therefore requires a full install of display libraries.
Why not store the HTML that is sent out to the client? You could then use that to redisplay in a webbrowser as a page to show what it looked like.
Using your webanalytics data about use actions, you could they use that to default the combo boxes, fields etc to the values the client would have had, even change the CSS on buttons, etc, to mark them as being pushed.
As a benefit, you don't need the X stack, don't need to do any crawling or storing of images.
EDIT (Re Andrew Moore):
This is were you store the current CSS/images under a version number. Place an easily parsable version number in a comment in the HTML. If you change your CSS/images and use the existing names, increment the version number in the HTML output sent out.
The system that stores the HTML will know that it needs to grab a new copy and store under a new number. When redisplaying, it simply uses the version number to determine which CSS/image set to use.
We currently have a system here that uses a very similiar system so we can track users actions and provide better support when they call our help desk, as they can bring up the users session and follow what they did, even some-what live.
you can even code it to auto-censor sensitive fields when it is stored.
depending on the specifics of your needs perhaps you could get away with using one of the many free webpage thumbnail services? snapcasa, for example lets you generate thousands per month / no charge no advertizing .. (not ever used, just googled 'free thumbnail service') to find this.
just a thot