chrome浏览器调试

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

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

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

1.dom

1.1：打开调试面板，选中dom节点右键，选择break on可见如下：一般我们会拿attributes Modifications来调试样式动画效果

1.2:source面板 Event Listener Breakpoints

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

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

1.4:选择元素，在控制台输出$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!