I'm to output the real html in Chrome developer console for easier debugging. So I thought of making a chrome extension, which is Chrome Extension.

I copied the real console.log() to console.nativeLog(); and I added my own custom function to console.log();

Here is the code:

    <div class="myDiv">
        <input type="text" id="inp1" title="title1" />
        <input type="text" id="inp2" title="title2" />
        <input type="text" id="inp3" title="title3" />
        <input type="text" id="inp4"  />
        <input type="text" id="test" value="">
    </div>
    <input type="button" id="btn1" value="Add" />
    <script type="text/javascript">
        console.nativeLog = console.log;
    var arr= new Array();
    for(var i=0;i<100;i++){
        arr[i] = i+','+i;
    }
    var fav = JSON.parse('[{"href":"/EMS-ILS/Modules/Supplier_Profile/Supplier_Profile.aspx?ModID=6&WebPageID=38","text":"Supplier Profile"},{"href":"/EMS-ILS/Modules/Customer_Profile/Customer_Profile.aspx?ModID=6&WebPageID=57","text":"Customer Profile"},{"href":"/EMS-ILS/Modules/Costing_Profile/Costing_Profile.aspx?ModID=6&WebPageID=50","text":"Costing Profile"}]')
        console.log = function (val){
            if(typeof(val)=='string'){
                console.nativeLog(val);
                return;
            }
            try{
                for(var x=0;x<arguments.length;x++){
                    var arr = arguments[x];
                    try{
                        if(!arr.length)
                            console.nativeLog(arr);
                        else {
                            for(var i=0;i<arr.length;i++)
                                console.nativeLog(arr[i]);
                        }
                    }catch(err1){
                        console.nativeLog(arr);
                    }
                }
            }   
            catch(err2){
                console.nativeLog(val);
            }
        }           
        $(document).ready(function(){
            console.log('-------------');
            console.log($('input'));
            console.log('-------------');
            console.log($('#inp1'));
            console.log('-------------');
            console.log($('#badId'));
            console.log('-------------');   
                            console.log($('input'), $('#bad'), $('input:text'),  fav, 0, arr)


        });
    </script>

Everything works fine, but the last one. If the jquery object contains no results, it will still print the context jquery object.

This is the output in console.

How can prevent that? Any Ideas. Thanks.

I'm to output the real html in Chrome developer console for easier debugging. So I thought of making a chrome extension, which is Chrome Extension.

I copied the real console.log() to console.nativeLog(); and I added my own custom function to console.log();

Here is the code:

    <div class="myDiv">
        <input type="text" id="inp1" title="title1" />
        <input type="text" id="inp2" title="title2" />
        <input type="text" id="inp3" title="title3" />
        <input type="text" id="inp4"  />
        <input type="text" id="test" value="">
    </div>
    <input type="button" id="btn1" value="Add" />
    <script type="text/javascript">
        console.nativeLog = console.log;
    var arr= new Array();
    for(var i=0;i<100;i++){
        arr[i] = i+','+i;
    }
    var fav = JSON.parse('[{"href":"/EMS-ILS/Modules/Supplier_Profile/Supplier_Profile.aspx?ModID=6&WebPageID=38","text":"Supplier Profile"},{"href":"/EMS-ILS/Modules/Customer_Profile/Customer_Profile.aspx?ModID=6&WebPageID=57","text":"Customer Profile"},{"href":"/EMS-ILS/Modules/Costing_Profile/Costing_Profile.aspx?ModID=6&WebPageID=50","text":"Costing Profile"}]')
        console.log = function (val){
            if(typeof(val)=='string'){
                console.nativeLog(val);
                return;
            }
            try{
                for(var x=0;x<arguments.length;x++){
                    var arr = arguments[x];
                    try{
                        if(!arr.length)
                            console.nativeLog(arr);
                        else {
                            for(var i=0;i<arr.length;i++)
                                console.nativeLog(arr[i]);
                        }
                    }catch(err1){
                        console.nativeLog(arr);
                    }
                }
            }   
            catch(err2){
                console.nativeLog(val);
            }
        }           
        $(document).ready(function(){
            console.log('-------------');
            console.log($('input'));
            console.log('-------------');
            console.log($('#inp1'));
            console.log('-------------');
            console.log($('#badId'));
            console.log('-------------');   
                            console.log($('input'), $('#bad'), $('input:text'),  fav, 0, arr)


        });
    </script>

Everything works fine, but the last one. If the jquery object contains no results, it will still print the context jquery object.

This is the output in console.

How can prevent that? Any Ideas. Thanks.

• javascript
• jquery
• google-chrome
• developer-tools

• what would you like the output to be? a blank line or no output at all? – teddybeard Commented Dec 4, 2012 at 6:48
• May be an empty array [] – Akhil Sekharan Commented Dec 4, 2012 at 7:28
• my implementation below just yields a blank line. This makes the logic simpler, but I can amend it to print an empty array. – teddybeard Commented Dec 4, 2012 at 7:36
• okay, I updated my implementation to print [] when the jquery object is empty. you can change it to whatever works best. – teddybeard Commented Dec 4, 2012 at 8:15

4 Answers 4

Check out this fiddle http://jsfiddle/tppiotrowski/KYvDX/3/. This will print each argument on a separate line and print [] if the jQuery object is empty:

console.nativeLog = console.log;
console.log = function(val) {
    var x = 0;
    for (x; x < arguments.length; x++) {
        var item = arguments[x];
        // check if we are dealing with jQuery object
        if (item instanceof jQuery) {
            // jQuery objects with length property are
            // the only ones we want to print
            if (item.length) {
                for (var i = 0; i < item.length; i++) {
                    console.nativeLog(item[i]);
                }
            } else {
                console.nativeLog('[]');
            }
        } else {
            console.nativeLog(item);
        }
    }
}

This is a more accurate replication of the actual console.log behavior for printing multiple arguments eg. console.log('a', 'b', 2, []) on one line: http://jsfiddle/tppiotrowski/KYvDX/4/

console.nativeLog = console.log;
console.log = function() {
    var x = 0;
    var output = [];
    for (x; x < arguments.length; x++) {
        item = arguments[x];
        if (item instanceof jQuery) {
            if (item.length) {
                for (var i = 0; i < item.length; i++) {
                    output.push(item[i]);
                }
            } else {
                output.push('[]');
            }
        } else {
            output.push(item);
        }
    }
    console.nativeLog.apply(this, output);
}

Try that

    console.log($('#badId')[0] != undefined ? $('#badId') : 'do not exist');

http://jsfiddle/bkPRg/2/

try

.html()

or

.text()

Also you might check this one for the jquery .length property:

var arr = arguments[x];
                    try{
                        if(!arr.length)

Just to add a judgement before print the jQuery object

console.log = function (val){
    if(typeof(val)=='string'){
        console.nativeLog(val);
        return;
    }
    else if(val instanceof jQuery && val.length==0)
    {
        console.nativeLog("A jQuery object with no html element");
        return;
    }