I'm currently working on a webapp and the Javascript is revised fairly often. However, the changes don't occur until the browser cache is refreshed manually. Is there a way to implement cache-refreshing automatically through code for Chrome? Thanks.
You can put something like ?2352352 at the end of your JS file. So something like
<script src='myfile.js?20457207'></script>
Where the number randomizes, forcing the browser to think it's a different file.
Related
I am trying to find the way to debug javascript code inside the php file. I have a lot of javascript code embedded inside the php file.
I can debug php code using netbeans with the help of XDebug. I can also debug javascript separately inside html or js file with browser like chrome or firefox.
What I want is to debug javascript code inside the php file if it is possible. I am sure a lot of people will be using javascript embedded with php file. I don't like it personally, but I have to work it on. I know I can write the code separately in js file and then can debug with browsers, but it's lot of code, take time for the separation.
Can anybody here suggest me a way if it's possible what I am asking.
Debug Javascript in netbeans 7.4 inside PHP project
https://netbeans.org/kb/docs/php/debugging.html
https://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time+in+PhpStorm
https://blog.jetbrains.com/phpstorm/2014/06/debugging-php-and-javascript-code-at-the-same-time/
IMHO, without even looking it up, i don't think that it is (nor should) be feasible.
Here's why:
Your PHP gets processed on the server side, that's when XDebug kicks in and enables you to breakpoint all your PHP code. Then the server output gets to the client, that's when the actual JS is processed inline in the parsed HTML. Which means you would have to intercept the HTML in some way, parse it, detect eventual inlined JS scripts... and set your breakpoint(s) at that time (yes on each run), then output to client, which parses the HTML yet again to render it and process eventual breakpoints. It would be a tedious process and even more tedious to get to work i guess and that is why nobody even tried making an extension for that.
To my knowledge, inlined JS is also a lot harder to debug and i never saw an actual setup that would allow breakpointing embedded tags in a static HTML document directly from the IDE, which would've been somewhat a little easier to achieve than breakpointing JS in PHP...
Your best shot i guess would be to externalise your JS in separate files and only hard code <script src="path/to/your/app.js"></script> in your PHP templates, which indeed would be much more comfortable to work with on the long run anyways.
Then you would be able to breakpoint all the stuff in app.js, plus have an actual front-end architecture, syntax-highlighting, impress your boss, make your life a lot easier, the world a better place, etc.
Also, for reference: How to debug JavaScript code with Netbeans? (answer #45515159)
And read on: https://netbeans.org/kb/docs/webclient/html5-js-support.html
Edit: seems like setting JS breakpoints in static HTML tags is feasible in Visual Code for example -> https://github.com/Microsoft/vscode-chrome-debug/issues/122
I don't know if I am late, but, I came across the following website and was able to setup the debugger for Javascript and PHP which supports to debug embedded JavaScript in PHP scripts.
source: https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/
The website uses PHP.exe as a web service.
It is also possible to use IIS, Apache or others.
Requirements:
IDE: Visual studio code
Extension: PHP debug
Extension: Debugger for (Chrome, Firefox or Edge)
Xdebug set in php.ini
Extension in browser (optional): PHP xdebug if you want to debug on trigger.
You need to have two debuggers running at the same time one for PHP and one for JavaScrpit.
PHP sample
JavaScript sample
I worked with a lot of wordpress templates where I had to deal with some js inside my php files. Assuming that you can run your code on a server, you can easily debug your output in dev tools in chrome (if using chrome). Chrome also allows for setting of breakpoints so you can go line by line, and since your browser ultimately runs the js, you can monitor your code behavior without dealing with the php. That was my main way of dealing with this issue.
I also recommend separating as much js as possible into separate files in your assets folder. Depending on your project, you rarely have to inline your code, In my opinion it's messy to include a lot of JS right in your php, unless you use onclick="" or onchange="" attributes (which can also be handled with event listeners.
Aside from that, console.log() the crap out of everything.
I helped my self with the following steps if it could help any body else
Note:- If your rendered code is inline specific to java-script then it would hard to debug like this.
Run the required page of your application using browser like chrome, edge etc
Open the inspection page by pressing f12 or (Ctrl+Shift+I), Or you can right click on the page see the option for the inspection and click on it.
Goto sources and double click on the source file(this will be probably your php file).
If code not loaded then reload the page by pressing f5 or Ctrl+R, you will see your java-script code there embedded with the html after rendering, then you can put the break point wherever you want and debug through the browser tools(you can see some buttons there to guide you about debugging like step-over,step-into etc).
You will also see errors there regarding java-script,
I try to modify <canvas> in realtime so I can learn fast, but because the code is used in the <script> so when I try to modify the code it dident get updated as i did with HTML or with the CSS.
How to make it update in real time?
Code doesn't work like CSS or HTML (which is markup, not code, and it has a constant effect on the page). Your code is executed on page load, and if you change the code in the dev tools after it's run it's not going to un-execute your code so it can run the changed version.
At least not from the dev tools. Instead I recommend something like LiveReload which can watch for when you save files and then make your browser refresh itself.
I'm using Tincr (http://tin.cr/) to take advantage of Chrome's code hot-swapping functionality. However, now I need to disable Meteor's refreshing of the page each time I save a file since the code is already update in the browser's runtime environment thanks to chrome hot-swapping.
How can I do that?
i found the answer. add a '~' at the end of files or folders you don't want causing reloads.
i'm working on a web application...
The application is running fine but the problem is the first time wen i open the application in the browser it shows a blank page i have to hit refresh three or four times to load the page completely and correctly.....
I think my application is too heavy to load, However once it is loaded it's good to go....
i have probably 5 JavaScript files which is around 1.3mb in size and also some UI components.....
is there a possible way to control it so that wen i load the application it returns the entire application without the necessarily hitting refresh again and again....
is there a way to optimize this page....
please help...
Thank you in adavance...
hi again,
is there a way to automatically reload the page if it didn't load the first time?
Check whether you can optimize your code in the javascript. Do you need all the functions that are defined in those 5 javascript files?If not you can split it and load it when other pages load that need this functionality.
Try to find out which part of the code is making it too slow?
1.3 MB of javascript is too much. Try compressing your javascript.
http://jscompress.com/
After compression, try delay loading the javascript files which ever possible:
http://www.websiteoptimization.com/speed/tweak/defer/
Run YSlow addon to gather more information about optimizations possible
http://developer.yahoo.com/yslow/
The easiest method is to run YSlow on a Firefox Console
You should also compress your javascript files using YUI Compressor
Have you minified your javascript. This makes it more difficult for humans to understand but can significantly reduce the file size. If one of those scripts is jQuery you might consider referencing the copy hosted at google on your page rather than having it hosted on the serve. Google's server is probably faster than your, and a lot of users will have a copy of jQuery from google cached.
If the site is image heavy and PNGs are used you might consider removing some data from them to make them smaller using tools like pngcrush
As mentioned by a few other, running the page through YSlow is very likely to help find issues that could cause slow performance
I was just wondering what the simplest javascript function would be to request a server side .js file. Currently I have a jquery-1.4.2.min file that weighs in at 70kb, and I figured that there has to be a way, using javascript, to request this file. That way, if the user doesn't have javascript enabled the function would be ignored and the jquery file wouldn't have to be downloaded, thus speeding up the download of the page and decreasing the bandwidth used by the server.
Also if this works, would the file just be downloaded, or would the page begin to use it? Thanks in advance!
Most browsers already don't download JavaScript when it's disabled, so this is an over-optimization for most browser users. If I can find the question on it I'll update this...but it's something you don't need to handle :)
Edit: Here's that question, though I think there's another similar one as well.
Something else to keep in mind is that the user will only download it once if your cache headers are set correctly. Also take a look at using a CDN for your jQuery include.
If the user doesn't have javascript enabled, <script> elements with src attributes will be ignored.
If you really want to, you can document.write() the script tag or create a script element and append it. If js is disabled it will never happen. But others have mentioned already, for most modern browsers, the script tag will simply be ignored if js is disabled, so it's overkill.