检查资源

  • 使用 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. 【附答案】Java 大数据方向面试题,你会几个?

    1.Collection 和 Collections的区别.   Collections是个java.util下的类,它包含有各种有关集合操作的静态方法.   Collection是个java.uti ...

  2. Redis-主从配置了解

    集群的作用: 主从备份, 防止主机宕机(相当于从服务器为主服务器担任备份的作用) 读写分离, 分担master的任务 任务分离, 如从服务器分别分担备份工作和计算工作 redis集群方式 星形: 众多 ...

  3. CentOS 7 安装Subversion, 并用Nginx代理

    环境:CentOS 7.3.1611 分三步:第一步:安装subversion第二步:安装httpd第三步:安装nginx 操作步骤: 安装subversion, 命令 -> yum -y in ...

  4. attr(),addClass()使用方法练习

    这次我主要是想要完成2个li之间样式的变化.方法比较傻,如果有人有更好的办法或者有别问题,希望可以不吝指教. <!DOCTYPE html><html> <head> ...

  5. 为Tornado框架加上基于Redis或Memcached的session 【第三方】

    Tornado 没有session,只有cookie_secret,这在一些情况下是不利于开发的.所有我们可以给Tornado加上session的功能. 这篇文章讲解的是依靠第三方包来实现.以后的文章 ...

  6. 开源蜘蛛集合(转自haizhiguang博客,链接:http://blog.csdn.net/haizhiguang/article/details/20209573)

    各种蜘蛛: Heritrix   点击次数:1458 Heritrix是一个开源,可扩展的web爬虫项目.Heritrix设计成严格按照robots.txt文件的排除指示和META robots标签. ...

  7. Oracle中dblink如何使用

    Oracle中dblink应用小结Oracle应用服务器OS   1.查看数据库的global_name        SELECT * FROM GLOBAL_NAME;    2.查看global ...

  8. 【NO.13】Jmeter - 在Linux整理和计算测试结果

    我们现在描述的是:在Linux系统使用Jmeter执行性能测试. 所以当执行完测试以后,就要计算一下测试结果,反馈给开发人员嘛. 在Linux系统使用Jmeter执行性能测试都包含哪些步骤,来,回顾一 ...

  9. 王佩丰第2讲-excel单元格格式设置 笔记

    点小箭头都可以进入单元格格式设置 跨越合并 添加斜线 回车 ALT+ENTER 格式刷 数字格式 特定红色 货币VS会计专用 日期 2是1月2号,3是1月3号-- 自定义[例子中是在数值后面加&quo ...

  10. 项目管理利器---Maven

    Maven快速入门 maven介绍 maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建.报告和软件的项目管理工具.简单来说,maven可以帮助我们更有效的管理项目,也是一套 ...