Webstorm Remote Debugging + edit local javascript file while debugging - javascript

I've been working through the javascript remote debug tutorials for WebStorm / IntelliJ(numbers.js)
I've managed to get remote debugging working successfully, however there is one thing that is making life difficult.
When I'm debugging numbers.js in WebStorm(I've also tested in IntelliJ and have same result) there is a little lock icon which I guess implies that the file is read only. At the moment, it is slow and painful to go full cycle on the development / deploy process of:
code modification on local file
upload
debug on locked remote fuile
switch tabs in WebStorm to local file
code modification on local file
What I want to do at least is debug on local file, so that I can make changes while debugging and then quickly upload and repeat.
# the tutorial
http://wiki.jetbrains.net/intellij/Remote_JavaScript_debugging_with_WebStorm_and_PHPStorm
the numbers.js file does not have the locked symbol in the tab like I am seeing in my locally running WebStorm.
Anyone else have this problem? Anyone advise how they got WebStorm working so they can make changes to the local file while stepping through and debugging?
Thanks

Most likely you open the file from the Scripts tab in the Debugger panel and place breakpoints there. You should place breakpoints in the original file instead.
Deployment can be automatic (on Save) or you can use In Place configuration when your server root is configured to the project folder.
Another important thing is the local file to remote URL mapping in the Debug configuration. Note that in the wiki tutorial Remote URL is set to the full URL including the http:// and server name.
With In Place deployment or with Automatic Upload and correct mappings you can debug your scripts with zero turnaround time. Make a change, switch to a browser, Refresh (file is saved automatically as Settings | General | Save files on frame deactivation is enabled by default).
If it doesn't work this way for your project, please contact JetBrains support and send a sample project to reproduce this problem, also describe your server and deployment settings.

Related

Looking for a technology/code in java or other maybe to sync files from browser or https

https://github.com/deanhiller/webpieces is a platform that you can write code in java without rebooting the server via it's DevelopmentServer.
Now, to avoid the cycle of fix code, deploy to cloud, test, fix more code, deploy to cloud to test, I would like to just sync changed files to the cloud container so that the cycle becomes
change code
test
no more deploying and since you are just uploading human changes, it's FAST. Now, webpieces is a webserver that hosts a website or json api or whatever. I am thinking of 2 ways of doing this but not sure the technology is there?
Go to webpage on the cloud server and input local source directories to monitor
Locally, just run a program webpiecesSync configuring source directories and the json api to hit on the cloud instance
Number 2 has an extreme advantage over #1 in that I can register for async file notification of changes so as you change a file, the sync uploads it to the cloud and webpieces DevelopmentServer just saves the file to the needed location and when you hit the webpage with the change, the DevelopmentServer does the work of recompiling when needed.
I am not sure #1 can even come close to #2, but if anyone knows of a technology there, javascript or whatever that could maybe do this, I am wondering if I could make a wizard in the DevelopmentServer sync plugin (if I had one) that would then just keep up to date with changes of the directories and grab those files(assuming the user gives it permission somehow). I am very lost if #1 is even feasible?
Any ideas/guesses greatly appreciated.
thanks,
Dean

png files failing to load when opening html file directly, but they load when opening from webstorm

I've been working on a game in javascript for my CS course. When I open the document by hitting run in Webstorm, it loads the game correctly, however when I just try opening the html file from Finder, the webpage opens but none of the png files I'm using for the sprites load. I opened Inspect Element in google chrome, and the javascript files loaded correctly but all the png files listed as canceled. This doesnt happen when the game is run from webstorm (when I run it from webstorm, all image files load properly).
When the game is opened directly from an html file (that's when I have the problem), chrome lists the path of the html document as the webaddress, although when opened from webstorm, it lists http://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4
How can I get around this issue so that when opening the html file from Finder it loads everything correctly? All image files are in the same directory as the html file.
Because of browsers security, loading files like this might not work from a url starting with file://
What webstorm is probably is making a local web server so that instead of saying file:// you could say http://. if any website was able to load images from file:// then any webpage you visit would have been able to search for any file on your computer and send it over the internet without your consent so browser often have these settings on. So you'd need a server. If you are working on your computer, you could make a local server just like webstorm and host your own files there. or host it on another service like github pages or codepen.
Now since all images are in the same directory, make sure that every time you call loadImage you use the images name and extension instead of saying /User/user/whatever_other_directory_you_have_it_under/image.png.
Once you did that you can make a local web server for the project. To make a local server, open Terminal (an application under utilities, you could spotlight search for it as well) and type cd, drag your project folder and drop it over terminal, and hit enter. Then type python -m SimpleHTTPServer and wait till it says something like Serving HTTP on 0.0.0.0 port 8000 .... Then taking the 0.0.0.0 and the 8000 you see in the example (yours may or may not be the same) go to your browser and type http://0.0.0.0:8000 (replacing the digits with whatever you got, not this link doesn't work until you do that)
Images should load alright. If you need to stop the server you can go back to terminal and hit control+C.
Note that when presenting your p5 sketch, no one else would be able to see the website on their computers if you make your local server. The local server is secluded to the device that is running it (although if their making their own local server and have your project files it should work just fine).
If you want the website hosted so that you could share a link with anybody in the world you could use codepen or github pages. If you go to codepen.io it should be self-explanatory although you'd have to upload your images to some image hosting site like tumblr or something and add the URL source of those images to codepen or you could put everything into github for even better results!
To use github pages you'd need to make a github account (preferably with your username being whatever you want your page to be named). Make a repository named insert_username_here.github.io. add your files to the repository (make sure to try to keep all sub directories and folder exactly as they are from your project folder). After a minute or two go to http://insert_username_here.github.io to admire your brand new hosted webpage!

Aptana Studio 3 - SFTP - Preview not displaying CSS/JS. What's wrong?

I have a website hosted that I am using Aptana to connect to the server via SFTP and edit the files there. When I preview the html file, it seems to store a temp version of the file on my local drive:
file:///C:/Users/username/AppData/Local/Temp/aptanavfs/aptanavfs2715860739108955789index.html
instead of using the live version... and this seems to cause it to not load the CSS/JS (I guess it's not making a copy of these files to the temp path).
What's going on? When I view the site live on the internet, everything is working fine.
The files from your remote server might not be synchronized with the files on your computer.
Check your Synchronization options to ensure you tell Aptana to 'sync from your remote site to your machine' - if you do not have all the files from the server on your computer, you need to do this at least once before you start working on your changes.
After this, you will want to decide how to keep the changes made on your computer in sync with the server (either manually upload them yourself, or tell Aptana to automatically synchronize them)
Check this page for a brief tutorial on how to set up the sync options (step 7):
http://www.danielrosca.ro/blog/en/aptana-studio-and-ftp-server/

Not able to see changes to UI files while using Websphere Liberty Profile through Eclipse on Mac

Within WebSphere Application Server Liberty Profile Guide for Developers pdf in section 1.4 (Frictionless application development), it mentions:
By default, the Liberty profile will monitor deployed applications for changes.
Updates to static files (HTML, CSS, or JavaScript) or JSP files are detected and
served immediately. Changes to servlet classes cause an automatic restart of
the application.
I am not deploying via dropins folder. I have a configured server.xml file within Eclipse
<application location="/Users/path/my_application.ear" type="ear"></application>
I am not able to make any changes to my source UI files and see updates on WebSphere.
I am also not able to find a particular js file deployed anywhere, so it seems the *.ear file is not expanded, so I could edit the file directly on the server.
The only way I can see changes to my UI files is to make the changes to the source files and rebuild the ear file.
I feel like I am not creating a proper mapping to my source files and/or perhaps the Liberty profile on Mac doesn't explode the ear files so that I can edit the deployed UI files.
Thoughts?
If you want to have automatic updates of your files on the server, the best way is to use Eclipse to deploy the project to the server using "Add Remove" option on the server. This configures server.xml to point to your expanded app in the workspace. As result any changes to the files in the workspace are visible and detectable by the server.
If you configured your server.xml with path to the ear, it will monitor only for ear changes. And since your UI files are in totally different place, changes are not detected unless you rebuild your ear.
For deployment options to Liberty see the following links:
Adding and running an application on the Liberty profile by using developer tools
Deploying applications to the Liberty profile
It is possible to indicate path to an already deployed application, in my case it's a web application:
<webApplication location="\programs\wlp\app1_war" name="app1" contextRoot="app1">
<classloader delegation="parentLast"/>
</webApplication>
Changes in some scripts will be loaded automatically, but java classes are loaded by class loader when server starts or when app is redeployed.
See classLoader and classloaderContext, maybe there is a way to make class loader to reload classes at change:
https://www.ibm.com/support/knowledgecenter/SSD28V_8.5.5/com.ibm.websphere.wlp.core.doc/autodita/rwlp_metatype_core.html?view=kc#mtFile17

How to make javascript file update take effect immediately on IIS for asp.net web sites?

I'm writing an asp.net project. When trying to fix a bug, I updated one of my javascript files and then deployed the new version on my server's IIS 6.0. I can see that the new javascript file has been updated on the physical folder of the website.
However, when verifying the bug from my local machine I found that it's not fixed. After some investigation, I realized that it's because the javascript file received by my browser is not the latest version.
I deleted IE's caches and the problem still exists. Then I tried to download the javascript directly from my website by using the url like:
http://myserver.mydomain.com/mywebsite/scripts/myscript.js
and found out the downloaded javascript file is of the old version.
Then I realized this is probably caused by a cache on the server side. I tried to set the server's IIS: on my site's "Output Caching" option, I unchecked "Enable cache" and "Enable kernel cache"
:
Also I added rules for .js and .css file:
After taking all these actions, I updated my javascript file on the server, restarted IIS and tried to download it from my local machine again.However, the javascript I downloaded is still not the latest version.
So my question is, what shall I do to make sure the the browser can immediately get the latest version of the javascript file on my server's disk? Thanks!
I use the old trick of js and css versioning, for example if I create a new js file I call:
new_1.0.0.js
Then, if for some reason I change, I will change the name manually to:
new_1.0.1.js
Also change all the parts where I Referencing. With this, your browser should always bring you the latest standalone version of the settings you have in the IIS. At least in my different jobs where I used II6 or II7 have applied and it has worked.

Categories

Resources