debugging amd js codes in moodle whithout purge caches - moodle

When I want to debug javascript codes in AMD module in moodle its too hard to purge all site caches in each edit is there any way for debugging?
on the other hand when I purge all caches it takes much time to load again.
I tried enabling theme developer mode but my problem not solved.

Go to
Site administration ► Appearance ► AJAX and Javascript
Turn off "Cache Javascript" and save.
This will make the system not compress and cache the javascript so your changes will take effect right away. This also means that only changes you make in the amd/src will be shown. You should generate the amd/build javascript using grunt once you are ready to go to production and turn the cache back on.

Related

Web Development :: VSCode, Live Server Plugin, Firefox -- Browser Always Caching, Not Refreshing

I'm using VSCode, Live Server plugin for HTML5 web development. When i make a change to my web page then save Live Server should refresh what i see within Firefox. It does refresh but it is always to the oldest cache of the web page when live server first started up. I must always tap CTRL-F5 to force a web page refresh within firefox. The moment i save again within VSCode, the browser display reverts right back to the oldest, first copy.
I've already tried enabling "Disable Cache" within the FF Dev Tools > Networking area. Didnt help. I've tried about.config | browser.cache.disk.enable set to false. Didnt help.
Just wondering if this is normal behavior or if the Live Server plugin (Ritwick Dey) for VSCode is broken.
At the present time
Ok it seemsthe problem was i was using a service worker (sw.js). The browser saw the file, autoloaded it and apparently took full control over caching in the browser -- basically, no matter what i did caching and refreshing was meaningless. I really need to understand this sw.js thing.

moodle: Automatic plugin updates for developing offline

I am developing a plugin for moodle. Every time want to review the results of the things I have changed in the code it is necessary to update all plugins. This means I have to open a notification page and click on update. I waste a lot time by doing this. Furthermore, it requires a internet connection to check for updates online.
Is there a way to update plugins that are under development automatically?
UPDATE
Especially changes to the AMD-Files do not become updated. The following steps I have tried:
First try:
change js-file inside AMD folder
[optional] delete minified version of the js-file
run grunt (uglify)
page reload in firefox or chrome
=> no changes visible after page reload in firefox
Second try:
change js-file inside AMD folder
run grunt (uglify)
change version number at version.php
updated plugin at moodle / administration / site administration / notifications
page reload in firefox or chrome
=> changes are visible
Cache was disabled in the browser and inside moodle
You shouldn't need to do any form of update if you have just made changes to your code - make the change, save it, refresh the page.
If you have changed any language strings or CSS or created any new autoloading classes, then Purge the site caches to see the new version.
If debugging is on, you shouldn't need to purge any caches for javascript changes (but you can also set $CFG->jsrev = -1; in config.php, as that sometimes helps).
The only times (during development) when you really need to bump the version number and then visit the notifications page (which doesn't require an internet connection) is if you are adding/removing a capability, changing the database tables in some way or making changes to one of the other files in the 'db/' subfolder (e.g. caches.php, messages.php).
I changed the config.php in the root folder of moodle and added the following lines:
$CFG->cachejs = false;
$CFG->debug = DEBUG_DEVELOPER;
Finally, I saw all changes made to Javascript files stored in mod/my-plugin/amd/src directly on the page without running grunt.
It was not enough to set the debugging options under administration / site administration / development / debugging.

Get the real-time web design preview from the browser

Assume that I have two monitors assigned to my pc. Now I want to get the preview of a web site while coding it. Is there anyway to do this?
eg:- Do the coding from sublime text from a one monitor and the meantime watch the output from the Firefox web browser.
I have used live.js for this more than once. It can work either as a bookmarklet or embedded on your page, and it works in any browser as it's not an extension. Also requires no other software to work.
The downside is it that it will flood your developer tools with HEAD requests every second or so to determine when to reload things. That's the cost of not having to install external software.
You can use the LiveReload plugin for SublimeText. It listens for changes to your code files and updates them in the browser in real time.
Also, do not forget to add the respective browser extension. That should save you from adding any scripts into your page.
You could use yeoman ( with Grunt or Gulp depends on which generator you want to use ).

GWT development with Eclipse

I am developing a GWT app using eclipse and I was wondering if there is a way to hot swap client code changes I make without having to do a full Google Compile each time. Currently when I modify my code, I do a Google compile and then click the Reload server button, then I refresh my browser to pick up the changes. This is starting to get a bit painful as it takes 10 - 20 sec to do a full compile when I may have only modified a UI string so was wondered is there a quicker way.
If you want to see your changes in client code, hit the refresh button in your browser.
If you need debug functions, use Debug As => Web Application. It may be a little (or a lot) slower to start depending on a browser.
If you don't need debug functionality, use Run As => Web Application. It starts faster. You will still see all errors in Development Mode and Console tabs.
If you make changes to server-side code, you have to reload the web server, using the dedicated button of the dedicated Development Mode view in Eclipse.
You never need to recompile unless the plugin tells you to do it.
See https://developers.google.com/web-toolkit/doc/latest/DevGuideCompilingAndDebugging#DevGuideDevMode
To add to Andrei's answer Assuming we are changing functionality invoked on button click.
1) We usually change lines of code in the function invoked and click the button again in the UI. No need of reloaing the entire application using refresh button.
2) If the change involves code that cannot be hotswapped - example class changes like adding new a class variable, then you need to refresh browser. You can sometimes ignore the eclipse warning complaining that it cannot hot-swap.
3) If you run out of memory then you need to close and relaunch dev mode.
4) If your server side is hogging memory then it might be better idea to use external server rather than jetty to avoid time consumed on server restart for every dev mode launch.

NetBeans: Code changes to javascript & css files are not reflected in browser after saving

This is driving me crazy. I'm developing an app in the NetBeans IDE in PHP, using the CodeIgnitor framework. I am making code changes to js and css files in NetBeans, saving them but the files the browser is loading do not contain the code changes. When I open the files directly outside of NetBeans, the saved changes aren't there.
I'm storing the javascript & css files in a folder called static, which is outside of the 'application' directory in CodeIgnitor. What's weird is any code changes in PHP files work fine. I'm guessing NetBeans is saving the changes to the js/css files somewhere else but can't find them on my hard drive. This just started happening, it was working 'normally' before.
Thanks for the help.
Al
I had the same problem, upon investigation, my browser cached my old style sheet that I had recently updated. Clearing the cache and refreshing showed my new styling, after around 20 minutes of frustration :D
This problem occurs due to browser cache. For chrome while testing open the developer mode by pressing the F12 key and set cache disabled in the network tab as shown in Image below. It will ensure that you will always get updated version of the page files.
Check to make sure that the files are where you think they are. I would imagine that CodeIgniter is rewriting the request to be inside your application folder and thus bypassing your specific folder.