I am attempting to locate where a particular class/function/object is defined on a site with many javascripts being rendered. Manually sifting through the scripts has proven to be very time consuming in the 'Scripts' panel of Firebug.
Before I continue going that route, is there an easier way using modern front-end development tools to locate where certain things are defined? Would be great if I had some kind of ctags type functionality that vim provides, but any other approach would be great.
Chrome has Find in all Sources:
CTRL-SHIFT-F on Windows and CMD-OPT-F on Mac.
Edit:
You can also use CMD-SHIFT-O (mac) CTRL-SHIFT-O (windows/linux) in chrome to find functions by name.
AFAIK none of the standard dev tools (Chrome Debugger, Firebug, etc.) offer this functionality. You can sort of get it by typing the object's name in the Chrome debugger, but that will just show you something like "Backbone.View.extend.extend.constructor". In other words, it shows you the root-most constructor, which is fine if all your classes are exactly one level deep. If not though, for instance if A is a subclass of B and B is a subclass of C, knowing that your object "a" comes from C doesn't really help much.
Furthermore, even if it is what you want, Chrome won't tell you where to find the constructor, just its name. Personally I solve this by giving all my objects a _type property (or attribute, for the ones that are Backbone models). This way I can simply type myObject._type (or myObject.get('_type') for the models) and know what kind of object I have. And since I give every object type a unique name, all it takes to find the cunstructor is grep for that name.
Related
The .net framework has the very useful Debugger Display Attribute which allows you to specify how a class or field is displayed in the debugger variable windows.
Is there an equivalent of this (which would work in chrome dev tools), which I can use on my JS objects?
There is Custom Object Formatters but it is in preview only and it seems to be hard to use.
You seems to be better of adding some getter property that you can expand when needed
By the way do you know that for an unexpanded object the five properties that are shown are those that was first assigned to the object?
I am creating some helpers scripts in my web app, which I run from the console, to output some information about the current state (e.g. JSON.stringify of objects). For example, I define the temporal window.Foo method, I open the Chrome Console, and run Foo(). It would be great if I could use the Console method copy, which copies some value to the clipboard.
I've checked that if I define a function that uses copy inside the Chrome console, it works, but as expected, if I define it in a regular JavaScript file, it doesn't. Do you have any clue how can I access this method through an API or something (if it is even possible)? Any possible workaround to copy info from a script to the clipboard without having to type copy?
The fastest solution is to wrap the script with copy (e.g. copy(Foo())), but that means extra typing... I was wondering if it could be done faster.
Thanks
I'm not sure, if you mean exactly this, but maybe it could helps you- look in the sources tab :) There you can see all loaded scripts (and also make breakpoints, etc.)
I've set up a simple testbed for WatiN (ver 2.1) which reads:
var browser = new IE();
browser.GoTo("http://www.google.co.il"); // webpage doesn't matter really
browser.RunScript("alert(123)");
This works only if KB3025390 is not installed. Installing it breaks the above test with an UnAuthorizedAccessException which has HRESULT set to E_ACCESSDENIED. What gives? Is there any workaround?
Update: Using IWebBrowser2.Navigate2 along with "javascript:console.log(123)" type of scripts works however
it makes me feel uneasy using such a backchannel
the scripts run through this back-channel of .Navigate2() may only have a max length of about 2070 chars (give or take) otherwise they get forcibly truncated to this length leading to javascript errors upon attempting to run them
using .Navigate2(), even with the most trivial script, will clog the ready state of Internet Explorer for good in the sense that it will be set to READYSTATE_LOADING without any hope of getting rid of it. In simple terms this means that once you use this hack, you either have to perform every single subsequent operation in WatiN in a "dont-wait-for-webpage-to-load" fashion (GoToNoWait, ClickNoWait etc) lest your code freezes upon waiting for the browser to turn back to READYSTATE_COMPLETE (which will never come about ofcourse as already mentioned).
there appears to be a much broader issue here in the sense that I can't even access the properties of an IHtmlWindow2 object p.e. window.document throws an unauthorized exception again making it virtually impossible to transfer over to the C# world the return-values of the scripts I'm running (using Expando etc) for documents other than window.top.document (for the window.top.document window there is IWebBrowser2.Document which does the trick)
Update#2: The folks over at the selenium project have also noticed this issue:
https://code.google.com/p/selenium/issues/detail?id=8302
A bug report has been created as well:
https://connect.microsoft.com/IE/feedback/details/1062093/installation-of-kb3025390-breaks-out-of-process-javascript-execution-in-ie11
Update#3: IHTMLWindow2.setInterval and IHTMLWindow2.setTimeout also throw UnauthorizedAccess exceptions. These methods are not marked as deprecated in:
http://msdn.microsoft.com/ko-kr/library/windows/desktop/aa741505%28v=vs.85%29.aspx
yet they have wounded up suffering from the same cutbacks all the same.
Update#4: I gave the approach recommended in this post a shot:
https://stackoverflow.com/a/18546866/863651
In order to dynamically invoke the "eval" method of the IHTMLWindow2 object (or any other method really). Got the same "System.UnauthorizedAccessException" as above. So no joy here either.
Microsoft recommends using "eval" over "execscript" however after the above experiment I suspect that they are refering to accessing "eval" only from within the browser.
As far as I can tell thus far, when it comes to the full-fledged IE11+ using "eval" out-of-process (via COM) appears to have been completely prohibited along with any other function-invocation of the window object, the only exception being the back-channel of the .Navigate2() mentioned above.
It turns out Microsoft eventually backpedaled on its decision to kill off .execScript at COM-level. Just install the latest updates for Windows including kb3025390: One of the updates for IE that came after kb3025390 brings back .execScript functionality at COM-level
Note, however, that .execScript is not accessible through IE's javascript anymore. In that context it's gone for good.
fyi: this one is also not working
ieInstance.Document.Script.<methodNameString>(<commaSeperatedParameterString>)
try this worked for me at some places but not all places
ieObject.Navigate "javascript:<methodNameString>(<commaSeperatedParameterString>)", Null, "_parent"
or
ieObject.Navigate2 "javascript:"<methodNameString>(<commaSeperatedParameterString>)", Null, "_parent"
now trying to find out solution using eval
I have found a way around the problem of an update installing automatically. You can just create a simple batch file with following content.
{code}
#echo off
wusa /uninstall /kb:3025390/quiet /norestart
END
{code}
Then go to task scheduler, create a new task for this batch file to run every one hour or day as per your requirements. Add it as a system task so it runs in the background and does not affect the running automations.
When I log an object in a browser console, I can expand/collapse keys which have 'large' (to display) values, eg, a key whose value is another object.
I'd like to be able to do the same for node. Eg, say I:
console.log(request)
...in an express app. Express 'request' items are large, and will easily scroll right off the screen. Being able to expand/collapse larger items would be super useful.
Is there an collapsing/expanding console for node.js?
I've used interactive console apps (top, etc), and for me a REPL falls into that category. ;)
Here is a much improved REPL: https://github.com/Benvie/Node.js-Ultra-REPL
I don't think it allows you to collapse parts of an object, but this is in the works:
GUI-like interface with collapsable object views
It does provide Toggling hiddens and builtins at least.
node-inspector might be useful to you; it's not exactly what you seem to want, but it's capable of providing the information you're looking for.
Maybe you can log the object in the browser side console in which you can check property easily. bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.
I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.