How to stop Firebug from truncating strings in the console? - javascript

While debugging, I frequently dump strings and arrays to the console. But in some cases, Firebug chops up string values, making it hard to be sure of the result.
For example, this code in the console:
console.log ( [
"123456789A123456789B123456789C123456789D123456789E123456789F123456789G",
"123456789A123456789B123456789C123456789D123456789E123456789F123456789G"
] );
Yields:
[ "123456789A123456789B123...89E123456789F123456789G",
"123456789A123456789B123...89E123456789F123456789G"
]
(Bad!)
A single string is okay. This:
console.log ("123456789A123456789B123456789C123456789D123456789E123456789F123456789G");
Yields:
123456789A123456789B123456789C123456789D123456789E123456789F123456789G
as expected.
But, arrays and objects get shortened.
How do I stop this behavior? Is this a bug? (My Google-Fu has failed, so far.)

Okay, after pawing through the list of Firebug Preferences (there's 204 of those, right now, and not in an apparent order), I found stringCropLength.
It defaults to 50, which makes sense, since the test strings were truncated to 123456789A123456789B123...89E123456789F123456789G, which is 49 characters long.
Opening about:config and setting extensions.firebug.stringCropLength to 0, stopped the strings from being truncated!
Note that according to Issue 5898: Introduce different string cropping preferences, this preference might affect a few things (for now). But, so far, I've seen no ill effects from having this set to no "cropping".

Use console.dir instead of console.log - the output has a + near it which lets you expand the string.

Use console.dir("....") function instead of console.log("...")
Also u might be intersted to look at firebug preferences

Related

Is ?& allowed in URL

I was reviewing some code and I saw something like this:
if (result.indexOf('?') === -1) {
result += '?';
}
result += '&' + SOMETHING;
Clearly this can result in an URL like this http://example.com?&a=b
The author of the code sees nothing unusual in the code but ?& bothers me. I could not find any restrictions in the RFC for URI to prove him wrong (or maybe I missed it).
Clearly in the network tab of Chrome dev tools it appears as an empty pair:
Should URL like this bother me or am i just paranoid?
This case will be interpreted as an empty value by most servers, so yes, it is indeed valid. What's going to happen is that the server checks between ? and every & and then separates the values at = accordingly.
So when there is nothing between a ? and a & (or two &'s), the values will both be empty. Missing ='s will affect whether the value is "" or null, but it will not make the query invalid.
Watch out with this, because some parsers might not find this to be valid, so you may get problems when using custom parsers (in JavaScript for example).
I wrote up a blog post about some of these edge cases years ago.
tl;dr: yes, ?&example is valid
What's important about it is that you're defining a key of "" with a value of null.
You can pretty much guarantee that almost no libraries support those empty string keys, so don't rely on them working, but as far as having a URL along the lines of ?&foo=bar, you should be fine when accessing the foo key.

Does this kind of value setting work in Javascript?

I'm trying to create code that requires the least number of bytes and that works for all browsers including IE 7.
In this example, the program calls dosomething('x1') and dosomething('x2').
If I have code like this:
var items,item,index,count;
items=Array('x1','x2');
count=items.length;
for (index=0;index<count;index++){
item=items[index];
dosomething(item);
}
Could I reduce it to this and have it still function exactly the same in all browsers:
var a=Array('x1','x2'),c=a.length,i;
for (i=0;i<c;i++){
f(a[i]);
}
I understand I changed the variable names and calling function name but my goal is to use the least number of bytes possible in the code to make the code execute.
I'm just not sure if declaring a variable equal to a property of a value from a previous variable in the same list of declarations would actually return correct results.
In other words, does var a=Array('x1','x2'),c=a.length... work, or do I have to specifically do var a=Array('x1','x2');var c=a.length; to make it work in all browsers including IE 7?
This is what the Google Closure Compiler service returned:
var a,b,c,d;a=["x1","x2"];d=a.length;for(c=0​;c<d;c++)b=a[c],dosomething(b);
You can find many different Javascript compressors online to automate the process you are hand coding now. Yet, it's always good to understand how they work as it helps to write code that is better compressed.
As for IE, you can test your code by changing the emulations settings in the IE debugger panel. Just press F12, click the Emulation tab, and adjust the document mode to 7 (IE7).
Hope this is enough to get you started in the right direction.
You can use Array.map from IE 9
var items = Array('x1','x2');
items.map(dosomething(item));

Javascript regex match fails on actual page, but regex tests work just fine

I have a very specific problem concerning a regular expression matching in Javascript. I'm trying to match a piece of source code, more specifically a portion here:
<TD WIDTH=100% ALIGN=right>World Boards | Olympa - Trade | <b>Bump when Yasir...</b></TD>
The part I'm trying to match is boardid=106121">Olympa - Trade</a>, the part I actually need is "Olympa". So I use the following line of JS code to get a match and have "Olympa" returned:
var world = document.documentElement.innerHTML.match('/boardid=[0-9]+">([A-Z][a-z]+)( - Trade){0,1}<\/a>/i')[1];
the ( - Trade) part is optional in my problem, hence the {0,1} in the regex.
There's also no easier way to narrow down the code by e.g. getElementsByTagName, so searching the complete source code is my only option.
Now here's the funny thing. I have used two online regex matchers (of which one was for JS-regex specifically) to test my regex against the complete source code. Both times, it had a match and returned "Olympa" exactly as it should have. However, when I have Chrome include the script on the actual page, it gives the following error:
Error in event handler for 'undefined': Cannot read property '1' of null TypeError: Cannot read property '1' of null
Obviously, the first part of my line returns "null" because it does not find a match, and taking [1] of "null" doesn't work.
I figured I might not be doing the match on the source code, but when I let the script output document.documentElement.innerHTML to the console, it outputs the complete source code.
I see no reason why this regex fails, so I must be overlooking something very silly. Does anyone else see the problem?
All help appreciated,
Kenneth
You're putting your regular expression inside a string. It should not be inside a string.
var world = document.documentElement.innerHTML.match(/boardid=[0-9]+">([A-Z][a-z]+)( - Trade){0,1}<\/a>/i)[1];
Another thing — it appears you have a document object, in which case all this HTML is already parsed for you, and you can take advantage of that instead of reinventing a fragile wheel.
var element = document.querySelector('a[href*="boardid="]');
var world = element.textContent;
(This assumes that you don't need <=IE8 support. If you do, there remains a better way, though.)
(P.S. ? is shorthand for {0,1}.)

textmate reformat with 2 spaces

I've set textmate to use softtabs 2 spaces on my file. But when I try to reformat the entire document, it uses 2 hard tabs as the indents.
Regular indents work as I want it to, just the document format doesn't. Anyway to get textmate to be obedient?
Thanks.
The JavaScript bundle's "Reformat Document / Selection" command is passing the document's text to the js_beautify function in the bundle's beautify.php file (found on my system and probably by default at /Applications/TextMate.app/Contents/SharedSupport/Bundles/JavaScript.tmbundle/Support/lib/beautify.php). If you take a look at the function definition you'll see that there's a second parameter, $tab_size, with a default value of 4. There's a line in the bundle that reads print js_beautify($input);. Change this to print js_beautify($input, 2); and you should, I expect, get tab stops with two spaces.
To make it a bit more flexible, use the TextMate environment variable TM_TAB_SIZE, as in print js_beautify( $input, getenv('TM_TAB_SIZE' ) );, which should update how the command operates if you ever change your tab size.
Note, I've tested none of this. :) Just took a look at the bundle and tracked down what seems to be necessary.
So, I tried chuck's suggestion and it gave me an error. I did this to "fix it". I'm sure it could be done more elegantly, but this worked for me.
Open up the same file Chuck says to open up, line 50 (or so) should look like this:
function js_beautify($js_source_text, $tab_size = 4)
change $tab_size to 1
function js_beautify($js_source_text, $tab_size = 1)
Now, around line 56 where it says:
$tab_string = str_repeat(' ', $tab_size);
change the space to a tab like so:
$tab_string = str_repeat("\t", $tab_size);
That worked for me.

Is there anything wrong with this statement? (Javascript)

I would like to know if there is anything wrong with the below statement.
document.getElementById(monthId).options[document.getElementById(monthId).selectedIndex].value
Am asking this because, sometimes it seems to work fine and the rest of the time, it throws up an error - Object doesn't support this property or method.
BTW, monthId is the clientID of the dropdown present in a gridview in an asp.net page.
Thanks!
If no value is selected in the dropdown list, selectedIndex would be -1.
It's hard to evaluate without some more code as context. But without sanity checks around this line of code I would expect it to fail with an index out of bounds type exception when there is no selected index.
I tend to error check when using getElementById. I would expect that that is where your problem is.
Try this, and then test it in a debugger, but I will put an alert in.
var elem = document.getElementById(monthId);
if (elem.options) {
options[document.getElementById(monthId).selectedIndex].value
} else {
alert("elem doesn't have an options property");
}
You may want to not assume that the value property exists either, and do the same basic thing as I did here.
Once you get it working smoothly, where you know what is going to happen, you can start to remove the unneeded variables and go back to your original line, but for debugging, it is simpler to have one operation on each line and use separate variables, so that the debugger can show you what is happening.
You may want to understand the difference between undefined and null, and there are various pages on this topic but this one isn't too bad.
http://weblogs.asp.net/bleroy/archive/2005/02/15/Three-common-mistakes-in-JavaScript-2F00-EcmaScript.aspx
You can debug your problem by adding a breakpoint to your code in IE development tools, Firebug, Opera dragonfly or Chrome development tools and check your values.
Or you could add alert statements to check your values. Personally i think the code goes awry when selectedIndex is -1 (selectedIndex = -1 would occur when nothing is selected).
Check for yourself:
alert(document.getElementById(monthId)); // Returns null if nothing is found
alert(document.getElementById(monthId).selectedIndex); // If the selectedIndex is below 0 it could cause your error
document.getElementById(monthId).options[document.getElementById(monthId).selectedIndex].value

Categories