前端答疑-chrome开发者工具正确食用-看网页源码

写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。
我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？

chrome 开发者工具之 Sources

打开我们的 Sources 选项看，我们可以看到如下结构。分为三块功能，左（目录）中（资源展示）右（断点调试）。

Sources 工具（左边区域）

我们选中 page ，在这个里面我们可以看到我们所有的资源以树状展示。
我们在对应的域名下 www.lilnong.top 下，找到 https://www.lilnong.top/static/html/svg-data-background-img-download.html这个路径，点击就可以看到对应的资源

Sources 工具（中间区域）

这里就可以看到对应资源详情了，我们都看到源码了，直接复制岂不美滋滋。
当然这里还有其他用途，比如说调试代码。
作为一个正（wai）气（men）凛（xie）然（dao）的前端er，我们就不发挥一下自己的脑回路？

1. 不知道大家有没有遇到调试线上 Vue 文件的时候遇到 new 出来的对象没绑定到全局拿不到？
   1. 方案一 找个方法打个断点，触发一下，然后 this 绑定到 window 。这边我们就可以随心所欲。
   2. 方案二 找到 el 绑定的 DOM 对象去拿 __vue__
      
2. 大家有玩过网页游戏吗？ Console 写个代码？或者说偷偷看一下过关条件？
3. 这里也和游戏有关，有一兄弟，爱摸鱼。之前的几款游戏，比较简单，他自己就破解了。游戏一上外挂，就索然无味。
   这天，一个 angular 写的游戏，他束手无策，玩了几天，身体日渐消瘦。我决定拯救他一下。
   通过我上面写的本领，成功打断点，找到初始化的时候，增加了外置修改器。解救兄弟与水火之间

Sources 工具（右边区域）

这里是调试工具，下面我们介绍一下每个按钮的功能

1. 当有断点的时候是个，三角，意思是放过这个断点。
   当无断点的时候会在下次调用的时候停住。
   
2. 下一行，如果是方法不会跳进去
3. 步入，如果是方法，可以跳进去
4. 步出，跳出当前方法
5. 下一步（我没用过）
6. 当前状态是捕获调试。蓝色的时候是不捕获调试，会跳过 debugger。
   方便你打了断点，然后又想测试效果
7. 这个是捕获错误。当前是不捕获。

chrome 开发者工具之 Network

如果说，上一个 Sources工具 基本都是和代码相关的。这个就比较常用了。

1. 看接口的返回值
2. 看接口的请求头，响应头
3. 查看资源的加载速度
4. 查看资源的大小，缓存情况，响应情况（cdn、waiting 等时间）

Network 之 preserve log

该功能为长日志功能，正常来说看到的都是当前页面的。
如果跳转页面或者说刷新之后就没了。通过打开 preserve log，我们可以长久的保留内容。
那它有什么作用呢？

1. 我们可以看到一些中间页的跳转，省去了抓包的麻烦。
2. 可以和上个页面的数据比对。

Network 之 disable cache

前端缓存也是比较麻烦的一个事情。经常需要强刷，清缓存一顿的操作。
当我们打开 disable cache 之后，我们就不需要关了，每次都是无缓存的加载

Network 之 offline

比如说在测试 PWA。或者说弱网的情况下的一种快速配置。

Network 之 过滤行

请求比较多的页面，我们有可能需要过滤。
工具栏提供了，路径过滤（支持正则），类型过滤（All,XHR,js），

Network 拿响应的源码

其实很简单啊，找到页面的请求，然后看 response 里面不就是我们的源码了吗？

总结

后面的先不写了，和当前文章标题也没关系，先留下坑位。

查看网页源码的方式总结

1. 右键 > 查看网页源代码（ctrl+u）
2. 控制台 > Sources > 找到对应路径，查看源码
3. 控制台 > Network > 找到对应请求路径，查看 response
4. 其实不通过浏览器看，比如说直接下载那个 html，就可以了。
5. curl 'url地址' 命令的方式。 然后输出到 txt