Study - Chrome的开发者模式及debug mode的使用

开发者模式

• 右键–审查元素
• 快捷键：
  • windows7: f12
  • windows10: fn+f12
  • mac: fn+f12

元素面板（Elements）

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

添加、启用和停用CSS类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类.从这里，可以执行以下操作：

• 启用或停用当前与元素关联的类
  
• 向元素添加新类
  

添加或移除动态样式（伪类）

点击.hov按钮可以在元素上手动设置动态伪类选择器（例如 :active、:focus、:hover 和 :visited）

快速向样式规则添加背景色或颜色

Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式

使用 Color Picker 修改颜色

要打开 Color Picker，请在 Styles 窗格中查找一个定义颜色的 CSS 声明（例如 color: blue）。声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker

控制台面板（Console）

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互

• 控制台输出日志
  通过JS代码或者命令行可以将日志信息输出到控制台
  命令行：

  • console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用
  • console.warn 显示带有黄色小图标的警告信息
  • console.error 显示带有红色小图标的红色的错误信息
  • console.assert 当第一个参数为false时，才会显示第一个参数的值
    
  • console.table 用于在控制台输出表格信息
    
    可以根据JS条件判断输出不同的日志信息
    
    注：当需要换到下一行而不是回车的时候，按Shift+Enter。

• 控制台交互

  • 选择元素

  快捷方式	描述
  $()	返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
  $$()	返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
  $x()	返回与指定的XPath相匹配的所有元素的数组