Chrome Devtool

Elements 元素面板

使用元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面

  • 操作 DOM:复制,隐藏,展示,调整位置,设置断点,hover展示,shadowDOM
  • 编辑样式:增删改,hoveractive,computed快速定位,颜色选择器。
  • 检查和调整页面等

Console 控制台面板

用来记录诊断信息、操作 DOM 或者与 javaScript 交互

  • 操作 DOM,复制,表哥
  • 控制台常用操作 及与javaScript交互 monitorEvents函数,watch 小眼睛监听

Sources 源代码面板

主要用来设置断点调试 JavaScript,或者通过Workspaces(工作区)连接本地文件夹来使用开发者工具的实时编辑器

  • 快速定位文件
  • 断点调试,条件断点,网络断点
  • 监听功能 watch
  • 使用开发者工具的Workspaces(工作区)进行实时编辑
  • 其他,远程本地关联

Networks 网络面板

可以查看网络请求和下载的资源文件,利用它优化网页加载性能

  • 网络面板基础使用
  • 网络带宽限制和资源时间轴

Performance 性能面板

使用时间轴面板记录和查看网站生命周期内发生的各种事件,从而提高页面运行时性能

  • 查看性能
  • 分析运行时性能
  • frames和main

Memory 内存面板

可以提供比时间轴面板更多信息,例如跟踪内存泄漏

  • JavaScript CPU分析器
  • 内存堆区分析器

Application 应用面板

可用来检查加载的所有资源,包括IndexedDB 与 Web SQL数据库,本地和绘画存储,Cookie,应用程序缓存,图像,字体和样式表

Security 安全面板

使用安全面板调试混合内容问题,证书问题等

相关推荐
朱程1 小时前
AI 编程时代手工匠人代码打造 React 项目实战(四):使用路由参数 & mock 接口数据
前端
PineappleCoder1 小时前
深入浅出React状态提升:告别组件间的"鸡同鸭讲"!
前端·react.js
wycode1 小时前
Vue2源码笔记(1)编译时-模板代码如何生效之生成AST树
前端·vue.js
程序员嘉逸2 小时前
LESS 预处理器
前端
橡皮擦1992 小时前
PanJiaChen /vue-element-admin 多标签页TagsView方案总结
前端
程序员嘉逸2 小时前
SASS/SCSS 预处理器
前端
咕噜分发企业签名APP加固彭于晏2 小时前
腾讯云eo激活码领取
前端·面试
子林super2 小时前
MySQL 复制延迟的排查思路
前端
CondorHero2 小时前
轻松覆盖 Element-Plus 禁用按钮样式
前端
源猿人2 小时前
nginx代理如何配置和如何踩到坑篇
前端·nginx