chrome开发者工具的使用.docx

Chrome 开发者工具介绍虽然对于 Chrome 开发者工具的介绍，Google 官方以及互联网中都有众多文章进行阐述，但为了有助于读者更好地理解本文后面对如何巧妙运用开发者工具定位及调试脚本的阐述，在此对开发者工具中的各个模块做一个概要性的介绍。如果对其中某些模块特别有兴趣，请参考文末的链接，从中进行深入了解。Chrome V35 版本中的开发者工具分为 8 个大模块，每个模块及其主要功能为： Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。 Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源 Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。 Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用 在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好 TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。 Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。 Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies Audits 标签页：用于优化前端页面，加速网页加载速度等。 Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug(输出内容)；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug(Console使用介绍);console是小写形式，不然提示没有Console后文会在阐述过程中，会提及使用 Element 标签页探测页面元素并查看该元素的 HTML 内容，也会使用 Source 标签页与 Console 标签页调试脚本及查看调试信息，并不会详细介绍他们的基本功能，请在阅读时提前了解以上相关标签页的基本功能。1、快速编辑HTML元素 选择Elements面板 选择Elements面板内的一个DOM元素 双击你需要打开的DOM元素标签，你就可以编辑它当你完成之后会自动更新和关闭标签2、到指定的行数你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O。3、展开所有子节点 选择Elements面板 选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键，可以展开所有子节点4、改变开发者工具位置试一试快捷键：CMD + Shift + D。设置开发者工具有三个选项： 不在窗口中显示开发者工具 在窗口右侧显示开发者工具 在窗口底部显示开发者工具5、通过CSS选择器搜索DOM元素CMD + F / CTRL + F和输入你需要的类名或ID名，可以搜索到相应的选择器。6、Material和自定义颜色调色板你可以点击颜色代码前面的小图标，你可以选择： 页面颜色：这个面板是从你的Web网站（在你的CSS中）自动生成 Material Design:这个面板可以从Material Design面板中自动生成颜色7、多个光标移动光标按住CMD + 点击可以添加多个光标，你也可以使用CMD + U撤销你选择的最后一个光标。8、复制图片的Data URI 选择Network面板 在“Resources”面板选择你的图片 在图片上右击，选择“Copy Image as Data URI”选项触发伪类 在左边的面板元素上右击鼠标，并选择“Force Element State” 另外在右边的面板中选择切换伪类状态的图标通过拖拽选择多列 选择“Sources”面板 在“Sources”面板编辑器中选择你需要的文件 按住Alt并拖动鼠标使用$0获取当前元素 选择“Elements”面板 在Element面板中选择DOM元素 点击Console并输入$0可以获取当前元素在元素中显示 在“Console”面板中右击 选择Reveal in Elements Panel查看事件监听器 选择“Elements”面板” 在“Event Listeners”菜单中选择一个事件 右击并选择“Show Function Definition”，你可以查看到对应的源码预览Easing 点击easing图标（紫色的图标），可以预览easing 你可以通过浏览选择其他的easing或者自定义easing媒体查询 点击左上角的手机图标，选择设备模式 点击断点(blue,green,orange)工具栏选择断点如果你可击一个工具栏，你可以在源码中找到它对应的位置。Network FilmstripFilm Strip显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。 选择“Network”面板 点击“录制”图标 重新加载页面Copy Response你可以在网络资源中复制Response/Request头。 选择“Network”面板” 在“Sources”面板编辑器中选择你需要的文件” 右击并选择“Copy Response”运行预定义的代码片段 在左侧边栏中选择: Sources Snippets 右击选择Select New 输入文件名和在右侧的面板中输入代码片段 代码片段文件名上右击选择RunDevice Emulation Sensors你可以模拟移动设备传感器： 触摸屏 地理位置坐标 加速计你可以这样操作： 选择“Elements”面板 选择“Emulation