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. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  2. (转) HTTP & HTTPS网络协议重点总结（基于SSL/TLS的握手、TCP/IP协议基础、加密学）

    HTTP & HTTPS网络协议重点总结(基于SSL/TLS的握手.TCP/IP协议基础.加密学) 原文:http://blog.csdn.net/itermeng/article/detai ...

  3. web service, wcf, wcf rest, web api之间的区别

    在.NET Framework中,有很多种技术可以创建基于http协议的服务,譬如说web service, wcf,wcf rest和web api等等.网上有很多的文章教我们如何开发.使用这几种技 ...

  4. jquery中load()加载页面，刷新之后，加载的页面不显示的解决办法

    <script language="javascript" type="text/javascript"> $(function(){ $(&quo ...

  5. 未能解析引用的程序集......因为它对不在当前目标框架“.NETFramework,Version=v4.0,Profile=Client”中的

    解决方法:资源管理器下点击项目名(右键)属性--将.NET Framework 4 Client Profile改成.NET Framework 4 . 传送门:http://bbs.csdn.net ...

  6. iOS 状态栏设置为白色

    1.首先需要再info.plist中添加一项View controller-based status bar appearance为no 2.在需要的地方添加代码 [[UIApplication sh ...

  7. Java-Excel写与读

    很多时候,一个软件应用程序需要生成Microsoft Excel文件格式的报告.有时,一个应用程序甚至希望将Excel文件作为输入数据.例如,一个公司开发的应用程序将财务部门需要所有输出生成自己的Ex ...

  8. 1像素border

    1像素border 利用伪类和媒体查询: 伪类: border-1px($color) position:relative &:after display: block position: a ...

  9. 关于基于Linphone的视频通话Android端开发过程中遇到的问题

    关于基于Linphone的视频通话Android端开发过程中遇到的问题 运用开源项目Linphone的SDK进行开发,由于是小组进行开发,我主要负责的是界面部分. 由于当时是初学Android开发,对 ...

  10. Azure 1 月新公布

    Azure 1 月新发布:Microsoft Power BI Embedded 公共预览和计算机视觉 API 标准版的更新以及 Azure IoT 网关 SDK 和中心设备管理新功能正式发布以及关于 ...