有用却易无视的DevTools调试技能

2019年8月31日 180次阅读 来源: 夜暁宸

Chrome DevTools 调试运用
demo地点

作为前端开辟者，免不了要和 DevTools 打交道,闇练的运用 DevTools 能够大大提高我们的工作效力。然则，开辟者东西的运用并没有获得充足的注重。

工欲善其事必先利其器，更何况，东西的进修本钱比专业技能的进修本钱小的多。

Chrome 有差别版本，假如想第一时刻体验一些新的功用能够运用除稳固版本的别的版本。
《有用却易无视的DevTools调试技能》

本次重要围绕着 Workspace 和 Blockbox script 这两点来觉得它们带来的方便。

Workspace

Workspace 重要照样将浏览器关联当地文件，使得浏览器具有读写当地文件的权益。

跟着前端的生长，营业和逻辑也愈来愈庞杂。还好打包紧缩东西应运而生，另有 sourceMap 的运用，又让我们从紧缩殽杂的代码中有了看源码的体验。

此时我们依旧能够 DevTools 里 Sources 页签里的 Filesystem 页签增加当地文件夹，从浏览器里修正当地文件。

《有用却易无视的DevTools调试技能》

这个功用也许另有点用，然则照样不如人意。因为修正后的文件须要革新后才显现变动，而文件被变动后，打包东西须要从新编译，编译时刻也许很长也许很短，而且页面被被团体革新了，给人一种很僵硬的觉得。

不过，还好有 热组件替代 这么一说。给我们的应用顺序加上这货以后，我们的开辟将会越发丝滑😉。

热组件替代

以 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)
        })
    }

至此，热组件替代革新完成，让我们再次觉得下。

《有用却易无视的DevTools调试技能》

经由过程以上展现，我们能够发明，全部界面只是部分被替代了，过渡得很天然。这应当才是我们想要的结果✨。插一句，在 Network 页签中，Preserve log 一定要勾选上☑️。如许的话，纵然页面革新了，也是有纪录📝的，非常方便在页面跳转革新时运用。

Blockbox script

假如说以上是提高了开辟上的效力，那末这个 Blockbox script 功用将会在定位上省下不少时刻。

在断点排查题目时，代码总会在差别的位置切换。然则，常常会碰到种种不是我们顺序里的代码跳出来。不过，只需我们把该文件标记为 Blockbox script 时，下次就不会再涌现了。固然这只是最基本的操纵，要想充分利用这个功用，照样要合营别的功用的运用。

Call Stack

挪用栈在排查题目是很有效的，我们晓得，函数的实行是有实行上下文的，函数由最外层到最内层顺次压入栈中，在实行的时刻，顺次从栈中弹出。如许我们就能够从最内层沿着链找到最外层。

排查毛病时也是这个原理，我们常常碰到不知名的毛病❌，多是挪用第三方的，也多是底层，总之不是我们写的代码（我信你个鬼😏）。

碰到这类状况就能够尝试用挪用栈的要领，既然实行了，肯定是有挪用的处所，我们能够沿着链去找泉源（十有八九是我们本身写的代码😏）。不过挪用栈中能够混淆了不是我们本身写的函数，这时刻 Blockbox script 就派上用场了。

《有用却易无视的DevTools调试技能》

Event Listener Breakpoints

能够在熟习一个新的项目时，想晓得某个 dom 绑定的处置惩罚事宜。Sources 页签下的 Event Listener Breakpoints 能够定位到代码详细的位置，不过和上次一样，许多别的代码殽杂黑白，我们须要把它们标记为 Blockbox script。标记完后，下次就会直接在本身的代码里停住了。

《有用却易无视的DevTools调试技能》

Initiator

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

在 Network 页签中，纪录的都是要求的数据。在开辟的时刻常碰到这两种状况，
1⃣️：接口报错，在 Network 页签中能够看到全部URL被标红了，要疾速定位到挪用接口的处所。
2⃣️：要求出去了，请看看响应时，怎样处置惩罚数据。

实在，两个实质上都是一样，就是疾速定位代码。疾速定位在大型项目中照样挺贫苦的，除非营业比较熟，剩下只能全局搜刮了。

还好，Network 页签下的 Initiator 也有相似挪用栈的东西，我们能够在其列表中找到，Blockbox script 的功用依旧时屏障无关的代码。

《有用却易无视的DevTools调试技能》

补充

除了以上另有许多调试技能，

1⃣️：有时刻我们看见了掌握有毛病❌输出，却不晓得是那里的题目。或者是掌握有报错❌，但一闪而过，没法捕获。这时刻能够尝试运用非常断点的功用(最右➡️的谁人)。倒数第二个，是用来恢复函数实行的，使断点不起作用。

《有用却易无视的DevTools调试技能》

2⃣️：数据量过大时，能够因为某一条数据的题目致使了页面衬着题目。假如打断点的话，数据量太大了，每一次都跳到轮回的处置惩罚逻辑中会很贫苦。不过断点是支撑前提断点的，还能够打印我们想要的变量（在最新的 Chrome dev版本中，已零丁拎出来了）。

《有用却易无视的DevTools调试技能》

3⃣️：有时刻页面加载过快，都来不及看邃晓页面是怎样展现的。比方跳转题目，比方模仿网速慢、电脑机能卡慢题目。（这里十有八九是并发引发的竞态题目😏）右下角 Oneline 可自选形式。

《有用却易无视的DevTools调试技能》

4⃣️：……

    原文作者：夜暁宸
    原文地址: https://segmentfault.com/a/1190000018446480
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞