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 安全面板

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

相关推荐
再学一点就睡5 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构6 小时前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
炒毛豆6 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_96 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
红尘客栈26 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
前端大卫7 小时前
Vue 和 React 受控组件的区别!
前端
Hy行者勇哥7 小时前
前端代码结构详解
前端
练习时长一年8 小时前
Spring代理的特点
java·前端·spring
水星记_8 小时前
时间轴组件开发:实现灵活的时间范围选择
前端·vue
2501_930124709 小时前
Linux之Shell编程(三)流程控制
linux·前端·chrome