Firebug折腾记_(4)响应时间监测

题外话

这篇作为firebug系列的结束贴;

四篇博文应该让一些小伙伴对firebug有了基本的认识和操作


网络

  1. 菜单依次解释

    • 暂停符号:在XHR( XMLHttpRequests)处暂停也就是监听,点击这个按钮后,发起异步请求时中断js执行,并跳转到script面板,标识出相应的代码
    • 清除:清除当前获取的资源信息
    • 保持:保存当前获取的信息,刷新依旧存在
    • 全部是汇总所有资源信息,后面的都是针对性的筛选信息
  2. 内容列表依次解释
    • URL–可以展开,里面包含很详细的头部信息和内容
    • 头信息: 可以看到很详细的东东,比如内容编码,告知网站哪种搞的(PHP),时间等等

    • 响应 – 服务器响应回来的东东

    • HTML – 可视化界面

    • 缓存 – 缓存大小,最大期限及修改和获取的时间

    • cookies – 不用多说了

    • 状态 – 这个很好理解,比如200,304,404 .. 各种服务器返回的状态
    • 域:向哪里请求
    • 大小 – 数据块大小
    • 远程IP,对外的IP
    • 时间线:资源请求的时间,鼠标移动到上面可以详细的看到消耗时间的构成


Cookie

直接上图,再做解释

  1. 里面可以新建cookie,保存当前cookie,和移除已经获取的cookie
  2. 看下拉菜单的文字就知道作用了
  3. 控制是否接受该网站的cookie
  4. 获取到cookie内容列表
    • 名称: cookie名称
    • 内容:cookie的内容 – 传送来传送去,一般放在请求的头部
    • 域:来自哪个网站的cookie–看域名就知道了
    • 原始大小:cookie的大小, cookie最大为4K(现在越来越多网站过渡到h5的localstorage了)
    • 路径
    • cookie过期时间
    • 仅http:(Http only)
    • 安全 – 我也不大清楚 ,cookie如何验证是否安全的!!!

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2025-01-05 20:30:50

Firebug折腾记_(4)响应时间监测的相关文章

Firebug折腾记_(1)安装及简介

简介 Firebug是Firefox下一款知名的插件,目前稳定版本是2.X,alpha版本是3.X(装了.完全看不懂–适用于FF44+,也就是测试版本); 功能主要用于调试网页中的错误,修改代码及实时查看效果; 目前只有在Firefox下的firebug才能体验它的强大支出,,对于其他浏览器,lite版本功能阉割太多; 但是吧,就其他浏览器而言,chrome自带的已经足够强大,IE11自带的也挺不错的-. 获取及安装 Firebug官网 Firefox选项中的附加组件 打开方式 F12可以打开工

Firebug折腾记_(2)HTML&CSS定位及调试小技巧

题外话 传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!; 定位HTML元素的三种方式 进入调试工具界面,按下"瓢虫"旁边的小鼠标,再进行网页元素的选择 默认快捷键,Ctrl + shift + C 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素 HTML及CSS简单调试 ##HTML元素编辑 除了

Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道;  或者直接 Ctrl> + Shift + J: 直接进入console面板 点击第一张截图圈圈那个进入,看到Shortcuts这个就是了-.快捷键大全 快捷键大全 快捷键有这么以下几大类..且看我一一道来~~~注:All pane是全局快捷键 Console() Ctrl + L : 清除控制台消息 Tab : 自动

Chrome调试折腾记_(3)JS断点调试技巧

JS调试技巧 技巧一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

Atom编辑器折腾记_(23)加快React开发的插件汇总【浪一波】

前言 汇总下比较实用的atom插件[偏react开发的]-- 暂时应该没有比我更全面的!嘎嘎 atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js-import–模块导入智能提示 emmet-jsx-css-modules– React内的Emmet补全,非单纯的expand[class => className ]!! language-javascript-jsx – JavaScript, ES6, ES7, React JSX,

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的-可以说是格式化插件,依赖nodejs 获取CSScomb–这不是今天的话题 官方网站: CSScomb 支持许多编辑器,比如Sublime/Atom/brackets等 第三方CSScomb-这才是今天的话题 昨天写了篇CSS3的文章-发现代码有点混乱..人力排版有点--.所以跑去atom插件库寻找csscomb Atom -> s

Atom编辑器折腾记_(21)修复`Atom-Beautify: Migrate Settings`问题

前言 不管在公司还是在家,我都挺喜欢用atom的,所以配置什么都用sync-settings这个插件来同步, 今晚回到家,同步一下...发现大部分配置正常了..唯独Atom-beautify有点抽风: 问题 一直报'Atom-Beautify: Migrate Settings, unsuppor......' 解决办法 找了许久,从配置开始文件着手找...又翻墙找了下...大体解决如下: 按下ctrl+shift+p[command-palette] , 键入Atom-Beautify: Mi

Atom编辑器折腾记_(11)编辑器实时预览HTML页面(插件:Atom HTML Preview)

为何寻找 每次预览HTML页面,都需要打开各种浏览器;哪怕不是调试,只是为了查看下效果; 切换来切换去,各种刷新,感觉有些浪费时间;以前用过DW的实时预览,感觉这个功能很赞; 又踏上了atom插件仓库慢慢寻找之路-.. 插件:atom-html-preview 官方描述:A live preview tool for Atom Editor. 简言之:Atom编辑器内实时预览的工具 获取方式 通过命令行安装 apm install atom-html-preview 通过编辑器内部的instal

Atom编辑器折腾记_(4)按键绑定keymap

简介 Atom编辑器支持自定义按键绑定,文件格式是CSON; 何为CSON 官方解释: This file uses CoffeeScript Object Notation (CSON). 我的解释: JSON + CoffeeScript 写法基本是JSON的写法 按键绑定组成 如图: 设置内的键盘映射图很好的说明了 按键绑定 = 快捷键(Keystroke) + 执行命令(Command) + 来源(Source) + 选择器(Selector) 快捷键不用解释了 执行命令就是按下快捷键所