Chrome调试工具使用方法.pptVIP

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进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。 左上角放大镜图标可以直接在页面上选中元素；手机图标可以将页面设置成不同分辨率进行调试。 * *