zoukankan      html  css  js  c++  java
  • (1). React developer tools

    已经可以简单的写一些React代码了,在视频中,我也是经常使用console.log这种很二的形式来调试程序。其实React在浏览器端是有一个调试工具的,这就是React developer tools,这个是React人必下的一个调试工具。这节课就主要学习一下React developer tools的下载和简单使用。

    下载React developer tools

    这个需要在chrome浏览器里进行

    点击浏览器地址栏最右边的...,然后选择更多工具,然后选择扩展程序。

    点击打开chrome网上应用店,直接在搜索框里搜索React,出现的第一个就是。

    点击添加至Chrome,然后就是等待了..........

    React developer tools的三种状态

    React developer tools有三种颜色,三种颜色代表三种状态:

    1. 灰色: 这种就是不可以使用,说明页面不是又React编写的。
    2. 黑色: 说明页面是用React编写的,并且处于生成环境当中。
    3. 红色: 说明页面是用React编写的,并且处于调试环境当中。

    React developer tools使用

    打开浏览器,然后按F12,打开开发者工具,然后在面板的最后一个,你会返现一个React,这个就是安装的插件了。

    在这里你可以清晰的看到React的结构,让自己写的代码更加清晰,你还可以看到组间距的数据传递,再也不用写console.log来测试程序了。

  • 相关阅读:
    LeetCode 38. 外观数列
    LeetCode 33. 搜索旋转排序数组
    LeetCode 31. 下一个排列
    LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置
    LeetCode 29. 两数相除
    LeetCode 22. 括号生成
    LeetCode 1. 两数之和
    LeetCode 17. 电话号码的字母组合
    LeetCode 18. 四数之和
    LeetCode 16. 最接近的三数之和
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/13141513.html
Copyright © 2011-2022 走看看