devexpress 自动显示和浮动panel

文章目录

• 各个面板的功能介绍

• 常用Tab中的Element
• 常用Tab中的Console
• 常用Tab中的Source
• 常用Tab中的Network
• 常用Tab中的Application

• CSS调试
• JS调试
• 一些小技巧

• 网络
• 渲染

各个面板的功能介绍

• 打开Dev Tool
  快捷键 F12
• 打开命令菜单
  快捷键 ctrl+shift+P
  输入theme 可以切换light和dark theme；



• 输入screenshot 可以用来截图；



• 输入dock，选择调试器的位置；

常用Tab中的Element

• 给元素添加样式
• 让:hover常驻 悬停
• 编辑class
• 复制样式
• 观察flex布局
• 观察grid布局

常用Tab中的Console

快捷键 ctrl+shift+J

• 执行语句
• $_ 返回上一条语句的执行结果
• $0 上一个选择的DOM结点
• console.log() 常用：error warn table clear group time
• log级别筛选
• 监测某个变量

常用Tab中的Source

参考 JS调试

常用Tab中的Network

常用Tab中的Application

• Local Storage
• Session Storage
• Cookies

CSS调试

• 网页元素，右键检查，即可看到右边元素

• 查询DOM树
  Elements面板 查询方式：Ctrl+F 搜索

1. 直接文字搜索 例如
2. css选择器搜索 例如 section#section_one
3. xpath搜索 例如 //section/p

• Console
  定位到元素节点：inspect(element)
  例如：inspect(document.getElementById(‘est_en’))

JS调试

• 代码中写debugger 精准定位和调试
• Sources中打断点
• Enable code folding 折叠代码



• 
  
• Elements中元素发生改变的时候 断点调试



• 
  
• 事件监测断点 Sources-Event Listener Breakpoints



• 
  
• 忽略源代码调试 Sources-Call Stack - add script to ignore list



• 
  

一些小技巧

网络

查询到ajax请求信息，如果是每秒定时器，那每秒都有信息提示。

渲染

F12顶上设置-渲染-突出显示绘制区域

配置后，当数据进行刷新渲染的时候，元素呈现绿色框