补充一些使用chrome的开发者工具调试elements

情景描述

• 最近总是有很多需求去覆盖antd的样式出现了一些问题
• 第一个问题：总是发现自己加的样式在元素的style面板中不存在，想知道到底自己定义的样式有没有被打包进来
• 第二个问题：想要覆盖ant-d的样式首先得知道这个样式的classname，但是对于一些下拉列表，你想要知道这个下拉列表的classname比较困难
  • 一旦下拉列表失焦就会消失因此很难找到classname

解决方案

针对第一个问题

• 打开Elements面板
• 选中左边的Dom树
• 然后使用快捷键commmand+ f
• 输入你自己定义的类名
• 就可以找到对应的style
• 由此判断是否将class打包进来
  • 如果存在：说明打包进来了（可能优先级收到影响）
  • 如果不存在：
    • 样式没打包进来
    • 样式的classname被改名

针对第二个问题

• 首先显示下拉列表
• 鼠标放在列表中点击右键
• 选中inspector
• 这时候会直接在Elements dom树中选中这个元素
• 这时候你就可以到这个元素的classname
• 但是可能你希望这个列表会一直显示在这里方便你调试
• 所以你可以对比下拉列表消失和存在的classname的区别进行classname修改

例子：
下拉列表有一个hidden的class，每次下拉列表消失这个classname就会出现，因此移除了这个classname之后下拉列表就不会再消失了