前端调试工具

一：常用的前端调试工具。
1，Chrome浏览器的调试工具。
2，火狐浏览器的Firebug插件调试工具。
3，IE的开发人员工具等。
二：Chrome浏览器的调试工具的打开方式。
1，在网页任意地方右击，选择检查选项。
2，使用【Ctrl+shift+i】打开前端调试工具。
3，使用【f12】或【(Fn+f12)】也可以打开调试工具。
三：Chrome调试模块。
Chrome常用调试：network，source，elements。
network：①XHR，ajax请求②查找参数③主要是研究http协议。
source：用于查看和调试当前页面所加载的脚本的源文件。
elements:用于查看和编辑当前页面中的 HTML 和 CSS 元素。
TimeLine： 用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles：用于查看 CPU 执行时间与内存占用等信息。
Resource 用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
Audits：分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案，用于优化前端页面，加速网页加载速度等。
Console：用于显示脚本中所输出的调试信息，或运行测试脚本等。
四：Elements。
Style：
1，点击此按钮再点击页面上的元素，显示选中元素的HTML代码和样式。

2，编辑HTML：在工具页面左边html代码处，可通过双击修改现有标签的属性值，也可选中html代码片段右击选择【Edit as HTML】进行html代码的修改；

3，编辑属性：在工具页面右边显示的是被选元素的样式信息，可以通过双击属性来修改该元素的css属性或某个元素中的属性值，通过取消勾选的方式去掉一些样式，页面会发生实时变化，从而进一步修改完善。

4，添加属性：鼠标双击想修改的元素的空白部分，即可添加属性。添加任何属性都必须以分号结束。你也可以直接点击+号，添加新选择器并进行属性操作。