chrome开发工具指南(十一)
检查资源
- 使用 Application 面板的 Frames 窗格可以按框架组织资源。
- 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源。
- 要按网域和文件夹查看资源,请使用 Sources 面板。
- 在 Network 面板中按名称或其他条件过滤资源。
按框架组织资源
使用 Application 面板的 Frames 窗格可以按框架组织页面的资源。

- 顶层(上面屏幕截图中的
top)是主文档。 在这下方(例如上面屏幕截图中的
widget2)是主文档的子框架。 展开一个子框架可以查看源自该框架的资源。子框架下方是图像、脚本,以及主文档的其他资源。
最后是主文档本身。
点击资源可以查看其预览。
右键点击资源可以在 Network 面板中查看、将其在新标签中打开、复制其网址或将其保存。

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

资源将仅按框架列示。

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

按名称、类型或其他条件过滤资源
使用 Network 面板可以按名称、类型和一系列其他条件过滤资源。 参阅下面的指南了解详情。
chrome开发工具指南(十一)的更多相关文章
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- chrome开发工具指南(一)
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...
- chrome开发工具指南(二)
Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...
- chrome开发工具指南(十四)
模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...
- chrome开发工具指南(十二)
使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...
- chrome开发工具指南(七)
检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...
- chrome开发工具指南(六)
检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...
- chrome开发工具指南(十三)
模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...
- chrome开发工具指南(九)
检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有 ...
随机推荐
- spring集成mybatis实现mysql读写分离
前言 在网站的用户达到一定规模后,数据库因为负载压力过高而成为网站的瓶颈.幸运的是目前大部分的主流数据库都提供主从热备功能,通过配置两台数据库主从关系,可以将一台数据库的数据更新同步到另一台服务器上. ...
- 自定义Git之忽略特殊文件
有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件啦,等等,每次git status都会显示Untracked files ...,有强迫症的童鞋心里肯定 ...
- swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
- HDU-2017-字符串统计
/* Name: HDU-2017-字符串统计 Date: 18/04/17 20:19 Description: 水过 */ #include<bits/stdc++.h> using ...
- selenium + ChromeDriver
Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.而对于爬虫来说,使用Selenium操控浏览器来爬取网上的数据那么肯定是爬虫中的杀 ...
- 数据库db2错误代码大全
sqlcode sqlstate 说明000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互关系的引用+098 01568 ...
- CentOS6 安装Sendmail + Dovecot + Roundcubemail
前言 本文是继CentOS6 安装Sendmail + Dovecot + Squirrelmail 关于邮箱服务器配置的第二篇文章,因为关于使用Sendmail进行相关配置的文章.资料等太老,而且资 ...
- Java入门——(1)Java编程基础
Java入门--(1)Java编程基础 第二章 Java编程基础 JAVA 代码的基本格式: 修饰符 class 类名{ 程序代码 } 2.1关键字:赋予了特殊含义的单词. 2.2标识符: ...
- Oracle dataguard 正常切换和应急切换
oracle dataguard提供异地容灾方案,能有效的防止单点故障和提供高可用技术,这里介绍dataguard正常主备切换和应急切换(应急切换模拟主库出现问题无法还原,备库脱离dataguard接 ...
- 桥接模式二(Bridge)
昨天写到了桥接模式的代码实现,今天我们就继续来讲完桥接模式. 有认真看的会发现,昨天的代码实现只是两个维度的变化:哪么有人可能就会问了哪如果我要加多一个维度呢?我要具体到企业的哪个部门,哪我 ...