首页 > 电脑专区 > 电脑教程 >

react调试工具react-developer-tools 怎样调试

来源:互联网 2023-02-21 19:48:10 版权归原作者所有,如有侵权,请联系我们

现在在做前端开发时,很多页面都使用react来做组件开发了,那么你知道react的调试工具是怎么使用的吗?下面我们来简单介绍一下。AVH办公区 - 实用经验教程分享!

方法/步骤

  • 1

    当你打开的站点页面有使用react技术的话,你的浏览器调试工具图标就会亮起来的。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 2

    但点击这个图标只有一个提示信息,并没有具体的调试内容的。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 3

    我们应该是右键点击页面空白的地方。点击「查看元素」。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 4

    这样在浏览器的调试工具里,在最右边有一个react的面板,点击它。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 5

    点击后,这里就会列出页面上所有使用了react技术生成的组件。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 6

    展开一个组件,就可以看到具体完整的react代码了,可以查看是否与预期显示一样。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 7

    而在右边,可以看到react各状态下的数据,在这里可以查看调试react的数据是否正常。AVH办公区 - 实用经验教程分享!

    react调试工具react-developer-tools 怎样调试AVH办公区 - 实用经验教程分享!

  • 7此文章未经授权抓取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!AVH办公区 - 实用经验教程分享!


    标签: 操作系统HTML试工怎样

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号