浏览器家园

TAG标签|网站导航| 手机访问:m.liulanqi.com

当前位置:首页ChromeChrome开发 → 前端答疑-chrome开发者工具正确食用-看网页源码

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

时间:2023-06-27 11:22:18来源:整理作者:浏览器知识手机版

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

clipboard.pngclipboard.png

chrome 开发者工具之 Sources

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

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__
      clipboard.png
  2. 大家有玩过网页游戏吗? Console 写个代码?或者说偷偷看一下过关条件?
  3. 这里也和游戏有关,有一兄弟,爱摸鱼。之前的几款游戏,比较简单,他自己就破解了。游戏一上外挂,就索然无味。
    这天,一个 angular 写的游戏,他束手无策,玩了几天,身体日渐消瘦。我决定拯救他一下。
    通过我上面写的本领,成功打断点,找到初始化的时候,增加了外置修改器。解救兄弟与水火之间

Sources 工具(右边区域)

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

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

chrome 开发者工具之 Network

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

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

clipboard.png

Network 之 preserve log

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

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

Network 之 disable cache

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

Network 之 offline

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

Network 之 过滤行

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

Network 拿响应的源码

其实很简单啊,找到页面的请求,然后看 response 里面不就是我们的源码了吗?
clipboard.png

总结

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

查看网页源码的方式总结

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

相关文章

  • 谷歌浏览器可以看gv,谷歌浏览器观看GV视频方法大揭秘

    谷歌浏览器观看GV视频方法大揭秘有很多朋友经常会遇到一个问题,那就是打开gv视频时无法观看,这是因为大部分的浏览器都被屏蔽了。不过,谷歌浏览器则是其中的解决办法之一,下面就为您介绍如何使用谷歌浏览器观看GV视频。2.下载安装Tampermonkey插件首先,你需要下载一个Tampermonkey插件,这个插件实际上是一款脚本管理器,在此基础上,我们可以使用一个小脚本来解锁GV视频。你可以在Chrome应用商店里下载Tampermonkey插件。3.安装脚本一旦Tampermonkey插件安装完成之后,..
  • 酷派手机大神f1浏览器,酷派F1手机浏览器再升级

    酷派手机大神f1浏览器介绍酷派手机大神f1浏览器是一款由中国移动和酷派公司联合推出的手机浏览器,是酷派F1手机上的默认浏览器。该浏览器采用Webkit内核,具有快速、安全、稳定等特点,是用户日常上网必不可少的工具。2.酷派F1手机浏览器的升级功能随着科技的不断发展,酷派F1手机浏览器也在不断升级,拥有了更多强大的功能。其中最值得一提的便是它的智能识屏技术,可以自动识别页面上的文字和图片,为用户提供更加个性化的浏览体验。此外,酷派F1手机浏览器还支持多标签页、快捷访问、访问历史等功能,方便用户快速访问常..

Copyright 2019-2029 www.liulanqi.com 【浏览器家园】 版权所有

浏览器家园_下载浏览器就到浏览器家园 | 专注MAC浏览器和Windows浏览器下载和使用介绍

声明: 所有软件和文章收集整理来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告