Running jQuery call in Firebug Console - javascript

Sorry, new to Firebug. I really find being able to run javascript in the Firebug console window helpful. However, I don't seem to be able to run jQuery calls in the console. For example, in my executing javascript in my page, I may make the call to get a value:
jQuery('#an_element_value').text()
However, I cannot execute this in the console. In order to retrieve this value from the page in the console I have to execute:
document.getElementById('an_element_value').innerHTML
Is there a way to execute jQuery calls and reference page elements through jQuery in the Firebug console?

Like others have said, it wont work unless you have jquery included on the page. However, you can easily include jQuery on any page with this bookmarklet: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet

Just put this before your code in firebug console:
include("jquery");
more...

Related

How to find which javascript code fired ajax?

Is there any quick way to find out which javascript code (file name and exact line) fired a particular ajax call?
Using firebug i can locate the ajax call but finding out the exact line quickly will help to debug
Thanks in advance for any help
In Firebug you can either click the source link in the Console panel:
or set a breakpoint in the Net panel:
If you put a breakpoint in your code at the point of this ajax call, the debugger will show you the stack of function calls.
See this from Chrome developer tools documentation :
I don't really know any clean method (maybe there exists one). But I have a little hack to propose.
If you are not using Prototype.js in your webpage, enter these commands in the command line (with Firebug 1.11):
window.old$ = $; // in case you're using a framework like jQuery
include("https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"); // loads Prototype
The console should print: prototype.js properly included.
Then, to restore your old "$" variable, type:
window.$ = window.old$;
Now that Prototype is loaded, we can wrap the XMLHttpRequest.prototype.open function, so we can get the call stack (just like suggested dystroy):
XMLHttpRequest.prototype.open = XMLHttpRequest.prototype.open.wrap(function(orig, ...args)
{
console.log("trace for :"+args[1]); // prints the URL of the request
console.trace(); // prints the stack trace
orig.apply(null, args); // call the original function
});
And that's it.
N.B.: if the request is launched at start:
in the Script panel, set a breakpoint on the first JS instruction of your webpage
execute the commands above in the Console panel
go back to the Script panel, and click on continue
what I usually do is adding a bunch of:
console.log("message that explains where in the code I am now...");
but pay attention, because console.log can create problems with older version of IE, you have to remove all console.log calls when you go in production.

ROR and JS debugging

I've just read through some tutorials on using ajax with rails. Below you can see a JS script extracted from one of them with some modifications which I expected to cause some errors and write some text somewhere. (public/javascripts/application.js)
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
fdafdasfewa
document.write("Welcome to my world!!!");
echo "------------------";
});
In fact the script still works with no side effects.
Where does document.write and echo put text?
How can I debug such a script when I can't even see its output? Well sometimes probably I'll not even be able to determine if ran or not.
Try putting in an alert to make sure your code is being reached
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
alert('reached this point');
...
Also, use Firebug or Chrome's development tools. In Chrome on the mac the shortcut is command-alt-i to bring up the dev tools, then click 'console' to bring up...the console.
In the console you can type
$('.submittable')
To make sure your js has a dom element to attach to. If $('.submittable') returns nothing then there's no dom element selected. You can even set breakpoints and step through them in the dev tools. To create a break point just do
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
debugger;
...
and the dev tools will take over when that line is reached.
My guess is when you called the $(this).parents('form:first').submit() the page posted the form and javascript didn't execute past that point, which is why it didn't throw any errors of or write anything to the document.
I would use console.log to write test output in combination with the developer tools in chrome or Firebug. That way you know to look in the console and you can also use things like breakpoints to watch the execution of the javascript.

'$ is not defined' in code following jQuery include

I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").

Javascript eval results in "undefined function" but works in Firebug

I'm wondering why when I call: eval("myFunc(1,2,3)") in the Firebug console on a rendered page, the function executes properly, but when I call the same eval within by javascript within then page, I get a " is not defined" error that pops up in the Firebug console. Part of my problem is that I don't have control over the incoming HTML/JS and I can't seem to find where the function is defined. So I guess my questions are, why am I getting that error and how can I find where the function I'm trying to call is defined? If I pull up the page source, I can see calls to the function but I don't see where it is defined.
If you view the source you should be able to see any JS in the source code and any attached js files too - you should be able to download them and open them in your editor then do a find.
The function is probably defined in an external file. In firebug, if you just type out myFunc (without paranthesis) you should be able to get a clickable link to the source.
The reason it's not working in your eval-script, is probably that it's being executed before the function is defined. Try defering it by, say, putting it in a page load or domready event listener.

How to help the debugger see my javascript, or how to best refactor my script to help make it debugger-friendly?

I have an ASP.NET MVC project that uses some simple AJAX functionality through jQuery's $.get method like so:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
});
The amount of content is relatively low here -- usually a single div with a short blurb of text. Sometimes, however, I am also injecting some javascript into the page. At some point when I dynamically include script into content that was itself dynamically added to the page, the script still runs, but it ceases to be available to the debugger. In VS2008, any breakpoints are ignored, and when I use the "debugger" statement, I get a messagebox saying that "no source code is available at this location." This fails both for the VS2008 debugger and the Firebug debugger in Firefox. I have tried both including the script inline in my dynamic content and also referencing a separate js file from this dynamic content -- both ways seemed to result in script that's unavailable to the debugger.
So, my question is twofold:
Is there any way to help the debugger recognize the existence of this script?
If not, what's the best way to include scripts that are used infrequently and in dynamically generated content in a way that is accessible to the debuggers?
I can not comment yet, but I can maybe help answer. As qwerty said, firefox console can be the way to go. I'd recommend going full bar and getting firebug. It hasn't ever missed code in my 3 years using it.
You could also change the way the injected javascript is added and see if that effects the debugger you're using. (I take it you're using Microsoft's IDE?).
In any case, I find the best way to inject javascript for IE is to put it as an appendChild in the head. In the case that isn't viable, the eval function (I hate using it as much as you do) can be used. Here is my AJAX IE fixer code I use. I use it for safari too since it has similar behavior. If you need that too just change the browser condition check (document.all for IE, Safari is navigator.userAgent.toLowerCase() == 'safari';).
function execajaxscripts(obj){
if(document.all){
var scripts = obj.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
eval(scripts[i].innerHTML);
}
}
}
I've never used jquery, I preferred prototype then dojo but... I take it that it would look something like this:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
execajaxscripts(result);
});
The one problem is, eval debug errors may not be caught since it creates another instance of the interpreter. But it is worth trying.. and otherwise. Use a different debugger :D
This might be a long shot, but I don't have access to IE right now to test.
Try naming the anonymous function, e.g.:
$.get(myUrl, null, function anon_temp1(result) {
$('#myselector').html(result);
});
I'm surprised firebug is not catching the 'debugger' statement. I've never had any problems no matter how complicated the JS including method was
If this is javascript embedded within dynmically generated HTML, I can see where that might be a problem since the debugger would not see it in the initial load. I am surprised that you could put it into a seperate .js file and the debugger still failed to see the function.
It seems you could define a function in a seperate static file, nominally "get_and_show" (or whatever, possibly nested in a namespace of sorts) with a parameter of myUrl, and then call the function from the HTML. Why won't that trip the breakpoint (did you try something like this -- the question is unclear as to whether the reference to the .js in the dynamic HTML was just a func call, or the actual script/load reference as well)? Be sure to first load the external script file from a "hard coded" reference in the HTML file? (view source on roboprogs.com/index.html -- loads .js files, then runs a text insertion func)
We use firebug for debug javascript, profile requests, throw logs, etc.
You can download from http://getfirebug.com/
If firebug don't show your javascript source, post some url to test your example case.
I hope I've been of any help!
If you add // # sourceURL=foo.js to the end of the script that you're injecting then it should show up in the list of scripts in firebug and webkit inspector.
jQuery could be patched to do this automatically, but the ticket was rejected.
Here's a related question: Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

Categories