Chrome 调试工具的一些高阶功能
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 调试工具的一些高阶功能的更多相关文章
- chrome调试工具高级不完整使用指南(优化篇)
上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上 ...
- 8.Javascript-map、reduce、filter 等高阶函数
高阶函数 高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们.简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回. 例如Array.prototype.map,Ar ...
- 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)
前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...
- Python使用map,reduce高阶函数模拟实现Spark的reduceByKey算子功能
# 使用默认的高阶函数map和reduce import randomdef map_function(arg): # 生成测试数据 return (arg,1) list_map = list(m ...
- react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行
Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...
- 迈向高阶:优秀Android程序员必知必会的网络基础
1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...
- React进阶之高阶组件
前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
随机推荐
- python的基础数据类型
Python基础数据类型 定义: int => 数字类型 str => 字符串数据类型 bool =>布尔值,True False list 列表,用来存放大量数据 [ ...
- 性能测试工具LoadRunner04-LR之浏览器打不开
环境:win7+lr11 IE浏览器要在9以下,9以上lr11是调不起来的 火狐浏览器,我用的是28,最新版本的也调不起来 可以调起浏览器但没有事件? 1.把INTERNET高级设置中的“启用第三方浏 ...
- OAuth2.0和企业内部统一登录,token验证方式,OAuth2.0的 Authorization code grant 和 Implicit grant区别
统一登录是个很多应用系统都要考虑的问题,多个项目的话最好前期进行统一设计,否则后面改造兼容很麻烦: cas认证的方式:新公司都是老项目,用的是cas认证的方式,比较重而且依赖较多,winform的项目 ...
- Day4下午
不会啊. T1 找规律: 辗转相减,加速. #include<iostream> #include<cstring> #include<cstdio> #inclu ...
- 深入理解vertical-align和line-height的关系
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的.举个简单的例子,如下CSS代码: { line-height: 30px; ve ...
- 利用COM组件实现对WORD书签处写入值
using System; using System.Collections.Generic; using System.Text; using Microsoft.Office.Interop.Wo ...
- webConfig中<customErrors>节点配置
发布在远程计算机上的网站调试问题: 通常情况下我们会设置错误页,不让用户看到错误信息 这种WebConfig的配置方法是: <configuration> <system.web&g ...
- MSSql关闭自增列
在对已经建好表结构的表抽取数据的时候,突然报错,根据Error发现,不能显式插入有自增列的值. 于是搜索后,用 set IDENTITY_INSERT #Tmp onset IDENTITY_INSE ...
- get post put delete
get:获取资源 幂等 post:执行不安全和非幂等操作(幂等:多次请求于一次请求的效果一样) put:更新资源 幂等 delete:删除资源 幂等 如何理解幂等: public book { p ...
- jQuery中的节点操作(二)
html代码如下 <p title="武汉长乐教育PHP系列教程" name="hello" class="blue"> < ...