专栏首页前端博客:https://alili.techchromeF12 谷歌开发者工具详解 Network篇

抱歉,你查看的文章已删除

chromeF12 谷歌开发者工具详解 Network篇

前情提要


这篇文章主要为刚刚接触前端、javaee、php等内容的萌新设计们,对于我本人也是一个对于开发者工具中Network模块使用的一点心得和总结

开发者工具初步介绍

chrome开发者工具最常用的四个功能模块:

  • Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。大大方便了开发者调试页面,这真是十分友好的~
  • console:这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~
  • Sources:主要用来调试js和查看源代码
  • Network:重头戏来了~

Network详细介绍

那我就按照从左到右的顺序来写啦~

记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。

清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)

  • 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。

过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。

也可以是一些指定条件 指定条件有哪些?

domain:资源所在的域,即url中的域名部分。如 domain:api.github.com

has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin

is:当前时间点在执行的请求。当前可用值:running

larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method:使用何种HTTP请求方式。如 GET

mime-type:也写作content-type,是资源类型的标识符。如 text/html

scheme:协议规定。如 HTTPS

set-cookie-name:服务器设置的cookies名称

set-cookie-value:服务器设置的cookies的值

set-cookie-domain:服务器设置的cookies的域

status-code:HTTP响应头的状态码

显示详细信息

显示时间流

能够根据时间,查看对应时间下 浏览器请求的资源信息

是否保留日志 当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空的哟~

  • 是否进行缓存 当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。
  • 设置模拟限速,如下图所示。 设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

Network主题内容介绍

下列介绍中,前者为名词解释,后者为举例

  • Name/Pat:资源名称以及URL路径 (main.css)
  • Method:Http请求方法 (GET或者POST)
  • status/Text:Http状态码/文字解释 (200,ok)
  • Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)
  • Initiator:解释请求是怎么发起的,有四种可能的值 1.Parser :请求是由页面的html解析时发送 2.Redirect:请求是由页面重定向发送 3.script :请求是由script脚本处理发送 4.other :请求是由其他过程发送的,比如页面里的Link链接点击
  • size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

请求文件具体说明

点击某个具体请求后的界面,如下图所示:

一共分为四个模块:

  • Headers

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

  • Preview:预览面板,用于资源的预览。
  • Response:响应信息面板包含资源还未进行格式处理的内容
  • Timing:资源请求的详细信息花费时间

细节补充

对某请求右键,出现页面如下图所示。

  • Copy Request Headers:复制HTTP请求头到系统剪贴板
  • Copy Response Headers:复制HTTP响应头到系统剪贴板
  • Copy Response:复制HTTP响应内容到系统剪贴板
  • Copy as cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库,用于配合url语法进行数据传输)
  • Copy All as HAR:将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)
  • Save as HAR with Content:将资源的所有的网络信息保存到HAR文件中(.har文件)
  • Clear Browser Cache:清除浏览器缓存
  • Clear Browser Cookies:清除浏览器cookies
  • Open in Sources Panel:当前选中资源在Sources面板打开
  • Open Link in New Tab:在新tab打开资源链接
  • Copy Link Address:复制资源url到系统剪贴板

若将所有的网络信息保存到HAR文件中,点击这里,可上传查看

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

chromeF12 谷歌开发者工具详解 Network篇

原文链接

https://segmentfault.com/a/1190000010302235

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS基础测试: 在原生的JS中用于异步请求网络的是下列哪个对象?​

    说到Ajax,只要有过前端开发经验的一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳...

    舒克
  • 【实践】Chrome浏览器客户端调试从入门到奔溃

    不懂CHROME前端调试工具,遇到问题就叽叽喳喳问前端,显得很不专业。辉哥利用五一节日,补补功课,引用相关优质文章,把Chrome浏览器客户端调试的方法详细讲解...

    辉哥
  • HTTP之跨域预请求options

    然后node server.js,打印出listen port 300表示启动成功,接着写一个Ajax请求:

    wade
  • 基础拾掇之——http基础

    http协议介绍 http:Hyper Text Transfer Protocol 超文本传输协议,是互联网应用最为广泛的一种网络协议,主要用于Web服务。通...

    小小科
  • python爬虫---从零开始(一)初识爬虫

    网络爬虫是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。互联网犹如一个大蜘蛛网,我们的爬...

    小菜的不能再菜
  • JSP还有必要学吗?这篇文章告诉你

    前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型...

    良月柒
  • HTTP状态码详解

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码。它由 RFC 2616 规范定义的,并得到RFC 2518...

    Debian社区

扫码关注云+社区

领取腾讯云代金券