美文网首页React学习笔记
Chrome添加React Devtools调试工具

Chrome添加React Devtools调试工具

作者: 天才ok酱 | 来源:发表于2019-06-18 11:31 被阅读0次

    1、去git上下载react-devtools文件到本地

    https://github.com/facebook/react-devtools

    2、进入到react-devtools-master文件夹,用npm安装依赖

    npm --registry https://registry.npm.taobao.org install
    

    3、安装依赖成功后,我们便可以打包一份扩展程序出来

    npm run build:extension:chrome 
    

    出现Unpacking extension打了个勾就说明安装成功了
    并且会在你的项目目录中生成一个新的文件夹,shells -> chrome -> build -> unpacked文件夹

    4、打开chrome扩展程序chrome://extensions/,加载已解压的扩展程序,选择第3步中的生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools,并在你的浏览器右上角会有个react标志, 就表示成功啦。

    5、可以创建一个项目在浏览器上就可以看到一个小图标啦

    image.png

    这个是开发模式就是红色背景,生产模式就会变深色哦~

    相关文章

      网友评论

        本文标题:Chrome添加React Devtools调试工具

        本文链接:https://www.haomeiwen.com/subject/lbgxqctx.html