chrome开发者工具功能拾遗:Network面板篇
来源:互联网 发布:数控编程 g92 参数 编辑:程序博客网 时间:2024/05/16 15:55
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率。
Capture screenshots(捕捉网页截图)
Capture screenshots
是自动分析DOM树的变化,截下DOM树变化各个重要阶段时的页面,尚不清楚是如何判断截图时机的(不过肯定是在DOM树有变化的时候才截图的)。除了截图外,还能看到每个截图所对应的Network
情况,通过横向比较,可以发现一些请求(图片、js、css、xhr等)对页面的影响,举例来说:在加载某js前,页面上是没有菜单的,加载后菜单就出来了,那就可以粗略地判断此js与菜单有关。
另外,这功能对于解决页面抖动
(最常见于MVVM框架的DOM树渲染,以及由于图片未加载导致该区域尺寸未定的情况)也有很大的帮助。
此功能应该比较新,在网上看chrome开发者工具相关文章时,发现他们的版本根本就没有这个功能(从开发者工具界面截图得知),也不知道他们用的是什么版本,反正我的chrome 46
是有这功能的。
使用这功能的方法如下:
1. 打开Network
面板,点亮左上角那个像是摄像机的图标(鼠标移上去会提示Capture screenshots
)。
2. 点亮该图标后,会打开新的一折叠面板,在该面板上会提示按Ctrl + R
来启动截图。
3. 按Ctrl + R
后,截图就自动完成了,如下图所示:
4. 双击某截图就能看大图。
5. 点击选中某截图,就能查看该截图时刻的Network
情况。
0 0
- chrome开发者工具功能拾遗:Network面板篇
- chrome开发者工具功能拾遗:Elements面板篇
- chrome开发者工具功能拾遗:Sources面板篇
- Chrome开发者工具面板功能
- Chrome开发者工具详解(2)-Network面板
- Chrome开发者工具详解(2)-Network面板
- Chrome开发者工具之Network面板
- Chrome开发者工具面板
- Chrome浏览器开发者工具-----Network
- Chrome开发者工具详解(3)-Timeline面板
- Chrome开发者工具详解(4)-Profiles面板
- Chrome开发者工具详解(3):Timeline面板
- Chrome 开发者工具详解(4):Profiles 面板
- Chrome开发者工具详解(3)-Timeline面板
- Chrome开发者工具详解(4)-Profiles面板
- 浅谈Chrome开发者工具--- Element面板
- Chrome开发者工具详解(1)-Elements、Console、Sources面板 Chrome开发者工具面板
- chrome 开发者工具不完全指南(一、基础功能篇)
- Search in Rotated Sorted Array
- 数据结构实验之查找二:平衡二叉树
- 安装PHP7
- iar msp430 编译文件提示非法的license错误
- Socket原理与编程基础
- chrome开发者工具功能拾遗:Network面板篇
- 学习笔记——关于指向常量指针的解引用的发现
- 上班没弄完的东西,回家接着做。
- xvid 源代码 阅读
- 数据结构实验之查找四:二分查找
- BJFU 1010 博弈 解题报告
- nyoj 67 三角形面积 【几何】
- 第二天
- JS 整理的答疑