I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?
In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.
Looks like you're looking for Visual Event.
You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.
If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()
You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.
If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.
Related
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 am having an issue where all link button controls on my page do not work once we deploy our website to our production server. Here are a few details:
We have 3 environments upon which we develop: Our local Machine, which uses local IIS7 to run for development; test environment which is an actual webserver behind our firewall(IIS6); Production which is our live webserver(IIS6). The website works fine on local machines and test server but once we click a link button on production server it hangs.
The problem does not exist in Chrome, or FireFox it only exists in IE9. It does not exist when you put IE9 in compatibility mode.
If I use the IE9 Developer tool bar and watch the scripts, as soon as you click one of the link buttons the console shows this error:
SCRIPT28: Out of stack space
, line 340 character 9
I am using quite a bit of JQuery and am wondering if this is causing an issue: However, I see no javascript errors.
Any thoughts?
Thanks for any suggestions.
As people said in comments: it means that infinite recursion takes place. Whether it is simple recursion or some devious path across code like a serpent biting its tail - unknown, it seems IE gives out no stacktrace, or does?
I've reproduced this issue when I'm doing the following code:
HTML
<span class="search-icon"><input title="search" type="submit" value=""></span>
JS
(function($) {
$('.search-icon').on('click', function(e) {
// The click event will call $('.search-icon').on('click', function(e) { .. } for every time
// which make an infinte loop in click event as long as there are no stop condition added here.
$(this).find('input').click();
});
})(jQuery);
I've solve this problem by changing my JS code to be:
(function($) {
$('.search-icon').on('click', function(e) {
$(this).closest('form').submit();
});
})(jQuery);
I hope this answer will be helpfull for you.
Can you post the code / a link to the code, or close this issue?
Common problems: you might have a closure problem in the html, thus different browsers interpret the html hierarchy differently, or you might be looping through a for(x in y) where x contains a backreference to y.
Check out the msdn page for info on this error. In my case, the error was caused by:
Your code triggered an event cascade.
An event cascade is caused by triggering an event that calls an event procedure that's already on the stack. ...
Basically, I was trying to trigger a click event (using jQuery) on a file upload control using the control's click event. Seems like it would cause infinite recursion. Perhaps you may be having a similar problems with your buttons.
Is there any tool or addon which can be used for testing or identifying Javascript functions in real time (i.e. on click or some events )..
e.g. on a website, I want to know after clicking on a link, which all JS functions are being called/executed..I know sometimes it is stragightforward from the code, but in case it uses JS libraries like jQuery, the actual function call is made from otside..
How can I do that?
*I'll really appreciate if, alongwith the addon, you just write a short description as to where can I find the Javascript finction tracking in that **
Thank you.
Try Firebug. It's one of the most useful firefox addons. Grab it here:
http://getfirebug.com/
Dragonfly (Opera), or Firebug extension for Firefox, or any other good javascript debugger
See Visual Event. It is a bookmarklet that overlays element event handler information.
FireQuery is available as a firefox plugin which adds handler information inside of firebug.
Firebug includes a JavaScript profiler. Give it a try.
http://getfirebug.com/javascript
In Chrome, right click the page and choose Inspect element, go to the console, start javascripting! Choose the scripts tag to get debugger functionality.
Does anyone know of a DOM inspector javascript library or plugin?
I want to use this code inside a website I am creating, I searched a lot but didn't find what I wanted except this one: http://slayeroffice.com/tools/modi/v2.0/modi_help.html
UPDATE:
Seems that no one understood my question :( I want to find an example or plug-in which let me implement DOM inspector. I don't want a tool to inspect DOMs with; I want to write my own.
I am also looking for the same thing, and in addition to http://slayeroffice.com/tools/modi/v2.0/modi_help.html i found: http://www.selectorgadget.com/ ( https://github.com/iterationlabs/selectorgadget/ )
Also came across this https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector
Unfortunately I haven't found anything based on jQuery. But "Javascript DOM Inspector" seems to be the right keywords to look for this kind of thing.
How about Firebug Lite - it's like Firebug but you insert it into your page and so you can debug your html, css, Javascript and the DOM on most browsers (including non-FF ones)
Aardvark is a firefox extension officially but you can use that as a javascript library, too. The inline demo in the said website is implemented using javascript. digg into the code & you'll find loader.js which is bootstrapping the Aardvark modules.
I found this one:
http://userscripts.org/scripts/review/3006
And this one also is fine:
DOM Mouse-Over Element Selection and Isolation
Which is very simple with few lines of code and give me something good to edit a little and get exactly what i wanted.
Very recently, I needed to develop an application using JavaScript : when any user click on an image of this site, it will send image URL to a specific location. Here is the article that helped me achieve that : AspBoss - Javascript Library for Dom Inspector
And this is the code :
// DOM Inspector
// version 0.1
// 2006-01-25
// Copyright (c) 2006, Onur Mat
//
// --------------------------------------------------------------------
//
// This user script allows you to interact with elements of a web page
// by moving mouse pointer on a web page and clicking on selected elements.
//
// To install for Firefox, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To install for Internet Explorer, you need Turnabout:
// http://www.reifysoft.com/turnabout.php
// See instructions for using Turnabout here:
// http://www.reifysoft.com/turnabout.php
//
// --------------------------------------------------------------------
//
// ==UserScript==
// #name DOM Inspector
// #namespace http://www.dominspector.com/
// #description Inspect DHTML DOM elements interactively
// #include *
// ==/UserScript==
function DIOnMouseOver(evt)
{
element = evt.target; // not IE
// set the border around the element
element.style.borderWidth = '2px';
element.style.borderStyle = 'solid';
element.style.borderColor = '#f00';
}
function DIOnMouseOut(evt)
{
evt.target.style.borderStyle = 'none';
}
function DIOnClick(evt)
{
var selection = evt.target.innerHTML;
alert('Element is: ' + evt.target.toString() + '\n\nSelection is:\n\n' + selection);
return false;
}
document.addEventListener("mouseover", DIOnMouseOver, true);
document.addEventListener("mouseout", DIOnMouseOut, true);
document.addEventListener("click", DIOnClick, true);
Firebug is a good solution for Firefox. You can browse a page's HTML, JavaScript, DOM, network activity, etc. Safari also has fairly good tools built-in (I'm using the Safari 4 beta at present), though I find it's easier to navigate around Firebug.
Yes, there are plenty. For example, Firefox has DOM Inspector, Firebug, and X-Ray. I think Firebug is the best of the three, personally.
Developer Tools on IE8
Try Backbase Debugger Application. It also has an I/O inspector.
I used to use Firebug, and Firefox all the time, now thanks to IE8, which has really cool tool called Developer tools --- that allows to see all the Javascript, CSS and also allows to really cool debugging feature. MICROSOFT is getting there !
A coworker recommended me this one: Web X-Ray Goggles https://secure.toolness.com/webxray/
Last week we released Omniture's analytics code onto a large volume of web sites after tinkering and testing for the last week or so.
On almost all of our site templates, it works just fine. In a few scattered, unpredictable situations, there is a crippling, browser-crashing experience that may turn away some users.
We're not able to see a relationship between the crashing templates at this time, and while there are many ways to troubleshoot, the one that's confuddling us is related to event listeners.
The sites crash when any anchor on these templates is clicked. There isn't any inline JS, and while we firebug'ed our way through the attributes of the HTML, we couldn't find a discernable loop or issue that would cause this. (while we troubleshoot, you can experience this for yourself here [warning! clicking any link in the page will cause your browser to crash!])
How do you determine if an object has a listener or not? How do you determine what will fire when event is triggered?
FYI, I'd love to set breakpoints, but
between Omnitures miserably obfuscated code and repeated browser
crashes, I'd like to research more
thoroughly how I can approach this.
I did an "inspect element" on a link in that page with firebug, and in the DOM tab it says there is an onclick function (anonymous), and also some other function called "s_onclick_0".
I coaxed firebug placing a watch like
alert(document.links[0].onclick)
to alert me the onclick function that omniture (i guess) attaches to links:
function anonymous(e) {
var s = s_c_il[0], b = s.eh(this, "onclick");
s.lnk = s.co(this);
s.t();
s.lnk = 0;
if (b) {
return this[b](e);
}
return true;
}
Maybe in the same way you can see what it is really running after all that obfuscation.
DOM doesn't provide any means to introspecting through the events listeners' collections associated with a node.
The only situation where listener can be identified is when it was added through setting a property or an attribute on the element - check on onxxx property or attribute.
There have been a talk recently on WebAPI group at W3 on whether to add this functionality. Specialists seem to be against that. I share their arguments.
A set of recommendations to the implementers of on-page analytics:
Use document-level event capturing only, this is in almost every case (besides change/submit events) sufficient
Do not execute computation-intensive code (as well as any IO operations) in the handlers, rather postpone execution with a timeout
If this two simple rules are taken into account, I bet your browser will survive
I have some experience with Omniture and looking at your s_code.js, you have several things going on in the "Link Tracking" area, for example:
/* Link Tracking Config */
s.trackDownloadLinks=true
s.trackExternalLinks=true
s.trackInlineStats=true
s.linkDownloadFileTypes="exe,zip,wav,mp3,mov,mpg,avi,wmv,pdf,doc,docx,xls,xlsx,ppt,pptx"
s.linkInternalFilters="javascript:,gatehousemedia.com"
s.linkLeaveQueryString=false
s.linkTrackVars="None"
s.linkTrackEvents="None"
I would consult with the people at Omniture and verify that your link tracking configuration is set up correctly.
Specifically, this template and the links inside seem to belong to morningsun.net and yet morningsun.net is not in the s.linkInternalFilters setting. If you are using the same s_code.js file for multiple domains, you can use javascript to set the configuration values for things like this (basing on the document.location.hostname for instance).
I don't personally have experience with the link tracking configuration or I would give you more detail on how to configure it :)
While traveling home I came to a solution that allows for introspection of event handlers on element added with AddEventListener. Run code before the inclusion of your analytics code. The code was not verified if works, but the idea, I guess is clear. It won't work in IE, however you can apply similar technique (of rewriting the API member) there as well.
(function(){
var fAddEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function() {
if (!this._listeners)
this._listeners = [];
this._listeners.push(arguments);
fAddEventListener.apply(this, arguments);
}
})();