Chrome调试工具使用方法课件

Chrome调试工具使用方法-前端界面开发利器Chrome调试工具使用方法-前端界面开发利器目录n调试工具介绍n错误查找n样式调整目录调试工具介绍2调试工具概述GoogleChrome浏览器(4.0及以上版本)自带了丰富的开发人员工具，让您可以随时随地对任何网页的CSS、HTML和JavaScript进行实时编辑、调试以及监控。按下F12或者在页面上鼠标右键审查元素，可打开控制台。控制台主要分为8个模块，在之后详细介绍。调试工具概述 Google Chrome 浏览器 3调试工具介绍一.Elements标签页可根据DOM树查看、编辑页面上的元素，包括HTML和CSS。可直接用左上角的放大镜在页面上直接选取元素进行调试调试工具介绍一.Elements标签页 可根据D4调试工具介绍二.Network标签页 可查看加载的文件，请求的方法，文件的类型，加载的时间等当点击文件后，在左边可查看到请求、响应的各种具体参数。调试工具介绍二.Network标签页 可查看加载5调试工具介绍三.Sources标签页左侧目录可以展开，查看加载本页面所调用的资源，如js，css，php。在中间可以打断点进行调试。调试工具介绍三.Sources标签页 左侧目录可6调试工具介绍四.Timeline标签页此功能是查看页面性能，页面渲染速度的。调试工具介绍四.Timeline标签页此功能是查看页面性能，7调试工具介绍五.Profiles标签页此功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击Load上传即可。调试工具介绍五.Profiles标签页 此功能主8调试工具介绍六.Resources标签页此功能是查看加载页面所用的资源，链接的数据库，域名下保存的cookie信息等都可以查看，上图，点击左侧栏目，依次查看。调试工具介绍六.Resources标签页 此功能9调试工具介绍七.Audits标签页此功能也是性能测试，上图，点击run执行，查看效率。调试工具介绍七.Audits标签页 此功能也是性10调试工具介绍八.Console标签页这就是Javascript控制台。查看错误信息、打印调试信息（console.log()）、写一些测试脚本。图中每一个红叉对应一个错误，点击灰色带下划线的位置，可进入到具体代码中，进行调错、调试工具介绍八.Console标签页 这就是Ja11错误查找n调试步骤调试步骤n断点调试断点调试错误查找调试步骤12前后端控制台是否报错出错/没有达到预期效果调试步骤是否要发送请求到后台请求是否成功发送到后台根据报错信息，找到错误位置，进行修改样式或者JS出问题，可根据dom节点，寻找出错处检查请求地址，参数；在前台断点调试在后台断点调试是否否否是是前后端控制台出错/没有达到预期效果调试步骤是否要发送请请求是13断点调试在Sources标签页中，可在如图所示处打断点，刷新页面，当运行到断点处会停止。断点调试 在Sources标签页中，可在如图所示14断点调试利用Breakpoints列表中的断点快速定位非常方便。ScopeVariables列表，在这里可以查看此时局部变量和全局变量的值。从左到右依次为，脚本状态、进行下一步、跳到下个方法、跳出当前方法、临时禁用所有已添加的断点、设置程序运行时遇到异常时是否中断的开关断点调试利用 Breakpoints 列表中的断点快速定位非15样式调整在Elements标签页中，可以直接在某个元素上双击修改元素的属性，或者你点右键选EditasHtml直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。左上角放大镜图标可以直接在页面上选中元素；手机图标可以将页面设置成不同分辨率进行调试。样式调整 在Elements标签页中，可以直接在16谢谢17