chrome浏览器开发者工具的使用

• 调整窗口位置：
  点击右上角三个点，Dock side
• 在代码中定位页面元素：
  点击左上角箭头，点击页面元素
• Net Work:
  跟踪页面所有文件加载情况以及加载时间
• 调整html，css样式：
  Elements，选中对应元素，直接在线修改html，css代码，直接看效果，修改本地代码
• 编辑html，css代码：
  选中html代码，右键Edit as Html styles，右侧加号，添加一个css样式
• 在线调整颜色：
  css样式中找颜色，点进去，调整颜色，透明度
• js断点调试：
  sources，选择js文件，在行号处单击设置断点，刷新，进行调试（step over：单步跳过，step into：单步进入，step out：跳出当前函数，resume：继续执行直到遇到下一个断点停下）
• 事件监听断点：
  sources，右侧事件断点，选择要设置断点的事件
• 跨终端，跨浏览器：
  右上角三个点，network conditions，user agent，选择终端，浏览器，刷新
• 模拟不同终端：
  右上角第二个按钮（toggle dexice mode）