摘要：写这个文章，是因为在今天早上，有两个兄弟找我要源码。我震惊于都年了，身为了一个正经前端，还不会看控制台开发者工具之打开我们的选项看，我们可以看到如下结构。开发者工具之如果说，上一个工具基本都是和代码相关的。或者说弱网的情况下的一种快速配置。
写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。
我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？
打开我们的 Sources 选项看，我们可以看到如下结构。分为三块功能，左（目录）中（资源展示）右（断点调试）。
我们选中 page ，在这个里面我们可以看到我们所有的资源以树状展示。
我们在对应的域名下 www.lilnong.top 下，找到 https://www.lilnong.top/static/html/svg-data-background-img-download.html这个路径，点击就可以看到对应的资源
这里就可以看到对应资源详情了，我们都看到源码了，直接复制岂不美滋滋。
当然这里还有其他用途，比如说调试代码。
作为一个正（wai）气（men）凛（xie）然（dao）的前端er，我们就不发挥一下自己的脑回路？
不知道大家有没有遇到调试线上 Vue 文件的时候遇到 new 出来的对象没绑定到全局拿不到？
方案一 找个方法打个断点，触发一下，然后 this 绑定到 window 。这边我们就可以随心所欲。
方案二 找到 el 绑定的 DOM 对象去拿 __vue__
大家有玩过网页游戏吗？ Console 写个代码？或者说偷偷看一下过关条件？
这里也和游戏有关，有一兄弟，爱摸鱼。之前的几款游戏，比较简单，他自己就破解了。游戏一上外挂，就索然无味。
这天，一个 angular 写的游戏，他束手无策，玩了几天，身体日渐消瘦。我决定拯救他一下。
通过我上面写的本领，成功打断点，找到初始化的时候，增加了外置修改器。解救兄弟与水火之间
这里是调试工具，下面我们介绍一下每个按钮的功能
当有断点的时候是个，三角，意思是放过这个断点。
当无断点的时候会在下次调用的时候停住。
下一行，如果是方法不会跳进去
步入，如果是方法，可以跳进去
步出，跳出当前方法
下一步（我没用过）
当前状态是捕获调试。蓝色的时候是不捕获调试，会跳过 debugger。
方便你打了断点，然后又想测试效果
这个是捕获错误。当前是不捕获。
chrome 开发者工具之 Network如果说，上一个 Sources工具 基本都是和代码相关的。这个就比较常用了。
看接口的返回值
看接口的请求头，响应头
查看资源的加载速度
查看资源的大小，缓存情况，响应情况（cdn、waiting 等时间）
Network 之 preserve log该功能为长日志功能，正常来说看到的都是当前页面的。
如果跳转页面或者说刷新之后就没了。通过打开 preserve log，我们可以长久的保留内容。
那它有什么作用呢？
我们可以看到一些中间页的跳转，省去了抓包的麻烦。
可以和上个页面的数据比对。
Network 之 disable cache前端缓存也是比较麻烦的一个事情。经常需要强刷，清缓存一顿的操作。
当我们打开 disable cache 之后，我们就不需要关了，每次都是无缓存的加载
比如说在测试 PWA。或者说弱网的情况下的一种快速配置。
Network 之 过滤行请求比较多的页面，我们有可能需要过滤。
工具栏提供了，路径过滤（支持正则），类型过滤（All,XHR,js），
其实很简单啊，找到页面的请求，然后看 response 里面不就是我们的源码了吗？
后面的先不写了，和当前文章标题也没关系，先留下坑位。
查看网页源码的方式总结右键 > 查看网页源代码（ctrl+u）
控制台 > Sources > 找到对应路径，查看源码
控制台 > Network > 找到对应请求路径，查看 response
其实不通过浏览器看，比如说直接下载那个 html，就可以了。
curl "url地址" 命令的方式。 然后输出到 txt
chrome 开发者工具之 Elementshttps://segmentfault.com/a/11...
chrome 开发者工具之 Consolehttps://segmentfault.com/a/11...
chrome 开发者工具之 Applicationhttps://segmentfault.com/a/11...
chrome 开发者工具之 Performance （最近忙没写，之后看心情） chrome 开发者工具之 Memory （最近忙没写，之后看心情） chrome 开发者工具之 Audits （最近忙没写，之后看心情） chrome 开发者工具之 Security （最近忙没写，之后看心情）文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104465.html
摘要：写这个文章，是因为在今天早上，有两个兄弟找我要源码。我震惊于都年了，身为了一个正经前端，还不会看控制台开发者工具之打开我们的选项看，我们可以看到如下结构。开发者工具之如果说，上一个工具基本都是和代码相关的。或者说弱网的情况下的一种快速配置。 写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制...
摘要：之前写过前端答疑开发者工具正确食用看网页源码，其中涉及到了和两个标签。工具栏提供了，路径过滤支持正则，类型过滤，拿响应其实很简单啊，找到页面的请求，然后看里面不就是吗看这个其实也是昨天碰到的，有个朋友说他下载文件失败。 之前写过前端答疑-chrome开发者工具正确食用-看网页源码，其中涉及到了 Sources 和 Network 两个标签。 不曾想现在的世界越来越看不懂了昨天吧，一个...
摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...
阅读 124·2024-11-07 18:25
阅读 130176·2024-02-01 10:43
阅读 798·2024-01-31 14:58
阅读 790·2024-01-31 14:54
阅读 82600·2024-01-29 17:11
阅读 2921·2024-01-25 14:55
阅读 1935·2023-06-02 13:36
阅读 2882·2023-05-23 10:26
