组件编程-开发环境

开发者工具chrome在线下载

• chrome访问下载官网地址

• 搜索栏搜索

• 点击添加到chrome

• 点击状态栏, 找到扩展图标, 并将开发者工具固定在状态栏上

工具图标介绍

• 灰白色: 表示该页面不是使用React开发

• 红色且有小瓢虫: 表示该React页面处于开发者模式, 未使用脚手架编译部署

• 黑蓝色: 表示该React页面正常部署

开发工具介绍

通过F12进入网页后台, 找到扩展中的两个开发者工具, 如下图示

Components-组件

该工具展示了当前页面使用了哪些组件, 组件拥有哪些属性

Profiler-分析器

该工具展示了当前页面各资源加载等性能信息