Console Tab Overview

This tag is mainly used to print the log only. It can also be a time when debugging in javascript as a command-line window to use (similar to Microsoft Visual Studio in the window immediately (immediate window)). And the use of its "overview" of the sub-services, can also record javascript code execution when a number of useful information (such as the number of method calls, the implementation time, etc.).



This part of the contents will cover the following elements ~



Firebug at the use of log

How to log or other information sub -

Console.dir and console.dirxml

Assert (console.assert ())

Tracking (console.trace ())

Timing ()

Javascript Profiler



# 1. In the use of Firebug log

Firebug allows us to use the tags at the console log. Therefore, since then you can bid farewell to alert ( 'hello world') or document.write ( 'hello world') of the time.



Firebug at 5 in the log type.



Console.log: Print information (without any icon)

Console.debug: print information on at the console, but also includes a hyperlink to the method is called the line of the address (the latest version seems to have not a hyperlink).

Console.error (): print the form with information console.debug, but with the icon.

Console.info (): print the form with information console.debug, but with the icon.

Console.warn (): print the form with information console.debug, but with the icon.



Examples of code ~



Create a new html document.

Paste the following code inside the tag <body>. 

<script language="javascript" type="text/javascript">   
console.log('This is log message');   
console.debug('This is debug message');   
console.error('This is error message');   
console.info('This is info message');   
console.warn('This is warning message');   
</script>



The results as shown below.



Firebug Guide (b) --- how to use the Firebug command line API to provide debugging js procedures (on)



String substitution rules:



In the console.log, console.info, console.debug, console.warn and console.error can use string substitution rules, the similar with the C / C + + string substitution rules.





% s String
% d,% i Integer (temporarily does not support numeric formatting)
% f Float (temporarily does not support numeric formatting)
% o Object Reference





Examples ~



Note: this example I only use console.log (), but several other methods (console.info, console.debug, console.warn and console.error) are in fact yes.



Example will be on script tags within the content delete.

Paste the following code inside the body tag. 

<script language="javascript" type="text/javascript">   
  
//This is for normal string substitution " %s, %d, %i, %f".   
console.log("My Name is %s. My Date of Birth is %dth %s, %i. My height is %f m.", "Nicolas Cage", 7, 'January', 

1964, 1.8542);   
  
function Foo(){   
this.LeftHand = function(){   
return "Left Hand";   
}   
this.RightHand = function(){   
return "Right Hand";   
}   
}   
  
//This is for object "%o".   
var objFoo = new Foo();   
console.log('This is %o of Foo class.', objFoo);   
  
</script>









If you log in using the% s, at the console will be displayed on a green "object" hyperlink, click on this hyperlink will jump to the DOM tag. So if you click on the image above the second line that "object" hyperlink, you will see all the object's property list.



# 2. Subsector



Firebug will allow us to group all kinds of log information. If your code has a considerable number of the log, you may consider the use of the grouping function.



Examples ~ 



<script language="javascript" type="text/javascript">   
  
var groupname = 'group1';   
console.group("message group : %s " , groupname);   
console.log("log message 1 from %s", groupname);   
console.log("log message 2 from %s", groupname);   
console.log("log message 3 from %s", groupname);   
console.groupEnd();   
  
groupname = 'group2';   
console.group("message group : %s " , groupname);   
console.log("log message 1 from %s", groupname);   
  
var subgroupname = 'subgroup1';   
console.group("message group : %s " , subgroupname);   
console.log("log message 1 from %s", subgroupname);   
console.log("log message 2 from %s", subgroupname);   
console.log("log message 3 from %s", subgroupname);   
console.groupEnd();   
  
console.log("log message 3 from %s", groupname);   
console.groupEnd();   
  
</script>







# 3. Console.dir and console.dirxml

 

Console.dir: the object to be given to all methods and property. The following example, we call console.dir () has been car object Model (property) and getManufactor (methods).

Console.xmldir (): print xml tree html elements. 



<table cellpadding="0" cellspacing="0" border="0">   
<tr>   
<td>A</td>   
<td>B</td>   
<td>C</td>   
</tr>   
</table>   
<script language="javascript" type="text/javascript">   
//Create a class   
function Car(){   
this.Model = "Old Model";   
  
this.getManufactor = new function(){   
return "Toyota";   
}   
}   
  
//Create a object   
var objCar = new Car();   
  
//Firebug   
console.dir(objCar);   
console.dirxml(document.getElementById('tbl1'));   
  
</script>



Output ~






# 4. Assertion (console.assert ())



Through console.assert () can can determine an expression is correct. If the expression is wrong, will print out information on the console and threw out the anomaly. (It seems that question has firebug1.2.1 Medium, I have sent a letter to ask the Firebug development team)





# 5. Tracing (console.trace ())



Unfortunately, at firebug1.2.1 not appear to support good, I wrote a letter to ask:)



# 6. Timing (Measuring the time of your code)



Unfortunately, at firebug1.2.1 not appear to support good, I wrote a letter to ask:)



# 7. Javascript Profiler



Control Panel by clicking the tag in the "Overview" button to start this feature, through which we can optimize the performance of javascript. About details in this regard will be in the next sections go into details here.



Summary:

If there is any problem, please blog on my guestbook