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

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞