在Console.Log（）中顯示HTML而不是jQuery選擇對象

Question

我想在Chrome開發人員控制檯中輸出真實的HTML以便於調試。 所以我想到做一個擴展名爲Chrome Extension的擴展。

我將真正的console.log（）複製到console.nativeLog（）;並將我自己的自定義函數添加到console.log（）;

下面是代碼：

<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> 

一切工作正常，但最後一個。如果jquery對象不包含結果，它仍然會打印上下文jquery對象。

這是控制檯中的輸出。

如何預防呢？有任何想法嗎。謝謝。

Answer 1

看看這個小提琴http://jsfiddle.net/tppiotrowski/KYvDX/3/。這將打印在單獨的行的每個參數和打印[如果jQuery對象爲空]：

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); 
     } 
    } 
} 

這是實際的console.log行爲的用於打印多個參數例如更精確的複製。 console.log('a', 'b', 2, [])在一條生產線上：http://jsfiddle.net/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); 
} 

Answer 2

試一下

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

http://jsfiddle.net/bkPRg/2/

Answer 3

嘗試

.html() 

或

.text() 

你也可以檢查這一項爲jquery .length財產：

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

Answer 4

只是爲了打印之前增加一個判斷jQuery對象

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; 
    }