谷歌浏览器的使用

[TOC]

一、快捷操作

1.网页保存为PDF

ctrl+p,然后在显示出来的打印页面上把目标打印机更改为“另存为PDF”，最后按保存就完成了。

2.不保留浏览记录和cookies

Ctrl+Shift+N，打开隐身模式。

3.苦于Chrome打开太多的页面以至于太卡？

只要按Shift+Esc就可以打开任务管理器，想关那里就关那里，再也不用Ctrl+W一个一个关闭了。

4.恢复不小心关掉的页面

Ctrl+Shift+T

5.查看历史记录

Ctrl+H

6.查看下载记录

Ctrl+J

7.选中地址栏

F6=Ctrl+L=Alt+D

8.删除浏览记录

Ctrl+Shift+Delete

9.快速切换页面

Ctrl+1回到最左边的页面，Ctrl+9回到最右边的页面。

10.全屏观看

F11

11.OpenSearch的网站内搜索任意内容

只要在地址栏上输入以.com结尾的网站，最后按Tab键

12.在新窗口打开源代码

ctrl+u

13.滚动截屏

CTRL+shift+I(打开开发者工具) -> ctrl+shift+p(打开命令行) ->Screen

14.打开扩展程序

在搜索栏输入chrome://extensions/

二、console用法

参考资料：知乎·JavaScript 中 console 的用法 (opens new window)

三、开发者工具

3.1 Elements面板

• 可以查看DOM结构、编辑CSS样式，用于测试页面布局和设计页面。

3.2 Console面板

• 可以看成是 JavaScript Shell，能执行 Javascript脚本。通过 Console还能和页面中的 JavaScrip对象交互。

3.3 Sources面板

• 1.查看Web应用加载的所有文件。

• 2.编辑CSS和 javascript文件内容。

• 3.将打乱的CSS文件或者 Javascript文件格式化。

• 4.支持 Javascript的调试功能。

  • Local：当前函数作用域
  • Closure(foo)：是指foo函数的闭包
  • Global：是全局作用域
  • Local->Closure(foo)->Global就是一个完整的作用域链

  • 打开“开发者工具”
  • 在控制台执行上述代码
  • 然后选择“Memory”标签，点击"take snapshot" 获取V8的堆内存快照。
  • 然后“command+f"(mac) 或者 "ctrl+f"(win),搜索“setName”，然后你就会发现setName对象下面包含了 raw_outer_scope_info_or_feedback_metadata，对闭包的引用数据就在这里面。`

• 5.设置工作区,将更改的文件保存到本地文件夹中。

3.4 NetWork面板

• 展示了页面中所有的请求内容列表,能査看每项请求的请求行、请求头、请求体、时阃线以及网络请求瀑布图等信息。

3.4.1 控制器

• 红色圆点按钮：开始/暂停抓包。
• 全局搜索：在所有下载资源中搜索相关内容，快速定位到某几个你想要的文件上。
• disable cache：禁止从缓存中加载资源，在网络性能测试时需关闭缓存。
• online按钮：模拟2G/3G，限制带宽，模拟弱网情况下页面的展现情况。
• Preserve log：勾选可保留页面刷新前的请求。

3.4.2 过滤器

• 筛选想要的文件类型。

3.4.3 抓图信息

• 分析用户等待页面加载时间内所看到的内容，分析用户实际的体验情况。

3.4.4 时间线

参考教程: Chrom Waiting（TTFB）等时间过长 各个参数的释义 (opens new window)

• 主要用来展示HTTP、HTTPS、Websocket加载的状态和时间的一个关系，用于直观感受页面的加载过程。

3.4.5 详细列表

• 详细记录每个资源从发起请求到完成请求这中间的所有过程的状态，以及最终请求完成的数据信息。

3.4.6 下载信息

• DOMContentLoaded：页面已经构建好DOM了，这意味着DOM所需的HTML文件、JS文件、CSS文件都已经下载好了。
• Load：浏览器已经记载了所有的资源（图像、样式表等）。

3.5 Performance面板

• 记录和查看web应用生命周期内的各种事件,并用来分析在执行过程中一些影响性能的要点。

3.5.1 性能记录

• ctrl + E(实心按钮)：记录后续的交互操作。
• ctrl + shift + E：将页面重新加载，计算加载过程中的性能表现。

3.5.2 概述面板

3.5.2.1 FPS

• 分析动画得主要性能指标，它表示每一秒的帧数。
• 图中绿色柱状越高表示帧率越高，体验就越流畅。若出现红色块，则代表长时间帧，很可能会出现卡顿。图中以绿色为主，偶尔出现红块，说明网页性能并不糟糕，但仍有可优化的空间。
• 让页面达到>=60fps每秒的刷新频率可以避免卡顿，和目前大多数显示器刷新率60Hz吻合。即，一秒之内进行60次重新渲染，每次重新渲染的时间不超过16.66ms。

3.5.2.2 CPU

• 表示CPU的使用情况，不同的颜色片段代表着消耗CPU资源的不同事件类型。这部分的图像和下文详情面板中的Summary内容有对应关系，我们可以结合这两者挖掘性能瓶颈。

3.5.2.3 NET

• 粗略的展示了各请求的耗时与前后顺序。这个指标一般来说帮助不大。

3.5.3 统计汇总区域

3.5.3.1 Summary统计报表

• Loading: 网络通信和HTML解析。

  • Parse HTML - 浏览器执行HTML解析。
  • Finish Loading - 网络请求完毕事件。
  • Receive Data - 请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件。
  • Recieve Response - 响应头报文到达时触发。
  • Send Request - 发送网络请求时触发。

• Scripting: JavaScript执行。

  • Animation Frame Fired - 一个定义好的动画帧发生并开始回调处理时触发。
  • Cancel Animation Frame - 取消一个动画帧时触发。
  • GC Event - 垃圾回收时触发。
  • DOMContentLoaded - 当页面中的DOM内容加载并解析完毕时触发。
  • Evaluate Script - A script was evaluated。
  • Event - js事件。
  • Function Call - 只有当浏览器进入到js引擎中时触发。
  • Install Timer - 创建计时器时触发。
  • Request Animation Frame - A requestAnimationFrame() calll scheduled a new frame。
  • Remove Timer - 当清除一个计时器时触发。
  • Time - 调用console.time()触发。
  • Time End - 调用console.timeEnd()触发。
  • Timer Fired - 定时器激活回调触发。
  • XHR Ready State Change - 当一个异步请求为就绪状态后触发。
  • XHR Load - 当一个异步请求完成加载后触发。

• Rendering: 样式计算和布局，即重排。

  • Invalidate layout - 当DOM更改导致页面布局失效时触发。
  • Layout - 页面布局计算执行时触发。
  • Recalculate style - Chrome重新计算元素样式时触发。
  • Scroll - 内嵌的视窗滚动时触发。

• Painting：重绘。

  • Composite Layers - Chrome的渲染引擎完成图片层合并时触发。
  • Image Decode - 一个图片资源完成解码后触发。
  • Image Resize - 一个图片被修改尺寸后触发。
  • Paint - 合并后的层被绘制到对应显示区域后触发。

• Idle: 空闲时间。

3.5.3.2 Bottom-Up事件时长排序

3.5.3.3 Call Tree事件调用顺序

3.5.3.4 Event Log事件发生的先后顺序

3.6 Memory面板

• 用来査看运行过程中的 Javascript占用堆内存情况,追踪是否存在内存泄漏的情况等。

3.7 Application面板

• 查看Web应用的数据存储情况
  • PWA的基础数据；IndexedDB；Web sQl；本地和会话存储；Cookie；应用程序缓存；图像；字体和样式表等。

3.8 Security面板

• 显示当前页面一些基础的安全信息。

3.9 Audits面板

• 会对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。

3.10 Layers面板

• 展示一些渲染过程中分层的基础信息。

三、其他

3.1 查看插件源码

• 第一步：通过chrome://version/可以查看浏览器的信息，里面有浏览器所在的路径。

• 第二步：个人资料路径所在路径，即对应id的文件夹。