实用却易忽视的DevTools调试技巧

Chrome DevTools 调试使用 demo地址

做为前端开发者，免不了要和 DevTools 打交道,熟练的使用 DevTools 可以大大提升咱们的工做效率。然而，开发者工具的使用并无获得足够的重视。

工欲善其事必先利其器，更况且，工具的学习成本比专业技能的学习成本小的多。

Chrome 有不一样版本，若是想第一时间体验一些新的功能可使用除稳定版本的其它版本。

本次主要围绕着 Workspace 和 Blackbox script 这两点来感觉它们带来的便利。

Workspace

Workspace 主要仍是将浏览器关联本地文件，使得浏览器拥有读写本地文件的权利。

随着前端的发展，业务和逻辑也愈来愈复杂。还好打包压缩工具应运而生，还有 sourceMap 的使用，又让咱们从压缩混淆的代码中有了看源码的体验。

此时咱们依然能够 DevTools 里 Sources 页签里的 Filesystem 页签添加本地文件夹，从浏览器里修改本地文件。

这个功能或许还有点用，可是仍是不如人意。由于修改后的文件须要刷新后才能显示变更，而文件被更改后，打包工具须要从新编译，编译时间或许很长或许很短，并且页面被被总体刷新了，给人一种很生硬的感受。

不过，还好有 热组件替换 这么一说。给咱们的应用程序加上这货以后，咱们的开发将会更加丝滑😉。

热组件替换

以 create-react-app 为例🌰（最新版本），步骤以下。也能够看看👀官方怎么说react-hot-loader.

1⃣️：

npm install react-hot-loader --save-dev
复制代码

2⃣️：在 entry 中添加 isEnvDevelopment && 'react-hot-loader/patch',

3⃣️：在 oneOf 中 babel-loader 的 plugins 中添加 ['react-hot-loader/babel'],

4⃣️：在入口文件添加如下内容

import { AppContainer } from 'react-hot-loader'

const root = document.getElementById('root')
const render = (Component) => {
    ReactDOM.render(
        <AppContainer> <Component/> </AppContainer>,
        root
    )
}

render(App)

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default
        render(NextApp)
    })
}
复制代码

至此，热组件替换改造完成，让咱们再次感觉下。

经过以上展现，咱们能够发现，整个界面只是局部被替换了，过渡得很天然。这应该才是咱们想要的效果✨。插一句，在 Network 页签中，Preserve log 必定要勾选上☑️。这样的话，即便页面刷新了，也是有记录📝的，很是方便在页面跳转刷新时使用。

Blackbox script

若是说以上是提升了开发上的效率，那么这个 Blackbox script 功能将会在定位上省下很多时间。

在断点排查问题时，代码总会在不一样的位置切换。可是，常常会遇到各类不是咱们程序里的代码跳出来。不过，只要咱们把该文件标记为 Blackbox script 时，下次就不会再出现了。固然这只是最基本的操做，要想充分利用这个功能，仍是要配合其它功能的使用。

Call Stack

调用栈在排查问题是颇有用的，咱们知道，函数的执行是有执行上下文的，函数由最外层到最内层依次压入栈中，在执行的时候，依次从栈中弹出。这样咱们就能够从最内层沿着链找到最外层。

排查错误时也是这个道理，咱们常常遇到不知名的错误❌，多是调用第三方的，也多是底层，总之不是咱们写的代码（我信你个鬼😏）。

遇到这种状况就能够尝试用调用栈的方法，既然执行了，确定是有调用的地方，咱们能够沿着链去找源头（十有八九是咱们本身写的代码😏）。不过调用栈中可能混杂了不是咱们本身写的函数，这时候 Blackbox script 就派上用场了。

Event Listener Breakpoints

可能在熟悉一个新的项目时，想知道某个 dom 绑定的处理事件。Sources 页签下的 Event Listener Breakpoints 能够定位到代码具体的位置，不过和上次同样，好多其它代码混淆视听，咱们须要把它们标记为 Blackbox script。标记完后，下次就会直接在本身的代码里停住了。

Initiator

其实和 Event Listener Breakpoints 并排的 XHR/fetch Breakpoints 也颇有用，不过和接下来要讲的功能比，就显得鸡肋了。

在 Network 页签中，记录的都是请求的数据。在开发的时候常遇到这两种状况，

1⃣️：接口报错，在 Network 页签中能够看到整个URL被标红了，要快速定位到调用接口的地方。

2⃣️：请求出去了，请看看响应时，如何处理数据。

其实，两个实质上都是同样，就是快速定位代码。快速定位在大型项目中仍是挺麻烦的，除非业务比较熟，剩下只能全局搜索了。

还好，Network 页签下的 Initiator 也有相似调用栈的东西，咱们能够在其列表中找到，Blackbox script 的功能依然时屏蔽无关的代码。

补充

除了以上还有不少调试技巧，

1⃣️：有时候咱们看见了控制有错误❌输出，殊不知道是哪里的问题。或者是控制有报错❌，但一闪而过，没法捕捉。这时候能够尝试使用异常断点的功能(最右➡️的那个)。倒数第二个，是用来恢复函数执行的，使断点不起做用。

2⃣️：数据量过大时，可能因为某一条数据的问题致使了页面渲染问题。若是打断点的话，数据量太大了，每一次都跳到循环的处理逻辑中会很麻烦。不过断点是支持条件断点的，还能够打印咱们想要的变量（在最新的 Chrome dev版本中，已单独拎出来了）。

3⃣️：有时候页面加载过快，都来不及看明白页面是怎么展现的。好比跳转问题，好比模拟网速慢、电脑性能卡慢问题。（这里十有八九是并发引发的竞态问题😏）右下角 Oneline 可自选模式。

4⃣️：......