Chrome调试工具使用方法课件.ppt

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