开发者工具安装:
压缩包解压后,文件夹内的文件如下:
打开谷歌游览器 - 更多工具 - 扩展程序 - 加载已解压的扩展程序 - 选择文件夹
安装成功:
点击右上角的扩展程序 - 选中图钉,可以把工具固定在界面
打开之前写的html,看箭头
发现右上角的图标亮了,是红色的上面还有个小虫子,这个表示当前处于开发的状态并不是打包后的
那么打包部署运行的图标是什么样子的呢,以美团举例,这种的图标才是正常的
作用:
打开之前写的html,审查元素F12,发现多了两个按钮:
Components:Component表示组件,s表示复数,可以观察网页由多少组件组成的,每个组件里都有什么属性
Profiler:用于记录网站的性能,渲染用了多久,那个组件加载慢