(1)你真的会用Chrome devtool吗？

本文首发于个人我的博客: teobler.com ,转载请注明出处

这是一个介绍Chrome devtool的系列文章，虽然这是一个前端小伙伴们都很熟悉的东西，可是我相信它的不少还不错的功能其实或许你并不知道，这个系列的文章会涉及到: 代码修改、debug、network、audit、monitor等等。

第一篇咱们会介绍如何在devtool中作编辑和debug。

Editing

编辑HTML和CSS

首先是你们熟悉的HTML和Style，在elements的tab下，只须要双击某个元素的内容便可进入编辑模式，这时你能够随意修改其中的内容，同理在其右边的style栏，你可使用相同的方式修改CSS样式。

保存你本身的调色板

在style栏中，点击任意颜色图标，你就能够打开一个调色板，此时再点击第二行的箭头，你就能打开一个预设的调色板保存界面。

里面预先保存了Material UI的配色方案，你也能够保存你本身的配色方案，这对于本身一我的想要开发一个项目却为配色方案捉急的开发者提供了便利，你能够平时收集一套你本身的配色方案进行保存并随时取用，由于这个调色板还提供了当前网站的配色方案，也就是说你能够打开一个你以为配色不错的网站保存它的配色。

滚动某个元素到页面内

这个功能对于一些无限滚动的网站开发更有用，好比你在elements tab下找到了你的目标元素，可是你想看看它长得像不像你想象中的样子，没有这个功能的话你就须要一直找，此时你只须要右键那个元素，选择Scroll into view便可。

隐藏和显示元素

你能够在某个元素上右键选择隐藏某个元素，其原理是Chrome为其加了一个visibility为hidden的class，右键又能够显示，固然你还能够选择删除，想让它回来的话ctrl/command z便可。

元素状态的改变

如图所示，选中某个元素后再点击:hov能够打开一个状态面板，这能够帮助你看清楚不一样状态下该元素的CSS样式。

显性样式

在一个复杂的项目中，可能同一个元素上你覆盖了不少个样式，就拿body元素来讲，浏览器有一个默认的样式，而后可能你使用了一些reset的样式，同时你在某个文件中还加入了别的样式，若是这个时候你想知道body的样式到底是哪里来的，若是你用眼睛在styles的tab里面找就会很难。

这个时候咱们能够选择第二个tab Computed 在这个tab里是最终显示在页面上的样式，而且若是你点击某个样式右边的按钮，就会跳转回style tab并把这个生效的样式高亮出来，帮助你快速找出准确的class。

查找事件监听

这个功能能够找到当前页面中的全部时间监听函数，而且点击右边的超连接能够跳转到对应的代码，这个功能在你“知道某个bug是由于某个监听引发的，可是不知道这个监听函数在哪”的时候颇有用。

改变颜色格式

在任意颜色上按住shift + 左键能够改变颜色的格式(rgb, hsl, hex)，能够方便的帮助你改变网站的颜色与设计相一致。

源代码format

一般在prod环境的代码都通过压缩，这会致使咱们在看源代码的时候全部代码被压缩到同一行致使不可读，这时咱们能够点击format按钮使得代码变回在编辑器中的样子。

DOM断点

有一些代码会影响DOM的渲染，而后若是这些代码产生了相应的bug，好比渲染出来的DOM不是你想的哪样，这时咱们能够在DOM上打断点，这时若是DOM发生了改变，Chrome就会跳转的相应的代码的debug界面，是一个方便的debug方式。

能够选择在 子节点改变 / 属性改变 / 节点被删除 时进行断点调试。

元素选择历史

在HTML的界面，你选中某一个元素，而后打开console界面，输入$0将输出你刚刚选中的元素，选择器。

这里有一个小练习看你能不能用上边的知识完成。

debug

第二个咱们用的比较多的功能就是debug了，这篇文章咱们会介绍如何使用Chrome devtool来进行debug。

断点调试方法

第一种debug的方式是当你在本地启动了你的dev server，而且在你想要打断点的代码处写上debugger关键字，那么当你打开devtool访问你的页面并刷新页面时你就能停在debugger的地方。

第二种方式是打开devtool的sources tab，找到你想debug的文件(cmd + p / cmd + shift + p)，而后在行号上点击，就会加上一个蓝色标记，这时若是你刷新页面也能够进入断点调试。

调试面板结构

• Watch能够添加变量或者一段代码进行一些运算，这些变量或者运算会随着你的断点的变化而变化进行实时更新，方便进行调试，须要注意的是若是当前断点的上下文中找不到这个变量，会显示undefined
• Call Stack就是调用栈，能够看到当前断点的调用信息，点击不一样的行，能够跳转到不一样的调用处
• Scope显示了当前你能够访问的全部上下文
• Breakpoints显示了你的全部断点，能够方便的在各个断点处跳转，也能够当作开关来用，能够在此处选择忽略哪些断点，或是直接删除不须要的断点
• XHR Breakpoints能够添加网络请求的断点
• DOM Breakpoints就是以前讲过的DOM断点
• 同理Event Listener Breakpoints能够在触发相应的事件时产生断点进行调试

跳过黑盒代码

有时候咱们会想要看看咱们的当前的函数调用栈，可是一般来讲咱们会在咱们的app里面引入许多第三方库，好比React，那么在你看调用栈的时候，你就会进入到React的调用栈中，然而咱们并不想看React，因此咱们能够选择隐藏这些调用栈:

或者你嫌麻烦的话，能够直接在devtool的设置里将整个库都给隐藏:

条件断点和XHR断点

想象一个场景，咱们的某个地方用到了咱们代码中的一个通用函数，可是用的时候出问题了，咱们想打个断点看看，可是因为这是一个通用的函数，咱们刷新页面后这个函数会被调用屡次，可是咱们只关心其中的某一次，这个时候咱们就须要跳过咱们不关心的调用，除了一直手动点跳过按钮，还能怎么办呢？

右键行号，选择conditional breakpoint而后输入你的条件，好比 user.name === "小明"，这时只有当知足相应条件的时候才会断点。

而假如咱们将上面的例子运用在网络请求上，当咱们向某个特定的url发送请求时，产生一个断点，咱们就能够在右边的XHR/Fetch Breakpoints中添加相应的url。

不过须要注意的是，此时的断点可能会断在Chrome的源码中或者别的什么地方，咱们须要在Call Stack中找到正确的文件。

欢迎关注个人公众号