2、Chrome之Console功能面板

chrome启动参数:https://peter.sh/experiments/chromium-command-line-switches/

Console

说明：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。

a.面板功能说明

 

1、Hide console sidebar:隐藏侧边栏

2、Clear console:清空控制台

3、Context：展示网页上下文环境，如果该页面有多个内联iframe，则也会在这里展示，可以选择切换，如下图

 

4、Create live expression：创建监控表达式，可以实时监控某个表达式的执行。

5、Filter:过滤。

6、Default levels:默认日志级别，当收起console sidebar时，可以选择级别。

b.方法使用说明

在控制台输入console并回车，你就能看到console的所有方法。

 

1、console.log()：输出普通日志信息

2、console.warn()：输出警示信息

3、console.info()：输出提示信息

4、console.error()：输出错误信息

 

​​5、console.table()：支持以表格的形式输出日志信息

 

另外我们以table的方式输出一个内置对象，看看效果

 

▲1列：展示的该对象的方法及属性

▲2行：展示其子对象的属性

上述方法都可以输出任意类型的值，字符串，数值，对象，数组，函数;

6、console.clear()：清空控制台（快捷键ctrl + L）

7、console.count()：统计方法执行次数

 

8、console.group()：输出一组信息的开头

9、console.groupEnd()：结束输出一组信息

 

10、console.assert()：对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

 

11、console.dir()：显示一个对象的所有属性和方法

 

12、console.time()：计时开始

13、console.timeEnd()：计时结束

 

14、console.profile()：开始记录性能描述信息

15、console.profileEnd()：结束记录

 

然后在More tools，点开JavaScript Profiler，便能看到方法的执行时间

 

 

15、console.trace()：显示当前执行的代码在堆栈中的调用路径

 

c.console设置

Hide network messages:隐藏网络信息比如：404 和 500 系列的问题将不会被记录。

Log XMLHttpRequests:勾选后会记录每一个XMLHttpRequests

Preserve log:勾选后，控制台的日志信息将会叠加，同时console.clear()无法清空控制台

Eager evaluation:立即求值

勾选后，能直接看到该对象的值，不勾选则看不到

 

Selected context only:只显示当前作用域的日志，参照上下文环境。

Autocomplete from history:历史记录提示补全

Group similar:相似日志分组

Evaluate triggers user activation：检测触发用户激活

d.console拓展

1、占位符

%i 或 %d	格式化成 integer
%f	格式化成一个浮点类型
%o	格式化成一个可扩展的 DOM 元素。就跟在元素面板中看到的一样
%s	格式化成 string
%c	通过第二个参数来申请一个 CSS 风格的输出字符串
%O	格式化成object对象

示例： 占位符的排列顺序要和后面参数类型的顺序一致

2、 console.dirxml()方法会输出某个节点下的html/xml代码

3、 $()：等同于document.querySelector()；

$$()：等同于document.querySelectorAll()；

$x()：通过xpath来查看元素；

$0——$4：代表最近5被访问的元素或者堆对象（heap object）；

$_：返回上次表达式的结果；

注：$()等同于document.querySelector()，但是并不是绝对相等

 4、inspect()，参数的是元素或者js引用，可以直接在elements面板中定位

 

5、copy功能

copy可以将要复制的值保存在剪切板，可以在任何地方进行粘贴

6、monitor & unmonitor

monitor:对方法进行监控，方法执行一次，便会在控制台输出一次

unmonitor:对方法解除监控

7、monitorEvents & unmonitorEvents

monitorEvents:对事件进行监控

unmonitorEvents:解除对事件的监控

 

a.上图对某个网页的title添加了监控点击事件，当鼠标点击时，就会在控制台打印出该事件，同时可以通过getEventListeners(temp1)获取该元素身上的事件，然后通过unmonitorEvents来解除该元素身上点击事件的监控。

 

b.上图中手工给该元素添加一个双击事件，触发时会在控制台输出

 

c.上图是给title元素添加了一个自定义事件，执行temp1.dispatchEvent(event),便会自动执行事件。e.stopPropagation()：返回的是一个方法，chrome浏览器才有这个方法，所以该方法是校验是否是chrome浏览器

8、keys(obj)/values(obj)

keys(obj):等于Object.keys(obj)

values(obj):等于Object.values(obj)

本质上是将对象的可枚举属性转换成数组，可可枚举属性影响for…in、Object.keys()/Object.values()、JSON.stringify等的执行结果

给person对象添加不可枚举属性sex,for in,keys()，JSON.stringify()，均不能输出sex属性

校验一个属性是否可枚举，可以通过obj.propertyIsEnumerable("sex")来判断

9、在console中使用js脚本获取页面上可见的链接地址

var str = "\n";
var array = ["a", "img", "script", "iframe"];
function getLink(array) {
    for (i = 0; i < array.length; i++) {
        var list = document.getElementsByTagName(array[i]);

        switch (i) {
        case 0:
            console.log("%c%s",'color:red',array[i] + "标签的链接地址：");
            for (x in list) {
                console.log(list[x].href + str);
            }
            break;
        default:
            console.log("%c%s",'color:red',array[i] + "标签的链接地址：");
            for (x in list) {
                console.log(list[x].src + str);
            }
            break;
        }

    }
}

10、截图

ctrl + shift + p打开指令搜索，输入screen，便能选择截图了

11、Create live expression实例

function showDialog() {

    var parent = document.querySelector('body > div.nav');
    var div = document.createElement('div');
    parent.appendChild(div);
    var css = "position:fixed; left:0px;border:1.5px;width:250px;height:300px;z-index:99999;background-color:black;opacity:0.9;display:block";
    div.style.cssText = css;

    var ul = document.createElement('ul');
    var cssUl = "font-size:24px;color:white;text-align:center;padding:20px 20px;line-height:40px"
    div.appendChild(ul);
    ul.style.cssText = cssUl;
    var li = document.createElement('li');
    ul.appendChild(li);
    for(var i =0;i<5;i++){
        var li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML='TTI : ' + performance.getEntries('navigation')[0].domContentLoadedEventEnd.toFixed(2) + ' ms';
    }
 
}

document.addEventListener('click',function(e){
   showDialog();
})

将上面代码，粘贴到 Create live expression中点击空白，在F12开发者模式不关闭的前提下，刷新页面，便能触发计算TTI的弹窗，效果如下图

另外，我们可以通过snippet脚本实现或者override重写引入echarts实现数据图形化的展示，在source面板文章中，将会给出这样的实例。