前言

领导骂你开发效率低怎么办？当然是怼回去了，你个xxx，有本事你来啊，就知道xxxx……，如果你真做了的话，很好，马上获得了一个找新工作的机会

哈哈哈，开玩笑，开玩笑，大家千万别模仿，解析进入正题

背景

在工作当中，你是否遇到过领导催你进度，骂你速度慢，为啥到现在还没做完，我在键盘键盘上撒把米，鸡都比你强。

接收新项目的时候，需要进行快速上手开发，由于刚进入项目组不了解项目导致速度慢

技术问题，基础不扎实，没办法快速融入（这个可能就没什么其他好办法了，先把基础打扎实把）

还有一些其他各种各样的原因……

相信大家或多或少都会遇到以上问题的其中一种，那我们遇到这些问题，该如何解决呢？如何才能加快我们的开发和调试速度，有没有什么可以帮助到我们的？

嘿嘿，当然有，现在就来更大家分享我平时使用到的三个工具，绝对对你有帮助！

神器一 vue-devtools

相信做vue开发的同学，对这个浏览器插件都不会陌生，可能大家平时使用比较多的是关注dom的结构，路由信息以及一些其他信息，现在我就来给大家分享他的另一个用法，如何通过在浏览器中选中元素直接定位到我们的我们编辑器对应的组件。

使用方式也比较简单，直接在google的插件市场，搜索 vue-devtools

然后运行项目的时候,打开我们的控制台，选择vue，按照下面我标的步骤来

先点击第一个按钮进行选中
第二步选择页面的元素或者组件
第三步可以看到我们对应的选中组件的详细结构
第四步就直接点击按钮会跳转到我们对应的编辑器对应的组件里面，

怎么样，是不是很方便

点击之后的效果

神器二 react-dev-inspector

刚刚介绍了vue玩家的，那么我们react玩家是否也有对应的类似插件呢，哎嘿，当然有！ react-dev-inspector这个是针对react玩家的插件，直接通过npm 进行安装就行

npm i react-dev-inspector

但是这个需要我们稍微配置一下，不过都是很简单的配置

import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'

const isDev = process.env.NODE_ENV === 'development'

export const Layout = () => {
  // ...

  return (
    <>
      <YourComponent />

      {isDev && (
        <Inspector
          // props see docs:
          // https://github.com/zthxxx/react-dev-inspector#inspector-component-props
          keys={['control', 'shift', 'command', 'c']}
          disableLaunchEditor={true}
          onClickElement={({ codeInfo }: InspectParams) => {
            if (!codeInfo?.absolutePath) return
            const { absolutePath, lineNumber, columnNumber } = codeInfo

            window.open(`vscode://file/${absolutePath}:${lineNumber}:${columnNumber}`)

            // you can change the url protocol if you are using another IDE, like for WebStorm:
            // window.open(`webstorm://open?file=${absolutePath}&line=${lineNumber}&column=${columnNumber}`)
          }}
        />
      )}
    </>
  )
}

而且这个插件支持我们的自定义打开方式，支持多种配置和编辑器，这个是github地址，大家有兴趣的可以去看看github.com/zthxxx/reac…

神器三 -- nuxt-devtools

如果你现在正在使用服务端渲染框架 nuxt，怎么办呢，哎嘿，放心，nuxt-devtools 也为你准备好了，

总结

这三款工具对于我们日常的开发确实能提升很大的效率，特别是一个项目复杂的时候，或者是刚去公司接收一个新项目的时候，他们能给我们的工作效率带来极大的提升，这个时候是不是就可以用你的速度来回怼你的领导了，“看什么看，已经解决了！" hhh

如果大家有什么好的插件或者其他好用的好玩的工具，欢迎评论区讨论呀！
如果大家对这些源码感兴趣，下期咱们也可以出一期源码解析,里面挺多有意思的点的，看完绝对能有一波新的认知

领导骂你开发效率低？或许你可以试试他们！

前言

背景

神器一 vue-devtools

神器二 react-dev-inspector

神器三 -- nuxt-devtools

总结