写这篇文章是因为今天早上有两个兄弟找我要源码。有图有真相。我很震惊，已经9102年了。作为一个正(xie)经典(xin)前端er，还是不知道怎么看console？chromedevelopertools的Sources打开我们的Sources选项，我们可以看到如下结构。分为左（目录）、中（资源显示）、右（断点调试）三个功能。Sources工具（左侧区域）我们选择page，在其中我们可以看到我们所有的资源都显示在树中。我们找到对应域名www.lilnong.top下的路径https://www.lilnong.top/static/html/svg-data-background-img-download.html，点击查看对应资源Sources工具（中area)在这里可以看到对应资源的详细信息。我们都看过源代码。直接copy出来岂不是很好。当然，这里还有其他用途，比如调试代码。作为一个正（wai）qi（men）冷（xie）ran（dao）的前端er，难道我们不用自己的脑回路吗？不知道大家有没有遇到过，在线调试vue文件时，获取不到未绑定全局的new对象？解决方法1找个方法打断点，触发断点，然后把this绑定到window上。在这里我们可以为所欲为。方案二找到el绑定的DOM对象得到__vue__玩过网页游戏吗？控制台写代码？或者看看通关条件？这也与游戏有关。有个哥哥爱摸鱼。前面几个游戏比较简单，都是他自己破解的。游戏一旦插上，就变得乏味了。这一天，他对一个angular写的游戏束手无策。打了几天，他的身体越来越瘦。我决定救他。通过我上面写的技巧，成功打断了断点，找到初始化的时候，加了一个外部修饰符。Sources工具（右侧区域）是一个调试工具。下面介绍一下各个按钮的作用。有断点的时候有一个三角形，意思是让断点走。当没有断点时，会在下次调用时停止。下一行，如果是方法，则不会跳入步入，如果是方法，则可以跳入步出，跳出当前方法。下一步（我没用过）目前状态是抓包调试。为蓝色时，表示未捕获调试器，将跳过调试器。方便你打个断点，然后想测试一下效果。这是为了捕获错误。目前未被捕获。如果说Chrome开发者工具网，最后一个Sources工具基本上是和代码相关的。这个比较常用。看接口的返回值，看接口的请求头，查看响应头中资源的加载速度，查看资源大小，缓存情况，响应情况（cdn，等待等）.time)网络保存日志的功能是一个长日志功能，看到当前页面是正常的。如果你跳转到页面或刷新它，它就会消失。通过开启保存日志，我们可以将内容保存很长时间。那么它有什么作用呢？我们可以看到一些中间的页面跳转，这样就省去了抓包的麻烦。可以和上一页的数据进行比较。Network的disablecache前端缓存也是一件比较麻烦的事情。经常需要强制刷新和清除缓存。当我们打开disablecache时，我们不需要关闭它。每次加载没有缓存的Network的离线，比如我们在测试PWA。或者在网络弱的情况下快速配置。我们可能需要过滤Network中有大量过滤行请求的页面。工具栏提供了路径过滤（常规支持），类型过滤（All，XHR，js），Network的响应源码其实很简单。找到页面的请求，再看响应，不就是我们的源码吗？总结完就不写了，跟本篇标题无关，先留个坑吧。查看网页源码的方法总结右键>查看网页源码(ctrl+u)控制台>源>找到对应路径，查看源码控制台>网络>找到对应请求路径，查看响应实际上没有通过浏览器查看，比如直接下载那个html，就可以了。curl'url地址'命令。然后输出到txtchrome开发者工具的Elementshttps://segmentfault.com/a/11...Chrome开发者工具的控制台https://segmentfault.com/a/11...Chrome开发者工具的应用https://segmentfault.com/a/11...chrome开发者工具的性能（最近没闲着，等会儿看心情）chrome开发者工具的回忆（最近忙得没空写，看我的稍后心情）chrome开发者工具的审计（最近忙没写，以后看心情）Chrome开发者工具的安全（最近忙没空写，以后再看心情）
