chrome浏览器调试

前序:DevTools使开发者更加深入的了解浏览器内部以及编写的应用。通过它我们可以高效的定位页面布局、页面报错。今天我们就来一起实践如何使用好devtools这把利剑。


在开始之前我们先来了解一下chrome中的快捷键:

功能 快捷键
cmd + opt + i 打开devtools;c是审查元素;j是控制台;
cmd + o 文件检索;
cmd + shift + o 定位到文件内css规则或者js方法
cmd + opt + f 全局文本搜索

下面我从dom、css、js分别阐述一下如何调试

1.dom

1.1:打开调试面板,选中dom节点右键,选择break on可见如下:一般我们会拿attributes Modifications来调试样式动画效果
dom断点调试 方法
subtree modifications 子节点增删改时触发;
attributes Modifications 自身属性发生变化触发
Node Removal 当前移除时触发
1.2:source面板 Event Listener Breakpoints

可以选中要调试的事件,复选框选中,在页面区域触发事件即进入断点 event listener breakpoints

1.3:hover 鼠标略过效果很炫,但是略过获取不到样式。可以如下操作查看:

hover

1.4:选择元素,在控制台输出$0。可以通过这种方式快速选择元素,或进行$($0)进行‘任意’操作

控制台输出$0

2.css

2.1:加号,点击+号即可添加你当前dom所选的样式进行调试

2.2:上述的调试一般只存在内存中,页面一刷新就没了,那么我们如何能将我们调试的结果保留?
映射保存到磁盘(本地文件夹映射到网址)

source-> add folder to workspace(文件夹位置并授权) ->map to file system resource
具体见动图:

2.3:animation css动画调试animate


注意动图中的停顿处。仅对外部css生效; 行内无效,via source修改

2.4:吸取颜色,看到动图的那个小颜料桶了么?😁



3.控制台 使用它作为shell在页面上与JavaScript交互

3.1:xpath查询语言,$x(xpath,context)执行查询。context是执行上下文的dom元素;类似jq
XPath 使用路径表达式来选取 XML 文档中的节点或节点集  
$x('//img');

具体可以查看xpath,类正则  

3.2:$0,$1,$2,$_

获取之前选择过的近6个元素

3.3:console家族

dir 输出对象的所有属性值,然后你就能在console面板中输入console.dir(console);看看console家族有多少大。

顺带提一下console.assert(false,'out')。有时候我们会if(x){console.log(*)},console.assert就是if(false){console.log(*)}

让我们先来看一张图:这个的代码我先贴一波感兴趣的童鞋可以自己去实践一把,我就不一一描述:

console.groupCollapsed('console.level的日志');  
  console.log('this level is console.log');
  //一层嵌套
  console.group('debug的日志');
     console.debug('输出调试信息');
  console.groupEnd();

  console.info('this level is console.info');
  console.warn('this level is console.warn');
  console.error('this level is console.error');
console.groupEnd();

console.dir(console);

console.group('console.assert的日志');  
   console.assert(2>1,'2比1大');
   console.assert(1>2,'1>2,出错了');
console.groupEnd();

console.table([{a:1, b:2, c:3}, {a:"foo", b:false,c:undefined}]);

console.table({ 'dog':{'age':20,'sex':'girl','like':'eat'},'cat':{'age':11,'sex':'boy','like':'sleep'},'mouse':{'age':1,'sex':'boy','like':'drink'} });

//有样式的
%s - 字符串格式
%i 或 %d - 整型格式
%f - 浮点格式
%o - DOM节点
%O - JavaScript 对象
%c - 对输出的字符串使用css样式,样式由第二个参数指定    
console.log('%s很开心,因为%o是她进卖好车的第%d天,这是她的照片%c','晴天',new Date(1462118400000),1,"padding:50px 50px; background:url('https://avatars1.githubusercontent.com/u/8566935?v=4&s=460') no-repeat; background-size:100% 100%; line-height:140px")

console.group('计时');  
  console.time("数组耗时计费");
    var a = [];
    for(var i =0; i<10000000; i++){
        a[i]=i;
    }
  console.timeEnd("数组耗时计费");
console.groupEnd();  
很多童鞋可能对mhc的图标ascii码打印比较好奇?

其实很简单,下列两个网址:根据你的实际需求选择一种模式,生成处ascii,然后将生成的ascii中的所有换行符替换成\n,并且将部分转义字符转义即可。建议在sublime中操作,按住alt键,command+d选择可批量处理:

  • ascii文字生成ascii
  • pic图片生成ascii

来个🌰🌰🌰🌰🌰:

4.js调试

4.1:断点(设置有条件的断点)

哪些可以打上断点?? 一般方法名 对象字面量基本类型的属性 不能打上其它基本都ok

图标 描述
继续执行直到下一个断点
不管下一行发生什么都会执行,并跳转到下一行
如果下一行包含一个函数调用,Step Into 将跳转并在其第一行暂停该函数。
暂时停用所有断点。用于继续完整执行,不会真正移除断点
在发生异常时,自动暂停执行代码
4.2:js文件中如何打断点???
断点可以设置条件?js文件中直接修改查看结果?具体请看下图操作:

4.3:经常我们打断点的时候会进入到第三方库、例如jquery,但是我们只希望在自己的js文件中打断点,那么怎么处理?
拉黑操作。blackbox script把你不要打断点的js文件放入黑箱

4.4:线上bug调试;混淆?压缩?
方法1:系统偏好设置 -> 网络 -> 高级 -> 代理 ,代理到本地
方法2:source maps,开启浏览器Enable JavaScript source maps,目前只支持chrome
4.5:代码小书签 snippets, History(版本管理)



5.NetWrok

DOMContentLoaded 和 load

 DOMContentLoaded解析页面初始标记:
    1. overview窗格中的蓝色竖线表示事件
    2. summary中的确切时间


 load页面完全加载完成标记:
    1. overview窗格中的红色竖线
    2. requestTable中的红色竖线
    3. summary中的时间

TTFB:Time To First Byte(request sent至收到服务器发出的首字节的时间)

Initial connection:初始化连接
结果: 大片绿:客户端与服务端之间的网络条件差或者服务器应用响应慢 大片蓝:文件太大发送的字节数太多 下载HTTP响应的时间(包含头部和响应体) 通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;


🌹🌹🌹🌹🌹   that's all! thank you!