检查资源

  • 使用 Application 面板的 Frames 窗格可以按框架组织资源。
  • 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源。
  • 要按网域和文件夹查看资源,请使用 Sources 面板。
  • 在 Network 面板中按名称或其他条件过滤资源。

按框架组织资源

使用 Application 面板的 Frames 窗格可以按框架组织页面的资源。

  • 顶层(上面屏幕截图中的 top)是主文档。
  • 在这下方(例如上面屏幕截图中的 widget2)是主文档的子框架。 展开一个子框架可以查看源自该框架的资源。

  • 子框架下方是图像、脚本,以及主文档的其他资源。

  • 最后是主文档本身。

点击资源可以查看其预览。

右键点击资源可以在 Network 面板中查看、将其在新标签中打开、复制其网址或将其保存。

通过在 Sources 面板中点击导航器中的溢出菜单并停用 Group by folder 选项以停止按文件夹分组资源,您也可以按框架查看资源。

资源将仅按框架列示。

按网域和文件夹组织资源

要查看按网域和目录组织的资源,请使用 Sources 面板。

按名称、类型或其他条件过滤资源

使用 Network 面板可以按名称、类型和一系列其他条件过滤资源。 参阅下面的指南了解详情。

chrome开发工具指南(十一)的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  3. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十二)

    使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(六)

    检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...

  8. chrome开发工具指南(十三)

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  9. chrome开发工具指南(九)

    检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有 ...

随机推荐

  1. 如何模拟click事件,打开一个a标签链接?

    在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截. ...

  2. 我的"Hello World!"之旅

    不知从何谈起,回想起三年前的自己,那会是高三:同时也是一个让无数骚年悸动的年代,那时候的我也在一个叫做“召唤师峡谷”神奇的地方闯荡了两年.那么,记忆又会回到2012年的元旦,伴随着几个好友,偷偷摸摸地 ...

  3. iOS源码博文集锦3

    iOS精选源码 高仿淘宝首页 登录动画 iOS高德二次封装,有定位,轨迹,语音实时导航,GPS纠偏..... 逗视iOS客户端MGDS_Swift 两句代码搞定转场动画 自定义刷新控件 已封装支持自定 ...

  4. Linux(6)文件和磁盘管理

    文件和磁盘管理 1. 文件管理ls ls : 查看文件信息. 列出目录的内容 -a :显示指定目录下的所有文件, 包括以.开头的隐藏文件 -l :以列表方式显示文件的详细信息 -h :配合-l显示文件 ...

  5. Django 1.9 admin 使用suit 小记

    最近项目做到了后台管理的部分.Django虽然提供了后台管理,但是界面不咋好看.所以我使用了suit.官网http://djangosuit.com/ 步骤: 1,安装suit 项目settings. ...

  6. [ZYNQ-7]PS处理PL外部中断的简单实例的剖析 (参考米联miz702n)

    Zynq的ARM通过GIC中断控制器来接收核仲裁所有的中断.由于中断向量表只有4Bytes大小,仅仅正好存放一条跳转语句,因此当产生一个外部中断时,中断处理的大致过程:PC内容保存到LR_IRQ用于中 ...

  7. Java继承关系的父子类中相同的成员变量

    最近又重温了一遍<java编程思想>,在看的过程中产生一个想法,java中继承关系的父子类,相同的方法会被重写,那相同的变量会怎样呢? 答案是变量没有重写之说,如果子类声明了跟父类一样的变 ...

  8. BZOJ 3027 Sweets 生成函数,容斥

    Description John得到了n罐糖果.不同的糖果罐,糖果的种类不同(即同一个糖果罐里的糖果种类是相同的,不同的糖果罐里的糖果的种类是不同的).第i个糖果罐里有 mi个糖果.John决定吃掉一 ...

  9. 关于JAVASCRIPT call 方法和 apply 方法性能对比

    JavaScript 关于call 方法和 apply 方法常用形式 call obj.call(object, args , ....); apply obj.apply(object, [args ...

  10. Entity Framework入门教程:Oracle数据源访问

    由于System.Data.OracleClient.dll从.NET Framework4.0之后已被弃用,所以我们无法在.NET Framework高版本中使用.一番搜索之后,发现好多文章提到.N ...