天天看点

chrome浏览器安装react-devtools

    react-devtools是react开发时的一个浏览器插件,对于各大主流高级浏览器都有扩展程序可以安装,官方的地址默认是https://github.com/facebook/react-devtools,但是后来它又集成到了react项目中,所以通过源码编译安装起来给人一种错觉,到底是安装react-devtools还是react。如果是直接git clone,还需要切换分支v3,然后构建。

    这里推荐直接通过码云上的react-devtools仓库来获取源代码进行构建,原因一个是克隆速度,一个是不用切换分支,克隆之后就可以使用。地址如下:https://gitee.com/mirrors/react-devtools.git

    克隆到本地之后:

cd react-devtools
cnpm i
yarn build:extenstion
           

   构建成功的截图如下:

chrome浏览器安装react-devtools

    根据提示,我们可以运行测试:

chrome浏览器安装react-devtools
chrome浏览器安装react-devtools

    这个测试默认会打开chrome浏览器,并且显示react官网主页。浏览器右上角会有一个react的icon,表示扩展程序构建成功且可以安装。但是这个安装,貌似是临时的,如果重新打开浏览器,这个插件并没有显示出来,扩展程序里面也没有,这仅仅是一个测试。

chrome浏览器安装react-devtools

    真正的安装,我们需要在扩展程序这个页面,选择加载已解压的扩展程序,找到react-devtools/shells/chrome/build/unpacked目录即可。

chrome浏览器安装react-devtools

    扩展程序安装成功,最后检验,需要运行react的项目,然后打开浏览器,打开开发者工具选项,查看到多了一个React的Tab:

chrome浏览器安装react-devtools

    到此,可以说react-devtools就是安装成功,并且可以使用了。