How to find the source file of the javascript - javascript

I'm using Primefaces 5.1. When I load my web page, go into the Firefox debugger and look into the javascript, I see that it has loaded some javascript (Primefaces.js.jsf to be precise) which is part of Primefaces 5.0 version. Now, I have taken care to delete all the references of 5.0. But still I get the same result.
So, my question is- when a web page is loaded, and we see the javascript files loaded, how do we know where a particular script file is being retrieved from?
P.S: I'm not the one who wrote the code to include this js. it is part of the framework. So, I have no control over where it is being accessed from. All I can do is if I know the path of the file, I can modify it to suit my needs.
I have deleted the history/cache/Temporary files and also loaded the page using Ctrl + F5. Didnt help.

Found out why the project was still referring to PF5.0. The primefaces-5.0.jar still co-existed with primefaces-5.1.jar in the WEB-INF/lib directory of the project residing in the glassfish directory 'glassfish3\glassfish\domains\domain1\eclipseApps'.

Related

How to debug js loaded in ajax request in Chrome DevTools

Actually I am a big fan of Google Chrome DevTools but it is very vast area for learning. I don't know much about it. I know how to out debug point, searching (Ctrl+Alt+F) and debugging, etc. basic things.
But in one of my project (its in asp.net MVC), it is requesting different views in Ajax request and in that views there are some js loading. I want to debug them but I am not able to. Actually I don't know where can I see them - especially the JS which is load after ajax call (its not inline javascript but a separate js files).
A workaround I found is - if I put 1 "debugger;" in that js file then it opens with some VM3012 or similar name with different numbers. Then only I can see the files. But I can not put debugger when I publish the code.
Any body knows then please help.
Thanks a lot for reading.
EDIT
as per first answer, I have tried but I can see that option "Open in Source panel" for normal JS file. But in my case my request is passing some query string to the js file like assets/components/utility/mycustom.js?_=1528282662460 and I am not able to see that option for such request. This help is appreciated but need more.
I know it's been 3 years but...
You can name the piece of javascript code inside the dynamic loaded file by adding the following above the code:
//# sourceURL=my-file-name.js
By doing it, that piece of javascript will be available in the file tree of the source panel and can also be found by the DevTools' CTRL+P shortcut.
Go to the network tab of the dev tools. You can filter by js files to help you find the file you need. Right click on the file you want and select Open in sources panel. You should now be able to put the breakpoint where you like as you are used to.

Adding JQuery/Javascript Files to Project

I have a project I am working on at work that is ASP.NET in TFS. I have checked out the solution and have made some adjustments to the code behind with no issues. When I try to add JQuery and a Javascript file to the project, it does it fine in Visual Studio 2012. But when rebuilding and running it won't execute the javascript code. It's like it ignores it. When I put breakpoints in the Javascript file I get the message 'The breakpoint will not currently be hit, no symbols have been loaded for this document'. I simply cannot get the web page to acknowlegde either the JS file, or the JQuery file.
(And yes, I have scoured StackOverflow.com and tried all the suggestions mentioned)
Any suggestions appreciated!

Save HTML As Standalone Page: Exporting Tool?

I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.

Referencing javascript embedded resource but intellisense doesn't show anything

I'm stuck... I'm trying to reference a javascript file that has been embedded inside a third party assembly, but it doesn't seem to work:
What I've done:
I have a folder RefAssemblies where this library DLL with embedded javascript file is located
I added a project reference and pointed to this library assembly
I added a line in my javascript file where I want the reference to work ie.
/// <reference name="ScriptName.js" assembly="AssemblyName" />
I tried naming my assembly with name only, and also with full assembly name including name, version, culture and public key token. No difference.
Added my library assembly to my project's web.config inside system.web\assemblies (AFAIK that's the part where you have to add your assembly and make it well-known in your application) so I should be able to access it without referencing assembly at all just resource name. No difference.
And yes I was pressing the Ctrl+Shift+J after any change I've done so Visual studio refreshed Javascript intellisense cache. I even unloaded and reloaded my web project after I changed web project's web.config. Just so that Visual Studio would read the file and reload everything anew.
But still unlucky... And I'm not getting any Javascript Intellisense errors in the General output window either...
I must be missing something...
Additional note:
It may be helpful to know that I'm running ReSharper 6.1.1000.82 within Visual Studio 10.0.40219.1
Other things I've done afterwards
Uninstalled ReSharper from my machine
Reset Visual Studio by running it from command prompt using
devenv /ResetSettings
No luck either.
Do you have any other suggestions I might do?
I'm also having odd problems with embedded resources. I have managed to get it working though by using the fully qualified resource name. You can find that out by using ilspy to open the assembly and then select the Resources folder, then the full name of all the resources will be displayed.
As i said i have gotten this to work in one solution, but in others it doesnt work and i have no idea why.. the non working solution has a diffrent structure where the diffrent assemblies are in diffrent folders, but i have nto been able to isolate that as the cause..
-edit-
After much trial and error it seems like the key thing to making embedded javascript references work is to set the output folder for the project containing the reference to bin and not bin\debug.
from what i can gather, there are no other settings or assembly references that affect the embedded resources, only the output folder of the project that has the reference. i'm guessing that the javascript language service is unable to find the assemblies with embedded resources unless they are in the private path or the gac, but i have yet do understand exactly where this binpath is set.
i've tried setting it on the project itself and on what i think is the actual language service exe, but to no avail.
i made a connect issue here:
https://connect.microsoft.com/VisualStudio/feedback/details/770185/js-references-to-embedded-files-require-the-referencing-project-to-have-outputpath-bin

Adding external javascript in JSF

I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.
Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>
First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere

Categories

Resources