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

Chrome的开发者模式

• Chrome开发者工具(DevTools或Developer Tools)是Google Chrome浏览器中内置的一组网页制作和调试工具。
• 开发者工具为网页开发人员提供了访问浏览器及其网页应用程序内部的深入访问。使用开发者工具有效地跟踪布局问题，设置JavaScript断点，并获得代码优化的见解。现在让我们来看看各个面板。

• 打开方式 fn+f12

1:Elements (元素)面板

• 使用Elements面板通过自由操作DOM和CSS来反复调整网站的布局和设计。

• 检查和编辑页面与样式-检查和实时编辑 DOM 树中的任何元素(html标签)。

• 检查和编辑页面与样式-检查和编辑框模型参数。使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。

  • chrome常见API
    
    
    
  • $_ 返回最近评估的表达式的值。
    
    $0~$4则代表了最近5个你选择过的DOM节点。
    在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，
    这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，
    以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
    
    $0 返回最近一次选择的元素或 JavaScript 对象
    
    $1 返回仅在最近一次之前选择的元素或对象，依此类推
    
    
    
  • ( s e l e c t o r )