Develop Reference

How to run javascipt on chrome console

Hello I want to try to run all of these code on console chrome
var xxx = document.querySelectorAll('.balanceDetails-manageCurrencies.test_mcm-addCurrency')
xxx.forEach(btn => btn.click())
var twd = document.querySelectorAll('.shadow.multiCurrency-flag.multiCurrency-flag_TWD')
twd.forEach(btn => btn.click())
var addcurrency = document.querySelectorAll('.btn.vx_btn.mandate_lg-btn.test_mcm-addCurrencyButton')
addcurrency.forEach(btn => btn.click())
But it doesnt run everything, the process just stop when they excute line number 2
xxx.forEach(btn => btn.click())
Question is, how to run all of these code?

Try combining the arrays then running the click loop on the new array.
replace sel1 etc to your selectors
var xxx = [...document.querySelectorAll(sel1), ...document.querySelectorAll(sel2), ...document.querySelectorAll(sel3)]
xxx.forEach(el => el.click())

It's hard to tell what's going on in your case because we don't know what your selected DOM nodes are doing after being clicked. If you paste that entire code block into the chrome console I would expect it to execute all of it.
Two things off the top of my head could be happening.
The click handler setup to fire on one of those DOM nodes is throwing an error, but that error is being caught by a try/catch block and never bubbles up to the console. This would create the symptoms described.
The click handler for one of those DOM nodes is doing a form post, or something else that will cause the page to reload. Although, if this were the case you'd see the console clear. Not sure if you're seeing that or not.

Why does prototyping Function not affect console.log?

I prototyped Function so that it has a getBody function:
Function.prototype.getBody = function() {
// Get content between first { and last }
var m = this.toString().match(/\{([\s\S]*)\}/m)[1];
// Strip comments
return m.replace(/^\s*\/\/.*$/mg,'');
};
See here for more info.
I tried to test it this way:
console.log(console.log.getBody.getBody());
but received an error: TypeError: console.log.getBody is undefined.
I figured out that maybe this happens because console.log was defined before I actually prototyped Function so I created an empty function x right before the prototyping and tried to call
console.log(x.getBody.getBody());
which worked without a problem. Checking the type of console.log with typeof console.log results in "function". Here's a CodePen to try it out. All of this wasn't really a surprise since it's what I expected except of console.log.getBody to be undefined.
So why does prototyping Function not affect console.log? I'm using Firefox 18.0.1 with Firebug 1.11.1.

This seems to be an issue with Firebug not with Firefox per se. My guess is that Function in Firebug lives in a different scope then Function in your page. (since unlike the other browsers Firebug is an extension , not a built in browser tool)
In fact if instead of Firebug you use the built in Firefox console (Ctrl+Shift+K), your code works perfectly fine.
More information about Firebug internals can be found here
http://getfirebug.com/wiki/index.php/Firebug_Internals
This excerpt may be interesting
When Firebug is detached from Firefox, open in a new or separate
window, the new window has its own scope. In that scope, a few Firebug
script tags compile to create a connection back to the original
browser.xul window. Most important, chrome.js is unique to each top
level window, but the Firebug object used by the detached window is
the object of the parent browser.xul.

firefox / chrome console log of functions

Normally I use ff + firebug and I find extremely useful it's console feature: if you console.log(a_function); you don't see the (IMHO totally useless) function body, but a link to the js source file where the function is defined.
(On https://getfirebug.com/logging they describe it in the "Logging object hyperlinks" paragraph)
but but, is there a way to have the same behaviour on the firefox / chrome "native" console?

You could add console.trace() or even console.log() within the function definition to track it. Something like this:
function something(){
var x = 5 +3;
console.trace();
console.log("FUNCTION SOMETHING");
return x;
}
So, when it shows up in your Chrome console tools, you can see the originating file and line AND click on it to get to that file's source. Not as eloquent as FF Firebug, but it's a start.
I don't know if you have access to these functions and just want an easy way of going from the console to the source file OR truly don't know where the function originates. But this is what I would do. Check out the source for reference!
Source: https://developers.google.com/chrome-developer-tools/docs/console-api#consoletrace

In Chrome if you place your function in the console.dir function, you will get additional information about the function. You can then right click on the function and select "show function definition".
Example:
console.dir(my_function);
I'm not seeing anything in firefox.

Try to use
console.log("test");
It will work on both ff and chrome.

why not console.debug(yourfunc.toString()); ?

Console is undefined error in IE9

I have a graphics page which shows SVG graphics. I am using Raphael graphics framework. The page displays properly in Firefox, Also if the F12 developer tools is set 'on' in IE9 it works fine.
The map show partial data (its a node link diagram and it shows only one child node out of 12 nodes) in IE9 if the F12 developer mode is set off and application is started with browser cache cleared (simulating a general user).
Update: I kept the Debugger on and Shows me the error "Console is undefined". So I think its not a graphics rendering issue, and also I am not using the console explicitly, maybe the mindmap js is using it internally, but how to again get rid of this issue?
Update:
I found the issue and commented out the console.log entries from the js files.
Thanks.

Probably your code or the code you are calling is using console.log or something like it.
You could add this code in the global scope to create a dummy wrapper for IE (or any browser that doesn't support it). Just put the following code somewhere before you call any other libraries:
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}

The problem is that your js code calls sometime a console method, for example 'console.log', but your browser does not have console (or has it closed);
To fix this, add this (once) before including any of your scripts:
//Ensures there will be no 'console is undefined' errors
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
This will create a 'pseudo' console only if it doesn't exist, so that 'console is undefined' error will go away.
Hope this helps.
Cheers

Do you have a console.log() or console.error() call in your code?

variable assignments using jQuery failing in Safari?

I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .

Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.

It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.