When I try to execute below JQuery code in Google Chrome's developer tools
$("#u_16_0").val("AJ College, Sivakasi")
am getting below error:
Uncaught Error: <[EX[["Tried to get element with id of \"%s\" but it
is not present on the page.","#u_16_0"]]]>(…)h # LGuPoDEwQGD.js:36i #
LGuPoDEwQGD.js:36(anonymous function) # VM580:1
Could somebody please help me to resolve this issue? I've verified that the element is present in the page. I mean if I just type $("#u_16_0") in the console, the element is printed.
Please see the below link to screenshot containing version information of my Google Chrome.
[
UPDATE - 1
I managed to accomplish this with the below plain javascript code
document.getElementById("u_16_0").value="University of Cambridge"
UPDATE - 2
Amin's answer based on jQuery also worked. Hence, accepted it as answer and awarded bounty.
Note: Do not expect $ is always JQuery.
The Chrome console does not appear to have access to the content script's execution context.
Wrong, it does. You need to look at the correct place:
Instead of <page context> below in the animation, you have to select chrome-extension://<your extension id>
You can click "top" below in your version of chrome.
The previous screencast shows that the Console tab of the Chrome developer tools has two dropdown boxes at the bottom, which can be used to change the execution environment for the developer tools' console.
The left side can be used to change the frame context (top frame, so iframe, ...), and the right side can be used to change the script context (page, content script, ...).
Reference: Why will jQuery not load in Facebook?
The problem is when you assume that $ is always jQuery and it is not. Simple way to see if it is to console.log($) and see what it returns.
jQuery usually returns
function (selector,context){return new jQuery.fn.init(selector,context)}
or
function (a,b){return new n.fn.init(a,b)}
Now anyone can define $ to be anything. On Facebook it appears to be an alias for document.getElementById() and has some checks in it
function i(j){return h(j);}
running $("contentCol") will return a DOM element.
And if $ is not defined, in Chrome Dev tools, it is an alias for document.querySelector
$(selector, [startNode]) { [Command Line API] }
so in the end, do not expect $ to be jQuery.
This is because of jQuery $ sign conflict with other libraries like some facebook js libraries.
you should use jQuery instead of $:
jQuery("#u_16_0").val("AJ College, Sivakasi");
From looking at this answer it looks as though your call to:
$("#u_16_0")
is not actually calling jQuery.
Try changing the page context
Related
On a webpage I have a "onclick" event in a <div> element. Right clicking it on Firefox and inspecting it brings up the dev console. At this point I see the function it is being called but I'm unable to lookup the code or the file that this function is pointing to, what am I missing?
The body of the javascript function can be found in respective .js library. In developer's tool, click the tab "Debugger". It lists all .js files which might contain the function you are looking for.
Just found the answer while trying, it seems I were using # rather than # which is used to lookup a function definition!
Have you tried firebug add on for Firefox?
I think it is clearer to see it with firebug. I'm sorry if it's not what you are looking for, because i can't suggest it on comment
I'm working on a Chrome extension that injects some scripts into Gmail, like jQuery and qtip. It worked without any problem until I added the Chrome extension LinkedIn Sales Navigator, which (I checked) is using jQuery too.
After adding it, I get this error:
TypeError: $(...).qtip is not a function(…)
And console.log($.qtip) returns undefined, while before adding this extension it was returning the function.
My flow to inject these scripts is:
In the manifest's "content_scripts" section I'm adding content.js.
In content.js file I'm using document.createElement("script") for each script and append it to the page's <head>.
I don't know what the problem is but I think it's an overwrite issue with jQuery but I'm not sure why nor how to solve it.
Thanks ahead for any help !
So, thanks to the comments I found out jQuery.noConflict(); existed, and have been able to check the availability of the wanted function and act accordingly :
if(!$.qtip)
jQuery.noConflict();
I've been trying to add the highlighting feature to the Firefox DevTools debugger, so it will highlight the element instead of only showing [HTMLAnchorElement] or similar. I know it's possible, since you can set someElement.style.border='1px solid blue' or similar as a watch, and it hightlights the element. So why not let it store current border, and show it on mouseover using element.style.border='1px solid blue', and restore it on mouseout?
While debugging in Firefox devtools, I noticed the element in the right watch panel has rows with the variable names, which are actually given odd ids like "46439", under parent element with "document.getelementsbytagname('a')36" id. What do these ids signify? Can they map a display element to its target element in the page? I tried window.DebuggerView.WatchExpressions.getItemForElement from Venkman but it returns null. Is there another function from this source file that will give the target element of debugger watch?
Ideally, I should be able to 'watch' items such as document.getElementsByTagName('a'), or local variable in the debug context, and highlight the items in the page like Chromium/Firebug. Yet I'm not sure how to add this feature from a Firefox extension.
Update:
After further work, it would seem to be possible to use the DebuggerView.StackFrames.evaluate to run code while stopped at a breakpoint, like what chrome://browser/content/devtools/debugger-controller.js is doing with watches. Unfortunately when stopped at a breakpoint I run this code, and DebuggerView.StackFrames.evaluate is [void] void in Venkman. Is this evaluate command hidden or private somehow, or not initialized?
You can't really use the highlighter from the Debugger directly yet. We have a bug open (https://bugzilla.mozilla.org/show_bug.cgi?id=653545) to make the highlighter more generally-available to our other tools.
If you have a unique selector, you can use the command line (Shift-F2 to open the Developer Toolbar) to inspect an element via:
inspect unique-selector
We intend to make DOM objects highlightable everywhere in upcoming versions of the Firefox Developer Tools.
edit - This feature has been landed and now works from the Variables View and the Console. Landed in March of 2014 in Firefox 30.
https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/
I think you are putting too much efforts in inbuilt debugger,
to debug javascript you must use fireBug its best tool,
This Link is for the addon of firebug, download and install the add-on its hardly 2 MB and then you will enjoy debugging.. :)
Edit: Selector in Debugger
I was searching answer for your specific question, and found out this
Web Console Method
Now here you are able to debug, get element and get selector details too..
(Refer Basic Usage)
You can directly access variables defined on the page:
> $ function(selector, context){
return new jQuery.fn.init(selector,context);
}
please refer the above link for more details..
If native console is not available refer this link, this says,
Under Microsoft Windows you additionally need to start Firefox via the following command to have a native console :
firefox.exe -console
so that will enable firefox to start with console..
Edit: Log
To log the element tested>> refere this link in that refer pprint() that will also behave in the same way.
Also Console API there refer console.log
I hope this will help..
I'm loading files using a require function inside my code, which adds a <script/> tag to the body of the page with the relevant attributes.
The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.
What am I doing wrong?
My require function looks like so:
require: function (moduleId) {
var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
var script = $('<script></script>').attr({
'src': filename,
'type': 'text/javascript'
}).appendTo('#Scripts');
}
This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :
http://jsfiddle.net/Tgax4/
There are two possible solutions to your problem :
Chrome is not up to date on your workstation. Update it.
You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.
In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.
Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?
Using it I never had problems debugging in dynamically loaded scripts.
EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.
Could you try replacing
$('<script></script>')
with
$('<script>')
Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.
And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.
I want to figure out how a website reloads it's content using AJAX. Therefore i would like to see what JS functions are called in real time because I can't figure out what function is responsible for reloading the page dynamically. How to see all executed functions JS in real time in FF, Chrome, Opera or IE?
Maybe using the 'profile' button in the firebug console tab can give you an indication of the function(s) that are fired. Furthermore you can tell firebug's console to show xmlhttp requests (expand 'console' at the top of the firebug screen. After that, If an ajax request fires, it should be visible in the console. In the 'post' tab in such a request you may be able to infer the function triggering the request, looking at the parameters.
I think what you want is a feature in Chrome:
find the element that is being reloaded and right click,
choose inspect from context menu,
then right click the html of the element (in the bottom firebugish pane),
in the context menu there are options to:
break on subtree modifications
break on attributes modifications
break on node removal
in your case maybe set "break on subtree modifications" on the body tag would do it?
Article on awesome new dev features in chrome: http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html
Install firebug in FF. Visit this link: http://getfirebug.com/
I would do a big search and replace on all the file using a regular expression that matches the function names (something like "function (.*)\((.*)\){") and use that to insert a console.log(functionName) at the beginning the function.
So you search for function (.*)\(.*\){ and replace it with function \1 (\2){ console.log("\1"); (Note: Regular expressions are most likely wrong as I didn't check them - you'll need some testing to get it right).
It seems a bit crazy but it should work. I've used that method to debug a Director Lingo project.
Obviously, make sure you backup the whole project before doing the replacement.
Following on the answer given in case you have access to the source code. With this regular expression you can do a console.log of all function calls:
search for:
function (.*){
replace with:
function \1 { console.log\(("\1")\);
I often using Firefox add-on JavaScript Deobfuscator
https://addons.mozilla.org/en-us/firefox/addon/javascript-deobfuscator/