chrome开发者工具使用的总结
Posted 文清
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chrome开发者工具使用的总结相关的知识，希望对你有一定的参考价值。
开发者工具的打开
直接在页面上点击右键，然后选择审查元素；
或者是打开Tools--Developer Tools；
或者是用快捷键 Command Option + I 打开；
然后会在上方看见八大工具：
-
Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的html、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
-
Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
-
Sources: 主要用来调试js；
-
Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理javascript，计算CSS样式等花费的时间都展示在Timeline中；
-
Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
-
Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
-
Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
-
Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
*DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
HTML中的每个元素比如<body>、<p>都是一个DOM节点，所有的DOM节点组成了DOM树。我们完全可以把整个页面当做是DOM树，把HTML元素标签看做DOM节点。
选中DOM对象之后右键即可以看到一些辅助的功能，在页面上方可看见：
-
Add Attribute: 在标签中增加新的属性；
-
Force Element State: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用
Force Element State强制元素状态，便于调试，如下图：![图4. 强制元素状态][4] -
Edit as HTML: 以HTML形式更改页面元素；
-
Copy XPath: 复制XPath；
-
Delete Node: 删除DOM节点；
-
Break On: 设置DOM 断点。
右边是当选中标签时css样式图，
-
Styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式；
-
Computed: 显示开发者工具计算好的元素样式；
-
Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
-
DOM Breakpoints: 列出所有的DOM 断点；
-
Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。
一般情况下使用style
图中的+号为New style rule，可以为当前标签添加新的选择器，新建立的样式为inspector-stylesheet。此外，也可以直接在原有的样式上增加、修改。
在New style rule右边为Toggle Element State，选择后会出现的选择框，如果选中:hover后，即可以看到鼠标悬停在页面元素上时的CSS样式了，作用类似于前面的Force Element Satte，更多内容可以看:hover state in Chrome Developer Tools 。
以上是关于chrome开发者工具使用的总结的主要内容，如果未能解决你的问题，请参考以下文章