Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具面板
面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点以下：css
- Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面获得反馈。
- Console:记录开发者开发过程当中的日志信息，且能够做为与JS进行交互的命令行Shell。
- Sources:断点调试JS。
- Network:从发起网页页面请求Request后分析HTTP请求后获得的各个请求资源信息（包括状态、资源类型、大小、所用时间等），能够根据这个进行网络性能优化。
- Timeline:记录并分析在网站的生命周期内所发生的各种事件，以此能够提升网页的运行时间的性能。
- Profiles:若是你须要Timeline所能提供的更多信息时，能够尝试一下Profiles,好比记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
- Application:记录网站加载的全部资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用状况、网页性能方面的诊断，并给出一些优化建议。好比列出全部没有用到的CSS文件等。chrome
注： 这一篇主要讲解前三个面板Elements、Console、Sources。数组
Elements面板
实时编辑DOM节点和CSS样式
- 双击DOM树视图里面的节点，能够实时编辑标签属性，修改的效果会马上反应在浏览器里面
- 点击右侧Style面板，能够实时修改CSS的属性值，这里面的全部样式Name和Value都是能够编辑的;在每一个属性后面单击能够添加新的样式，以下图：
- 点击右侧Computed面板，能够编辑左侧选中的盒子模型参数，全部的值都是能够修改的;点击不一样的位置(top、bottom、left、right) 就能够修改元素的padding、border、margin属性值。
- 查看网页的本地修改历史
- 点击Styles面板中修改过属性的文件名，会跳转到Source面板
- 在文件位置右击选择Local modifications,能够查看本地的全部修改记录
- 点击指定的时间点能够看到粉红背景的删除内容和绿色背景的添加内容
Console面板
控制台输出日志
经过JS代码或者命令行console.log()、console.warn()
和console.error()能够将日志信息输出到控制台浏览器
console.log显示通常的基本日志信息，当要显示的基本日志太多时可使用console.group将相关的日志进行分组console.warn显示带有黄色小图标的警告信息console.error显示带有红色小图标的红色的错误信息
console.assert当第一个参数为false时，才会显示第一个参数的值
能够根据JS条件判断输出不一样的日志信息缓存
注： 当须要换到下一行而不是回车的时候，请按
Shift+Enter。
安全
控制台交互
- JS表达式计算
在上一小节，咱们已经看到能够在控制台输入JS表达式点击Enter便可获得表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你能够用Tab自动完成当前的建议项性能优化
- 选择元素
| 快捷方式 | 描述 |
|---|---|
| $() | 返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector() |
| $$() | 返回与指定的CSS选择器相匹配的全部元素的数组，等同于document.querySelectorAll() |
| $x() | 返回与指定的XPath相匹配的全部元素的数组 |
注： 我在实际操做过程当中发现$()并无按预期返回相匹配的第一个元素，而是返回了全部匹配的元素数组，我也给Google提供了这个issue，等待Google的答复。网络
Sources面板
你能够在这个面板里面调试你的JS代码，也能够在工做区打开你的本地文件。dom
调试JS代码
- 你能够点击JS代码块前面的数字外来设置断点，若是当前代码是通过压缩的话，能够点击下方的花括号
{}来加强可读性，全部的断点都会列出右侧的断点区。
- 设置断点
断点能够在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发工具
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击，在弹出的菜单中选择Break on...，能够看到三个选择项，好比咱们选择Subtree modifications，
那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。设置方式以下图：
下图是在个人系统里添加指定省市指定医院时因为增长了元素节点而触发的断点，经过单步调试能够看到会弹出一个div对话框供用户添加数据。
② XHR生命周期状态改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时，则断点就会有触发。
③ 指定的事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各类类型的事件，勾选你要监听的事件，
在指定的事件执行时，断点就会有触发。