Chrome调试工具使用方法_第1页
Chrome调试工具使用方法_第2页
Chrome调试工具使用方法_第3页
Chrome调试工具使用方法_第4页
Chrome调试工具使用方法_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Chrome调试工具使用方法,-前端界面开发利器,目录,调试工具介绍 错误查找 样式调整,调试工具概述,Google Chrome 浏览器 (4.0及以上版本) 自带了丰富的开发人员工具，让您可以随时随地对任何网页的 CSS、 HTML 和 JavaScript 进行实时编辑、调试以及监控。 按下F12或者在页面上鼠标右键审查元素，可打开控制台。控制台主要分为8个模块，在之后详细介绍。,调试工具介绍,一.Elements标签页,可根据DOM树查看、编辑页面上的元素，包括HTML和CSS。可直接用左上角的放大镜在页面上直接选取元素进行调试,调试工具介绍,二.Network标签页,可查看加载的文件

2、，请求的方法，文件的类型，加载的时间等,当点击文件后，在左边可查看到请求、响应的各种具体参数。,调试工具介绍,三.Sources标签页,左侧目录可以展开，查看加载本页面所调用的资源，如js，css，php。在中间可以打断点进行调试。,调试工具介绍,四.Timeline标签页,此功能是查看页面性能，页面渲染速度的。,调试工具介绍,五.Profiles标签页,此功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击 Load上传即可。,调试工具介绍,六.Resources标签页,此功能是查看加载页面所用的资源，链接的数据库，域名下保存的cookie信息等都可以查看，上图，点击左侧栏目

3、，依次查看。,调试工具介绍,七.Audits标签页,此功能也是性能测试，上图，点击run执行，查看效率。,调试工具介绍,八.Console标签页,这就是Javascript控制台。查看错误信息、打印调试信息（console.log()）、写一些测试脚本。,图中每一个红叉对应一个错误，点击灰色带下划线的位置，可进入到具体代码中，进行调错、,错误查找,调试步骤 断点调试,前后端控制台 是否报错,出错/没有达到预期效果,调试步骤,是否要发送请 求到后台,请求是否成功 发送到后台,根据报错信息，找到错误位置，进行修改,样式或者JS出问题，可根据dom节点，寻找出错处,检查请求地址，参数；在前台断点调试,在后台断点调试,是,否,否,否,是,是,断点调试,在Sources标签页中，可在如图所示处打断点，刷新页面，当运行到断点处会停止。,断点调试,利用 Breakpoints 列表中的断点快速定位非常方便。,Scope Variables 列表，在这里可以查看此时局部变量和全局变量的值。,从左到右依次为，脚本状态、进行下一步、跳到下个方法、跳出当前方法、临时禁用所有已添加的断点、设置程序运行时遇到异常时是否中断的开关,样式调整,在Elements标签页中，可以直接在某个元素上双击修改元素的属性，或者你点右键选Edit as Html直接对元素的HTML进行编辑，或者删除某个元素，所有的修

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论