首页 > 硬盘 >

Chrome浏览器调试，控制台的详细说明

电脑杂谈　发布时间：2020-03-28 08:09:28　来源：网络整理

浏览器调试工具_ghostexp镜像浏览工具_交换机调试终端工具

作为前端开发人员，不可避免地需要执行各种调试.

在Google Chrome出现之前，Firefox的firebug是一个特别知名的调试工具，但是自Google Chrome诞生以来，其内置的开发人员工具可与firebug相提并论，甚至在某种程度上超过了firebug.

尽管本文介绍了Google调试工具，但必须说Firefox的调试工具仍然功能强大. 两者都是业界最佳的调试工具.

Google开发者工具功能丰富，包括代码检查，样式调整，性能优化以及其他更高级的功能. 有很多调试方法.

这是控制台的控制台

打开控制台

Windows系统快捷键[三]:

F12

Ctrl + shift +我

Ctrl + shift + j

鼠标操作1: 是否不必要？）

技术分享

鼠标操作2: 右键单击网页上的任意位置，最后一个选项: 检查，如图所示

技术分享

打开后，您可以看到此界面

技术分享

浏览器调试工具_ghostexp镜像浏览工具_交换机调试终端工具

上面的不同词: 用于不同功能面板的元素，控制台，源，网络等. 在这里浏览器调试工具，我们主要介绍控制台面板.

上图中的一个大空白是控制台面板的输入区域. 您可以在此处直接输入JavaScript代码. 网页上的错误信息，提示信息等也将显示在这里.

控制台是浏览器开发人员工具的本机API，而不是JavaScript本机对象. 但是，当前所有主流浏览器都支持它. 您可以在js代码中使用控制台输出信息.

现在我们在面板中输入控制台.

技术分享

您会看到控制台对象的方法很多.

让我们看一下以下五种方法:

console.log

console.error

console.info

console.warn

console.debug

这五种方法是更常用的方法，它们也是相对直观的方法. 这些方法之间的区别在于，输出结果的颜色不同，并且输出结果前面的提示符号也不同. 有关详细信息，请根据以下代码进行测试，并用相应的信息替换日志，警告，调试，错误

关于这五种方法，有几点要点:

1. 您可以输出任何类型的值，字符串，值，对象，数组，函数；

console.log(100);
console.log("pelli");
console.log(function hh(){});
console.log([1,2,3]);
console.log({name:‘pelli‘});
console.log(null);
console.log(undefined);
console.log(true);

ghostexp镜像浏览工具_浏览器调试工具_交换机调试终端工具

2. 您可以具有任意数量的参数（在65535之内），可以运行以下代码来查看效果. 顺便说一句，65535是一个特殊数字，如果有兴趣，您可以百度；

var str = ‘console.log("hello"‘;
for(var i = 0; i < 100000; i++){
    str = str + "," + i;
}
str += ‘);‘;
eval(str);

3. 您可以使用占位符来格式化输出，例如输出样式字符串，输出图片等.

占位符有四种:

浮点: ％f

字符: ％c

整数: ％d或％i

对象: ％o

请看以下代码: 登录代码可以随意与警告，信息，调试，错误互换.

//输出带有样式的文字
console.log("%c这是蓝色的20号字","color:blue;font-size:20px;");
//输出图片
console.log("%c","background:url(‘http://www.baidu.com/img/tupian.jpg‘)");
//格式化输出日期
console.log("今天是%i年%i月%i日",2016,05,04);
//输出小数
console.log("%f是圆周率",3.141592653);
var obj = {
　　name : ‘pelli‘,
　　age : 24
}
console.log("%o",obj);

除了console.log，还有许多其他方法. 所有方法均在上图中列出.

console.count（）;

此方法用于记录执行代码行的次数. 通常用循环和函数编写. 每次执行此行时，都会在控制台上输出一个值-将一个值添加到上一个值. 有一个可选参数. 可选参数是任意值（字符串，数字，对象，数组，函数，null，未定义，布尔值，正则表达式）. 该参数将在数字前的冒号之前输出.

输出中必须有一个冒号，后跟数字.

也就是说浏览器调试工具，如果没有参数，则输出冒号和数字.

技术分享

交换机调试终端工具_ghostexp镜像浏览工具_浏览器调试工具

将此方法写入函数以记录该函数被调用的次数.

console.dir（）

用于输出对象.

console.dirxml（）

输出dom对象

console.clear（）

清除控制台信息. 执行此方法将清除控制台中以前的所有输出信息.

console.assert（）

输出断言消息

console.assert(3 < 4,"该断言是正确的断言，所以不会有任何输出");
console.assert(3 > 4,"这句话是断言出错后输出的信息");
var a = 100;
console.assert(a%5===3,"断言有两个参数，第一个是必须参数，断言语句，第二个参数是可选语句，断言出错后输出的信息，如果断言正确，则不输出断言");