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.)
Related
Very often I hack and play with the JavaScript code on some website. Many times JavaScript code is secured in a function:
(function(){
var = ...
...
}());
and I cannot access the object defined in that scope.
Moreover such code is only executed once, when the page loads, thus modifying it with the chromium/google-chrome developer console (Sources toool) is useless.
Is there any simple way to live-edit some JavaScript code in a page and reload the page so that it runs the modified code?
Have a look at using something like Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
the Chrome equivalent of Firefox's Greasemonkey
EDIT: you could use this in combination with adblock to disable the loading of the script you are targeting: https://stackoverflow.com/questions/13919183/how-to-turn-off-one-javascript-or-disable-it-under-chrome
I wouldn't call it simple, but something like Intercept Proxy might be able to do it -- replacing one file with another.
I found a way to achieve what I needed.
Using Chromium's debugger I can set a breakpoint on any statement of the source code.
Once that statement is executed, the code suspends and Chromium's console gives me access to whatever is in the stack of the current function.
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.
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.
With firefox w/firebug, can I type javascript into the browser and test things?
Can I also reference functions/objects from .js files references in the html?
Short answer: Yes, you can, by using the console.
Longer answer: Take a look at the What's new in Firebug 1.6 video, it gives an excellent demonstration on what you can do with the console, including auto-completion of the available variables.
Everything that's available globally in the current document is available to the console. So if you included jQuery on the current page, it'll be accessible from the console too.
Yes, if you enable the console tab you can use it as a Javascript REPL. From there you should be able to access any variables and objects in the global scope.
yes, you can... while on firebug (1.6.1) click 5th button from the left, its like a bunch of lines, entitled show command line then you will see it.
as for your second question... u can use it as long as it is on the DOM otherwise goodluck to u :)
I just started doing some Javascript work for a project, I do mostly backend work so I'm sorry for being new at this! Also, not using a Javascript framework because I want to learn about the fundamentals before making everything very easy for myself :)
So, here is my question/confusion: I wrote a little javascript that dynamically changed forms. This is how I called the code:
// loads the initial box
window.onload = initList(environment_box);
// loads artifacts on each change to environment select box
environment_box.onchange = changeList;
This worked like magic - in CHROME that is! I never noticed it wasn't working in Firefox (its just an internal tool, so I can assume decent browsers, but I figure hey, if its working in Chrome, it will work in Firefox!). So, I did some investigation, and it seems as though the code isnt getting executed in Firefox. I whipped out firebug and wanted to see what was going on.
The interesting thing was, when I enabled Console on firebug, my code got executed! I am very confused as to why, and I would much appreciate any help I could get. Thanks!
-Shawn
You are calling some method on console in your JavaScript is my best guess. Chrome has console defined be default, so it is not a problem.
On Firefox, however, there is no such global object (not without Firebug), so when you try to call a property on an undefined object like,
console.log(..);
it throws an exception which you are not catching, so the JavaScript execution halts.
You're probably calling a method of the console object which just doesn't exist by default in most web browsers. It may be always available on webkit based browsers (like Chrome) but with firefox/IE(/opera?) it requires an external add-on, either firebug or a javascript dependency.
Checkout things like firebugx which simply defines the most common methods of a console object as no-op functions.