Chrome 内置抓包工具 
Block requests 
截取长图 
代码的覆盖率分析 
Make site better

Chrome 内置抓包工具

在浏览器地址栏输入chrome://net-internals/#events,即可打开自带的抓包工具。工具处于live状态,其他tab 页有请求刷新,列表会随之刷新请求的快照,点击快照可查看详细的请求信息,配合 network面板能看到一个完整的请求。

Block requests

network 面板右击请求即可看到 block 选项,这个选项能够使我们在请求和域的级别上打断点。

eg: 配合 Preserve log 可以监测请求在不同域之间转发跳转时状态变化(请求在不同域之间转发跳转,network面板会经常性地丢失 response)。

截取长图

切换 device 到其他模式(比如调试移动端)时,右边菜单栏提供了 capture full-page screenshots的选项。

eg: 配合这个选项可以做一些 module lazyload 的优化。

代码的覆盖率分析

通过coverage 面板可以找到没有用到的 css和 js 代码,点击单个文件可以查看详情,并且也是处于 live 状态,页面发生变化时,覆盖率报告也会随之刷新。通过右边菜单 more tools 或者通过快捷键 ctrl + shift +p (windows) 输入coverage 即可打开 coverage。

Make site better

Audits panel 提供了 PWA, performance, 无障碍,最佳实践四个维度的网站测试报告。提供了不是很常见的无障碍测试,配合报告我们可以进行更好的无障碍优化。

在每次发布版本时,Chrome Devtools Updates 会提示更新的内容。当然,最简单的方法就是保持chrome的版本更新,更新后 devtool 面板会自动推送 features && changes

Chrome 调试工具的一些高阶功能的更多相关文章

  1. chrome调试工具高级不完整使用指南(优化篇)

    上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上 ...

  2. 8.Javascript-map、reduce、filter 等高阶函数

    高阶函数 高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们.简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回. 例如Array.prototype.map,Ar ...

  3. 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  4. Python使用map,reduce高阶函数模拟实现Spark的reduceByKey算子功能

    # 使用默认的高阶函数map和reduce import randomdef map_function(arg):  # 生成测试数据 return (arg,1) list_map = list(m ...

  5. react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行

    Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...

  6. 迈向高阶:优秀Android程序员必知必会的网络基础

    1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...

  7. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  8. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  9. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

随机推荐

  1. 对象池1(方法功能)PoolOption

    2.对象池PoolOption(方法功能) //单类型缓冲对象管理(单模池操作管理)功能: 激活.收回.预加载等. namespace kernal { [System.Serializable] p ...

  2. python文件操作和集合(三)

    对文件的操作分三步: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句柄操作文件 3.关闭文件. 文件基本操作:         f = open('file.txt','r') #以 ...

  3. EDP项目结构规范心得

    本文结合最近心得,希望对项目结构方面知识进行归纳,包括两部分 一.目录结构的说明 二.目录结构标准规范(以百度efe团队为例) 下面切入正题: 一.项目目录结构说明: 项目结构具体说明: 1.src目 ...

  4. Java对于成对括号的提取

    在工作的项目当中,经运营人员的反馈,发现提供服务的指定属性字段的值为空,导致搜索引擎无法正常搜索到正确的结果. 原始的字符串提取程序为: // 只取对应符号分割的第一部分name.split(&quo ...

  5. shell脚本的使用

    $#  返回命令行参数个数 $n  接受终端指定位置参数 $*  接受终端所有参数(不包含 $0) $@  接受终端所有参数(不包含 $0,在for循环时和 $* 的表现有差异) $?  返回上一次程 ...

  6. HDU 5587——Array——————【规律】

    Array Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Sub ...

  7. 前端如何做好SEO优化

    https://www.cnblogs.com/weiyf/p/9511021.html 一:什么是SEO? 搜索引擎优化(Search Engine Optimization),简称SEO.是按照搜 ...

  8. GDI+图形图像处理技术——GDIPlus绘图基础

    GDI+概述 GDI在windows中定义为Graphis Device interface,及图形设备接口,是Windows API(application Programming Interfac ...

  9. 第三方缓存软件memcached和redis异同

    memcached和redis相同点:都是以键值对的形式来存储数据,通俗讲就是一个大的hashtable缓存数据都是存在内容中 key-value 不同点:memcached:1.一个key所对应的值 ...

  10. if转switch

    if($a=="a") { echo "a"; } elseif ($a == "b") { echo "b"; } e ...