前端答疑-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

chrome 开发者工具之 Elements

https://segmentfault.com/a/11...

chrome 开发者工具之 Console

https://segmentfault.com/a/11...

chrome 开发者工具之 Application

https://segmentfault.com/a/11...

chrome 开发者工具之 Performance （最近忙没写，以后看心情）

chrome 开发者工具之 Memory （最近忙没写，以后看心情）

chrome 开发者工具之 Audits （最近忙没写，以后看心情）

chrome 开发者工具之 Security （最近忙没写，以后看心情）