Chrome开发者工具面板
面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点如下:
- Elements (元素) : 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console (控制台) : 记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
- Sources (源代码) : 断点调试JS。
- Network (网络) : 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
- Timeline (时间线) : 记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
- Profiles (文件) :如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
- Application (应用) : 记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies) .缓存数据、字体、图片、脚本、样式表等。
- Security ( 权限 ): 判断当前网页是否安全。
- Audits : 对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。
控制台(Console)
查看JS对象的及其属性:
执行JS语句:
源代码(Source)
查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。
右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的
也可以在右边的侧栏上查看:
在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。
Network详细介绍
那我就按照从左到右的顺序来写啦~
记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)
捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取
过滤器 能够自定义筛选条件,找到自己想要资源信息
是否保留日志
是否进行缓存
设置模拟限速,如下图所示。
请求文件具体说明
点击某个具体请求后的界面,如下图所示:
一共分为四个模块:
-
Headers
Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
-
Preview
预览面板,用于资源的预览。
-
Response
响应信息面板包含资源还未进行格式处理的内容
-
Timing
资源请求的详细信息花费时间
后面碰到什么常用的在更新 。