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），包括图片或者其他“值”，以及CookiesAudits 标签页：用于优化前端页面，加速网页加载速度等。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”，你可以查看到对应的源码