From the chrome developer tool or firebug, is there a way to find out which html or jsp file included my jquery library file?
Right now, there are multiple versions of jquery being included. I want to find out a particular version which was included from where, and i want to find it out from browser.
I could not find the details from the network tab.
If you want to check jQuery version, then according to this article, you will get jquery version.
this property contains version of jquery jQuery.fn.jquery
But if you want to find from which file it gets included, then you have to go through source tab of chrome developer tools or similar from other browsers.
shortcut ctrl+U will show you source of your file, from that you will understand from which file it running.
Related
I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.
My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.
I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.
I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.
As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.
The map file itself works in Internet Explorer, but I can't really see myself developing with that.
Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?
I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk.com/TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.
It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.
For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).
Just open devTools and reset the browser.
Make sure your Angular app is up.
If your Angular app is not up, then you can't see the .ts file in Chrome. So you need to first run the Angular app.
I am using JavaScript, JQuery and JSTree in a project. I would love to use Firefox Scratchpad to incrementally develop this project. Unfortunately, Scratchpad does not sense jstree.js.
Please suggest me how to integrate other jquery libraries into Scratchpad. Or is there any alternative to Scratchpad which can do this.
Edit: I had two files, one index.html which has all the html code and I am importing jquery and jstree in this file. Another file index.js which has all js, jquery and jstree code.
Now I know the problem could be that it needs to be served from a Tomcat server and that is Scratchpad is giving me that error. I forgot to add that error to this question, here it is:
/*
Exception: SyntaxError: '[object HTMLDocument]' is not a valid selector
#resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/utils/webconsole-utils.js:670:0
*/
I added this to Tomcat and Firefox Scratchpad is firing all well.
Thanks for your advice.
thanks and regards
BB23850
I think scratchpad is for testing/manipulating existing sites you are on an opened browser. This means the site itself needs to be served from your place that you control and add there the files/libraries you need.
If you want to build your own online, you can use Mozilla Thimble or jsfiddle, jsbin, codepen and others.
I try to debug a javascript function called from Generate Thumbnails plugin in Wordpress. The function uses jquery. So the actual call that I want to debug occurs in jquery.
The problem is that default jquery.js inside Wordpress is minimized and therefore obscure. I changed that file with the uncompressed version of jquery.js file in wp-includes\js\jquery.
But when I debug that function with Firebug's debugger, Firebug still shows me the old, minimized version of jquery:
I copied the location of the script file shown in Firebug and opened it in browser: http://localhost/wordpress/wp-admin/load-scripts.php?c=1&load=jquery,utils,jquery-ui-core,jquery-ui-widget&ver=368b0ffbc13bc55b5ae45ad40a5368d9
This time, the true, uncompressed version of jquery.js was opened.
It seems like Firebug opens the old version of jquery. I restarted the Firefox but it wasn't resolved.
What might be the reason of this problem? Is this Firebug related or Wordpress related?
I'd agree with the people who commented on your question - it seems like a browser cache problem.
If it's a test system, one thing I'd suggest is setting the WP_DEBUG constant to true in your wp-config. That'll download the uncompressed versions of the javascript libraries. That has two advantages:
You don't have to copy different javascript files around, and
The file names differ from the standard ones (they have .dev in them, from memory), so you shouldn't hit any caching issues.
I'm assuming there's an uncompressed version of jquery in WordPress. Apologies if there isn't; I haven't checked. But in general I'd recommend this approach.
See Debugging in WordPress in the codex for more information.
I'm using NetBeans for PHP.
When I edit a .js file, it gives me javascript code completion.
How can I get it to also give me jQuery code completion?
First go to Tools -> Options -> Miscellaneous and click on the Javascript tab,
make sure the targeted browsers are configured properly, code completion changes by the minimal version of the targeted browsers to make sure that the functionality is supported.
You also need to add the jquery js file to your project so netbeans would be able to parse it and to properly add code completion.
These answers are misleading because jQuery no longer self-documents using "scriptdoc." Version 1.1.4 was the last to have this. Anything newer than that (>=1.2 ~mid-2007) is gutted.
amending that: VSdocs actually work:
http://code.jquery.com/jquery-1.4.1-vsdoc.js
or http://www.asp.net/ajaxlibrary/cdn.ashx for version after 1.4.1
i suspect using a non-minified version of jquery would help.
For Netbeans 6.7 / 6.8 / 6.9, just follow the guide here:
Using jQuery to Enhance the Appearance and Usability of a Web Page
There's a section about half way down called "NetBeans Code Completion and API Support".
Worked no problem for me.
Note: "Choose the uncompressed version, i.e., 'Development', before downloading the jQuery library. Using the uncompressed version will allow you to examine the JavaScript code in the editor, and aid in any debugging processes."
Tip: Tools / Options / Miscellaneous / JavaScript. In the "Targeted Browsers" section, ensure IE is "6 or later". Otherwise, you'll get "Not supported" errors in the code completion pop-up and a lot of the commands will be struck out.
I use netbians 7.x for development on drupal 6.x. Autocomplete works after adding non-minified version jquery-1.2.6.js file to the root folder of the project (so it will be with any version).
It is important to specify the version of the file name, without -1.2.6 will not work!
The basic rule is that your jQuery (or for that matter any js lib) should be found in the same project you need auto complete to work. So just place jquery-1.x.y.js somewhere in your project (that can be reached by NetBeans as it reaches your js file) and you should be good to go.
To test you can put the jQuery file in the same folder as your js file being edited.
Make sure your Internet connection is working, because NetBeans downloads documentation when is needed. I think that NetBeans downloads it from there, but this is only my assumption. This is parsing friendly XML document with whole and recent jQuery documentation.
I am looking into methods to inject javascript into any webpage loaded in the browser, so that I can traverse through the page's DOM. I use JQUERY for my scripting needs.
Method should work in all browsers.
I tried using IFRAME and adding some html into it, but I cant. Please suggest some ways.
Try using Greasemonkey: http://www.greasespot.net/. You can use it to execute custom scripts on page load for any website you want. You can find some basic tutorials here: http://wiki.greasespot.net/Tutorials.
I suggest to create a page with two iframes one to navigate to the designated website and other to get DOM Objects.
in the first one navigate to the site and then select its HTML and
append it in the body of the second Iframe.
iframe2.contentWindow.document.body.innerHTML = iframe1.contentWindow.document.body.innerHTML
then traverse the DOM Objects inside the second Iframe with your custom functions
There are a couple of approaches to solve this problem.
Using BookMarklet
You can create a simple bookmarklet which injects jQuery on the page and you can open Dev Console in your favorite browser and try out your DOM inspection using jQuery or whatever you want to try out.
Use Requestly Chrome Extension
You can use Requestly Script Rule to insert scripts on any webpage. Since your post mentions that you need jQuery, Requestly provides an option to include jQuery as well.
So with a simple click, you can write jQuery supported code without worrying about how jQuery will come in the page. Check these screenshots for reference :-
Script Rule Selection
Sample Script Supported by jQuery
Advantages
A Couple of advantages with using Requestly
You can share the script with other Users using the Requestly Share feature
jQuery is by default supported
After creating the rule, you can simply disable it once you are not using it.
Requestly is available on Firefox as well as Chrome so you can run your script cross-browser.
PS: This may be an older post but answering here because the question is still relevant.
Disclaimer: I am the founder of Requestly So you blame me if you don't like something.
You could create a bookmarklet (see http://en.wikipedia.org/wiki/Bookmarklet) which in turn can add a node to the page, with the src pointing to where your own javascript is located. Onde the script node gets added it will run.
You can find more details on http://www.johnvey.com/features/deliciousdirector/ under "how does it work?". This way you can have a bookmark in your bookmarks bar which, when click, will add your script to any page you happen to be on.
I'm using for Chrome TamperMonkey to add custom scripts for a specific web page which is as well awesome and I can really recommend it.
If I understand correctly, you want to execute a javascript code in any websites you are using in any browser. That means you have to go browser by browser different applications. In chrome supports extension same as firefox, edge, safari browsers supports add-ons. You can add the relevant extension to do that. I am using a scripting extension, that can run the given script whenever I open the page with same URL given in the script. Likewise you have to find different applications for different browsers.
You can't run Javascript on arbitrary Web pages that you do not control the content of. It would be a huge security hole if that were not true.
Think about it: you could run Javascript and wait for someone to log on to their internet banking and then do something with the characters input.
Take a look at jquery JSON and Wikipedia's JSON page.
Alternatively you can simply add a <script> tag to the document:
$("head").append('<script src="..." type="text/javascript"></script>');
This will load the javascript file.