What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能
原文:https://developers.google.com/web/updates/2017/04/devtools-release-notes#command-menu
参考:https://developers.google.com/web/tools/chrome-devtools/ui#command-menu
1、css、js代码覆盖率:就是找到哪些未使用的css、js代码,这个对于使用模板的前端工作者进行前端优化很有帮助
命令行打开Coverage界面:command+shift+P(mac)/Ctrl+Shift+P(windows,linux);如下图方式,也可以打开Coverage界面
使用Escape可以打开或者关闭Drawer,自己打开过个开发者工具界面,查看效果
在命令行搜索框里搜索Coverage的命令,选择Show Coverage
出现Coverage界面,选择记录按钮或者刷新界面重新记录
选择停止按钮,停止记录
如下图所示,详细的分析结果,图示红色行表示未被使用的行,绿色行表示被使用的行,红绿相间的行表示有的被执行,有的未被执行,下面还有未被使用的css、js百分比
2、阻止某些请求,如图,在network下,某个资源右键,可以添加阻止的资源
再次刷新页面,查看这些资源阻止后的界面效果
3、无需异步等待
下面的代码,以前,当你调试test的时候,总会被setInterval()
中断,现在新的版本的浏览器,当你逐步执行异步代码如 test()
,DevTools 从第一行到最后一行步进。
function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
} // do some work in background.
setInterval(() => 42, 200); //每隔200毫秒输出一个4位数整数 async function test() {
debugger;
const hello = "world";
const response = await fetch('index.html');
const tmp = await wait(1000);
console.log(tmp);
return hello;
} async function runTest() {
let result = await test();
console.log(result);
}
4、胖箭头函数(() => 42)参考:http://exploringjs.com/es6/ch_arrow-functions.html
What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能的更多相关文章
- 我所不知道的 Chrome 开发者工具
http://www.oschina.net/translate/things-i-didnt-know-about-chrome-devtools 自打我开始进行Web开发后,我就一直将Firebu ...
- Chrome开发者工具Debug入门
译者按: 手把手教你摆脱console.log,掌握高级的debug方法. 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fun ...
- Chrome开发者工具之测试应用
一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...
- 神器——Chrome开发者工具(一)
这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
- Chrome开发者工具中Elements(元素)断点的用途
SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...
- Chrome 开发者工具(DevTools)中所有快捷方式列表
Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...
- Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理)
Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理) 前言 Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每 ...
- Chrome DevTools开发者工具调试
1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...
随机推荐
- NGINX: 限制连接的实践 (Defense DDOS)
参考: [ nginx防止DDOS攻击配置 ] 关于限制用户连接,Nginx 提供的模块: [ ngx_http_limit_req_module ] [ ngx_http_limit_conn_mo ...
- twitter api取出的日期格式化
import pickle import datetime crate_time_list=[] twitter_id_list=[] twitter_url_list=[] twitter_text ...
- 汉字hash问题(转)
一.汉字编码的种类 汉字编码中现在主要用到的有三类,包括GBK,GB2312和Big5. 1.GB2312又称国标码,由国家标准总局发布,1981年5月1日实施,通行于大陆.新加坡等地也使用此编码.它 ...
- 【LYOI2016】EasyRound1
这可能是给新高一写的吧……随手写着玩玩…… A:随便模拟 #include<cstdio> #include<cstring> using namespace std; int ...
- shell 通过ANSI转换颜色
格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[控制码" 如果单纯显示字体颜色可以固定控制码位0m. 格式: echo -e "\033[字背景 ...
- 【SQL】服务器环境下的SQL
一.大型数据库的三层体系结构 web服务器:比如在淘宝页面上,输入“牛肉干”,就是web服务器来处理,提交给应用服务器. 应用服务器:在获取到“牛肉干”这个请求后,应用服务器决定如何汇集结果,并进行相 ...
- 回车和换行有什么区别?我们平时按下的Enter键是回车还是换行?
来源:http://www.52rd.com/blog/Detail_RD.Blog_imjacob_12317.html -------------------------------------- ...
- CSU七月校赛B
#include <iostream> #include<cstdio> #include<algorithm> #include<cstring> # ...
- CodeForces 32C Flea
题目链接:http://codeforces.com/problemset/problem/32/C 本文链接:http://www.cnblogs.com/Ash-ly/p/5513436.html ...
- 用JDBC操作MySQL——获取表的大小
JDBC中获取MySQL我们有时需要获得表的大小,这包括了表的行数和列数,我们可以分别用以下的方法得到: 假设我们得到了一个ResultSet对象rs,则操作如下: 读取结果集前获取行数: rs.la ...