Since a few days, the JS debugger in Firefox (68.0.1) doesn't open JS files correctly. Instead, some HTML is displayed. The JS files do not have a file extension at all, yet the Content-Type header correctly contains application/x-javascript. Other files with js extension do show up with a JS icon in front of them.
Is this a recent change? What can I do to make those files show up correctly in the debugger?
The application I use is built in XPages, so there might also be some setting there that used to create files with the .js extension, but I'm not sure of that.
ADDED
I can tell you that xcsDocument definitely is a JS file, and that Firefox has no problems using it. No JS errors displayed, no HTML errors, nothing significant on the Console tab.
I had the same problem a couple of days ago. Add the .js extension to your client-side javascript design element, and if need be, double-check the custom controls etc where the script is being used to verify the .js extension is there too.
Related
So I want to play with the source code of a page. In this particular example it seems like the webpage is an Angular app (that i dont own) with source maps to *.ts files. The main code seems to all be in a bundle.js.
I want to be able to add console.log() statements to this code and learn more about how this webpage works.
I have tried editing the .ts sources (this doesn't work although I expected that).
I try editing the bundle.js but its so big that it causes my dev tools to crash.
Does anyone know of a VS Code plugin (or something similar) that would let me open the sources locally on my machine, edit them and see the changes reflected on the website.
If not what is the best path forward for being able to edit the local js of this page.
Firefox allows you to add log statements into the code when you're using the Debugger/Sources tab. Just right click the line you care about and then choose Add log. I believe Chrome allows something similar.
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.
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!
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'.
I am looking for a simple commandline script/program to automatically "inline" all external css and javascript references for a html file. I basically want to create a single self-contained html file suitable for sending via E-Mail. An additional bonus would be if it could also inline images as data: UIRs, but that part is not so important.
EDIT : I wrote a little Python script for fun. It seems to work pretty well :
Inline2Mail
Or you can still try with :
Front compiler does something like that but it implies javascript. You have an online solution as well, with premailer. Finally you have a Python and a Ruby script to do it.
There is a Node.js library which solves exactly your problem: https://github.com/remy/inliner/ It can be used both as a commandline script and a library.
It will make you a single .html file which can be sent anywhere by any means and be opened later in any browser without the need in Internet connection.
If you think about inlining CSS and Javascript to make a HTML body of an email, just forget about it. Most Email clients out there will either ignore or badly damage your styles and I think all email clients will just plainly drop the inline Javascript in the body of emails.
This Python project of mine can help with getting the CSS styles inline https://github.com/rennat/pynliner
If it's not something that needs to be automated and you're using Windows you could open the web page in Internet Explorer and save it as 'Web Archive, single file (*.mht)'. This will pack everything into a single file, including CSS, JavaScript and images. Note that the recipients needs to have access to Internet Explorer to be able to open the Web Archive. Neither Google Chrome nor Firefox supports mht files, so it's probably a Microsoft only feature.