What is the console in javascript

The console is the built-in debugger in modern browsers, and skilled web developers will often use console.log() to print messages and debug problems in their code. The Console is mainly used to display various information generated during the loading process of web pages; when testing the interface, if a bug problem occurs, it will generally be displayed in this column, check the debugging log information or abnormal error information, and then develop the front-end Engineers debug and solve problems based on specific problems.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

The console is the built-in debugger in modern browsers. Skilled web developers will frequently use console.log() to print messages and debug problems in their code. This tool actually has many useful functions and techniques, and making good use of it can greatly improve the efficiency of web development and website optimization.

The Web Console can be easily accessed from any remote computer system running one of the following web browsers:

• Google Chrome

• Firefox

• Safari

• Microsoft Internet Explorer Version 11

• ## . . .

The Console in the developer tools is mainly used to display various information generated during the loading process of web pages.

When the console.log() function is used in the JS code of the web page, the log information output by the function will be displayed in the console. Log information is generally enabled during development and debugging, and when it is officially launched, this function will generally be removed.

When testing the interface, if a bug problem occurs, it will usually be displayed in this column. Check the debugging log information. Or abnormal error information, and then the front-end development engineer will debug and solve the problem according to the specific problem.

Open a browser, F12 to open developer mode, click the console tab, and enter the command (completion is supported):

console.log(console)

As shown in the screenshot above, the console object provides a large number of methods for use, instead of the console.log() function we most commonly use.

Use of Console

1. Display information command

Its built-in A console object provides 5 methods for displaying information. The simplest method is console.log(), which can be used instead of alert() or document.write(). For example, if you use console.log("Hello World") in a web script, the console will automatically display the following content when loading:

In addition, depending on the nature of the information, . The console object can also have four display methods, namely general information console.info(), debugging information console.debug(), warning prompt console.warn(), and error prompt console.error(). For example, insert the following four lines into the web script:

console.info("This is Info"); console.debug("This is Debug"); console.warn("This is Warn"); console.error("This is Error"); When loading, the console will display the following content:

As you can see, there are different icons in front of information of different natures. And there is a hyperlink behind each piece of information. Clicking it will jump to the corresponding line of the web page source code.

2. Placeholders

The five methods on the console object can all use printf-style placeholders. However, there are relatively few types of placeholders, and only four types are supported: characters (%s), integers (%d or %i), floating point numbers (%f), and objects (%o). For example:

console.log("%d年%d月%d日",2012,12,21);console.log("圆周率是%f",3.1415926);

%o Placeholders can be used to view the internal conditions of an object. For example, there is such an object:

var car = {};car.name = "宝马";car.color = "白色";然后，对它使用占位符%o：
console.log("%o",car);

3. Group display

If there is too much information, it can be displayed in groups, using The methods are console.group() and console.groupEnd().

console.group("The first Info"); 
console.log("The first Info first Line"); 
console.log("The first Info second Line"); 
console.groupEnd(); 
console.group("The second Info"); 
console.log("The second Info first Line"); 
console.log("The second Info second Line"); 
console.groupEnd();

Click the group title and the group information will collapse or expand.

4. console.dir()

console.dir() can display all the properties and methods of an object. For example, now add a drive() method to the car object in Section 2

car.drive = function(){ alert("The car is working.") };然后，显示该对象内容：
console.dir(car);

五、consol.dirxml()

consol.dirxml() 用来显示网页的某个节点（node）所包含的html/xml代码。比如，先获取一个表格节点，然后显示该节点包含的代码：

<table id="table" border="0">

	<tbody></tbody>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
	</tr>
</table>
<script>
	var table = document.getElementById("table");
	console.dirxml(table);
</script>

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应的信息，并且抛出一个异常。比如，下面两个判断的结果都为否：

var result = 0;
console.assert(result);
var year = 2017;
console.assert(year == 2016);

七、console.trace()

console.trace() 用来追踪函数的调用轨迹。比如，有一个加法函数：

function add(a,b){ return a+b;} 如果想知道这个函数是如何被调用的，在其中加入console.trace() 方法就可以了。

function add(a,b){ console.trace(); return a+b;}假定这个函数的调用如下：

var x = add3(1,1);
function add3(a,b){ return add2(a,b); }
function add2(a,b){ return add1(a,b); }
function add1(a,b){ return add(a,b); }

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time() 和 console.timeEnd()，用来显示代码的运行时间。

console.time("Timer1");
for(var i=0;i<1000;i++){
 for(var j=0;j<1000;j++){}
}
console.timeEnd("Timer1");

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用方法是 console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次，

function Foo(){ 
for(var i=0;i<10;i++){ funcA(1000); } 
funcB(1000); 
} 
function funcA(count){
 for(var i=0;i<count;i++){} 
} 
function funcB(count){
 for(var i=0;i<count;i++){} 
}

然后，就可以分析Foo()的运行性能了。

【相关推荐：javascript视频教程、编程视频】

The above is the detailed content of What is the console in javascript. For more information, please follow other related articles on the PHP Chinese website!