一些Chrome DevTools使用技巧

在前端开发调试中，咱们最常常用的就是Chrome DevTools了。以前在看《现代前端技术解析》这本书的时候，里面提到了这么一句话。

在Chrome浏览器中， 用F12打开控制台后，一名优秀的前端工程师须要尽可能保证本身对里面95%以上的操做和内容都很熟悉， 这样才能够说是基本运用自如。

95%这个数值感受有点高了，不过仍是说明了调试工具使用的重要性。因此我抽空把DevTools里面的Document给阅读了一遍，增强了一下本身的调试能力。

HTML、CSS

• Alt + Click 展开html全部节点

有时html的节点比较多，除了直接检查（Ctrl + Shift + C）页面元素来定位，还能够经过Alt + Click来展开。

• Styles和Computed标签栏中Filter要用起来

• 改变CSS值的快捷键

  • Alt+Up + 0.1
  • Up + 1
  • Shift+Up + 10
  • Ctrl+Up + 100

• Style栏中，.cls能够添加新的类名，也能够切换

这边想到了以前直接调试加类名改变样式的状况，都是在左边的DOM节点那边直接编辑、删除，如今想一想太蠢了。

• 更多操做工具条

添加颜色和阴影时能够用到

• 颜色选择

吸管工具能够获取页面上的颜色，若是你想获取网页上的颜色又没安装chrome插件的话，能够试试这个方法

JavaScript

• 能够直接在 DevTools UI 内编辑 JavaScript 代码， Ctrl+S保存更改

这个方法通常只能改会重复执行的代码，只执行一次的改了话刷新的话又恢复到原来的代码。

• 用断点暂停代码

断点类型	使用场景
行断点	特定区域的代码
条件行断点	特定区域的代码，可是只在某些条件下
DOM	改变、移除元素时，或者删除子节点
XHR	URL包含某个字符串
事件监听	在事件执行后触发
异常	抛出的异常或者未抛出的异常
函数	某个特定函数执行时 debug(fn)

下面具体介绍你可能没用到断点方法：

条件行断点：在左边行号区域右键， 选择 Add conditional breakpoint.

DOM改变断点：

XHR断点: 请求包含某个字符串时，会在XHR请求的地方断点。

事件监听断点：事件触发后产生断点

函数断点:

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();
复制代码

• 调试中忽略一些代码
  • 打开文件，右键选择Blackbox script
  • 从执行栈中，右键操做

调试中若是能保证第三方库没问题，调试就能够直接忽略文件，步进步出的时候就快一些。

• 格式化压缩文件

Log

• $()是document.querySelector()

在控制台中像jquery同样快速查找元素

• $0 返回最近一次选择的元素或 JavaScript 对象

• console.table() 以表格形式输出，经常使用与打印后端返回的列表值

• console.dir() 能够显示一个对象全部的属性和方法。

这个通常用来输出DOM元素或者对象，还有一个技巧就是能够打印原生对象的属性和方法console.dir(Number)

• keys(object) 获取对象的因此key值

• console.group() console.groupEnd() console.groupCollapsed() 信息按组输出在控制台

• console.count() 函数调用次数

• console.time() 和 console.timeEnd() 跟踪代码执行点之间通过的时间。

• getEventListeners(document) 获取document元素上的因此事件监听

总结

调试工具中还有分析运行性能、分析网络情况、分析内存状况，这些实践性比较强一些，最好仍是本身去看下文档，在找工做中一些项目练习一下。

其实，你可能看完了官方文档，可是平时调试仍是和往常一下用之前的方法，因此还在须要在调试中多想一想有没有更好的调试方法，固然前提是你接触过这些方法。