前端答疑-chrome开发者工具正确食用-调试代码

以前写过前端答疑-chrome开发者工具正确食用-看网页源码，其中涉及到了 Sources 和 Network 两个标签。

未曾想如今的世界愈来愈看不懂了
昨天吧，一个朋友忽然联系我了（应该是校友吧，不过我没见过本人，大我十届？我也是奔三的人了，忽然好难过）。
问我360 浏览器如何调试 js。这个时候应该配图了[黑人问号脸]。调试应该是每一个开发必会的技能吧，即便不会，难道没有网络吗？网上连教程都没有吗？

那么好了，基于上面的吐槽，咱们开始今天内容。

所需知识

1. chrome 开发者工具之 Console
   主要就是打日志，而后分析日志
2. chrome 开发者工具之 Sources
   主要是调试js。包括调试工具（步入、步出、调用堆栈等）
3. chrome 开发者工具之 Element
   主要是查看 DOM，以及修改 CSS。
   目前来讲不如jQuery时代用的多，我基本就是改css了。
4. chrome 开发者工具之 Network
   看每次请求和响应，包括参数，headers这些。
5. chrome 开发者工具之 Application
   一些前端本地存储。cookie、localstroage 等等

chrome 开发者工具之 Console

log 是一个开发利器。 hello world 大概就是咱们的每一个人的第一条 log。

java system.out.println('hello world')
python print('hello world')
js console.log('hello world') 固然，有的时候咱们会使用 alert 来打。这里推荐一下 fundebug，一行代码搞定BUG监控，也能够打log，有一部分的免费额度。

F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）打开咱们的控制台

console API 介绍

JavaScript 原生中默认是没有 Console 对象。是宿主对象提供的，也就是说console 是浏览器提供的内置对象。
用于访问调试控制台, 在不一样的浏览器里效果可能不一样。
IE低版本没有（固然你装了高版本，而后打开控制台他又能用console了）。

日志级别 API

提供了日志级别api。能够方便咱们根据类型，更快的定位须要关注的问题。

1. console.log('普通-文本')与console.dir('普通-对象')
   不一样之处在于输出dom节点对象类型是会有一些差异。
   
2. console.info('信息') console.log 的别名，输出信息，部分浏览器会增长一个蓝色标志。
3. console.warn('警告') 黄色警告标识，也有堆栈信息。
4. console.error('错误') 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。
   
5. console.debug('调试') 从 Chromium 58 开始，Chromium 浏览器只有勾选了控制台中的 “Verbose” 日志级别才可见。

支持多种写法

1. 多参数
   console.log('auther:', 'lilnong.top')
2. 占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）、可展开的DOM（%o）、列出DOM的属性（%O）、根据提供的css样式格式化字符串（%c）
   console.log('auther:%s', 'lilnong.top')
console.log('%cauther:%s', "color: red; font-size: 20px",'lilnong.top'); 更适合封装起来使用。

功能性的 API

1. console.assert(location.protocol=='https:', "https防止劫持哦~") 接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，不然不会有任何结果。
   
2. console.clear() 清除当前控制台的全部输出。
3. console.count('count') 提供计数功能。好比说有个排序算法，咱们想统计时间复杂度。
   Console.countReset() 咱们也能够重置指定标签的计数器值。
   
4. console.group('第一层');console.groupEnd(); 提供将显示的信息分组功能，能够把信息进行折叠和展开。
   console.groupCollapsed('第一层');console.groupEnd(); 同上，不一样点是默认是折叠状态
   
5. console.table(arr); 提供将复合类型的数据转为表格显示。还能够进行排序等操做。
   
6. console.time('task');console.timeEnd('task'); 提供了统计代码执行用时的功能。不许，波动会比较奇怪，多统计，而后求平均值吧
   
7. console.trace(); 追踪函数的调用过程，也能够理解为把打印堆栈。
   

Console 面板介绍

上面介绍了API。接下来咱们介绍一下面板的使用。

1. 控制的是，级别筛选栏的隐藏与显示。

   1. messages 是全部消息类型

   2. user messages 是指全部用户日志，浏览器产生的不算。以下，产生的错误就不算

      document.body.addEventListener('touchmove', (e)=>e.preventDefault())
      // VM275:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

   3. errors 是指错误级别的日志
   4. warning 是指警告级别的日志
   5. info 是指信息级别的日志
   6. verbose 是指调试级别的日志
2. 是指清空当前面板内容。
   快捷键 ctrl+l 对应的命令是 console.clear();
3. 是指当前的做用域。若是有iframe的话，能够切换做用域为对应的iframe。而后就能够快乐的在控制台调用iframe里面的变量了。
4. 建立一个动态监听。实时监听一个变量，若是变化了，这里也会变化
   
   
5. 经过关键词过滤日志
6. 描述有多少条记录被隐藏

7. 设置功能，里面是一些控制开关。

   1. 隐藏网络请求相关的错误，好比404
      
   2. 持续日志功能。正常来说，咱们刷新页面或者跳转其余页面，日志会清空。开始持续日志后，跳转刷新等操做不会清空日志。更方便咱们比对两次请求的差别
      
   3. 配合 top，只显示当前做用域内的日志。
   4. 把一些错误合并到一块儿。和默认的合并效果不太同样。
   5. 为每次请求的打印日志
      
   6. 能够理解为及早求值，当你在控制台输入一个表达式的时候，下面会出现他的结果，这个时候你尚未按下回车
      
   7. 提供记录你历史输入，方便快捷输入选择。

chrome 开发者工具之 Sources

API 介绍

相关的应该只有debugger了吧。
当控制台是打开状态，走到debugger会进入调试模式。反之没打开控制台，不会进入调试模式。
测试地址，为何会有 ajax 的 debugger 测试呢？由于问个人那我的，说兼听不到ajax的。

面板介绍

这里介绍两部分 代码区和调试工具区

代码区

以下图所示，能够看到咱们当前程序的代码。
在左边行数显示的位置咱们能够直接打断点，也能够右键，执行更多断点操做

1. Add breakpoint 就是设置断点，和单击效果是同样的
2. Add conditional breakpoint 添加条件断点，能够知足必定的条件再触发
   
3. Add logpoint 是打一个日志点，每次执行到这里能够打日志
   
   
4. Never pause here 在当前点增长一个条件为false的条件断点
   
5. Blackbox script 屏蔽当前文件，好比这个文件中有debugger也不会执行断点。经常使用于一些开源类库，打断点不但愿跳入到里面。
6. 若是一行有多个操做，会在后面出现断点标识
   
7. shift+单击，能够临时关闭当前断点
   

调试工具区

下面咱们介绍一下每一个按钮的功能

1. 当有断点的时候是个三角，意思是放过这个断点。
   当无断点的时候会在下次调用的时候停住。
   
2. 下一行，若是是方法不会跳进去
3. 步入，若是是方法，能够跳进去
4. 步出，跳出当前方法
5. 下一步（我没用过）
6. 当前状态是捕获调试。蓝色的时候是不捕获调试，会跳过 debugger。
   方便你打了断点，而后又想测试效果
7. 这个是捕获错误。当前是不捕获。

工具栏介绍完了，咱们看一下其余区域

1. Threads 当前线程
2. Watch 能够监听一些经常使用变量，方便排查问题
3. Call Stack 能够理解为当前的调用堆栈信息
4. Scope 为当前上文环境中变量的值，切换call stack，scope中变量也会切换。
5. Breakpoints 是当前全部的断点
6. XHR/fetch Breakpoints 对接口访问的断点
7. DOM Breakpoints 为全部dom上的断点，能够监听subtree modified、Node removed、attribute modified
8. Global Listeners 全部已监听的事件
9. Event Listener Breakpoints 全部Event的监听

常规用法

1. vue中，created打个断点，而后把this绑在全局方便排查问题
2. 某些不肯定的地方打断点，而后单步调试
3. 异步内容打断点，查看返回是否正常

chrome 开发者工具之 Element

DOM树（左边）

左边部分是咱们的DOM树，通常来讲看看层级。具体找DOM的活，咱们都是在对应的元素上右键-检查。

1. 能够改属性，标签
2. 右键能够操做
   

样式（右边）

右边部分是咱们当前DOM的css相关，通常来讲能够在这边改改样式，看看效果。支持键盘上下切换当前值。

还有一些便捷操做的控件

1. 颜色选择
   
2. box-shadow
   

常规用法

1. 微调css，及时可见
2. 查看当前盒子模型
3. 当前DOM全部事件
4. 查询当前DOM样式继承问题。
5. 查询当前DOM最重计算值

chrome 开发者工具之 Network

1. 看接口的返回值
2. 看接口的请求头，响应头
3. 查看资源的加载速度
4. 查看资源的大小，缓存状况，响应状况（cdn、waiting 等时间）

Network 之 preserve log

该功能为长日志功能，正常来讲看到的都是当前页面的。
若是跳转页面或者说刷新以后就没了。经过打开 preserve log，咱们能够长久的保留内容。
那它有什么做用呢？

1. 咱们能够看到一些中间页的跳转，省去了抓包的麻烦。
2. 能够和上个页面的数据比对。

Network 之 disable cache

前端缓存也是比较麻烦的一个事情。常常须要强刷，清缓存一顿的操做。
当咱们打开 disable cache 以后，咱们就不须要关了，每次都是无缓存的加载

Network 之 offline

好比说在测试 PWA。或者说弱网的状况下的一种快速配置。

Network 之 过滤行

请求比较多的页面，咱们有可能须要过滤。
工具栏提供了，路径过滤（支持正则），类型过滤（All,XHR,js），

Network 拿响应

其实很简单啊，找到页面的请求，而后看 response 里面不就是吗？

Network 看headers

这个其实也是昨天碰到的，有个朋友说他下载文件失败。我打开看到他response的header的Content-Disposition写错了。

chrome 开发者工具之 Application

能够查看对应数据，更改对应数据，还能够清空。

微信公众号：前端linong

资源

1. 20个Chrome DevTools调试技巧 --Fundebug