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网络面板 调试请求,了解页面静态资源分布 ...
随机推荐
- 在SDK中使用Ubuntu仿真器
Ubuntu仿真器是开发过程中非常有用,尤其是在没有任何Ubuntu设备时.在将仿真器附加到SDK后,你便可以在上面运行程序,安装点击数据包,等等,类似在物理设备上的操作一样. 在这里,您可以了解如何 ...
- python—用for循环、while循环和一句话打印九九乘法表
用for循环打印九九乘法表: for i in range (1,10): for j in range(1,10): print(j,"x",i,"=",i* ...
- Invalidation queue with "bit-sliceability"
BACKGROUND, FEATURES In a computer system having more than one memory storage facility, a special da ...
- IOS UITableViewUITableView小技巧--实现cell向左滑动删除,编辑等功能
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return Y ...
- 【SQL】使用调用层接口
只记录C语言相关的,java相关的JDBC和PHP相关的都先跳过. C相关的也只是记录一下,这里面的语句我都不知道如何运行,在我的vs2010里面连头文件都找不到... 我觉得这里只是讲解了一下基本的 ...
- [BZOJ1176][Balkan2007]Mokia cdq+树状数组
1176: [Balkan2007]Mokia Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 3134 Solved: 1395[Submit][S ...
- 洛谷 P1824 进击的奶牛【二分答案/类似青蛙过河】
题目描述 Farmer John建造了一个有N(2<=N<=100,000)个隔间的牛棚,这些隔间分布在一条直线上,坐标是x1,...,xN (0<=xi<=1,000,000 ...
- HDU 2102 A计划【三维BFS】
A计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...
- 学懂grid布局:这篇就够了(译)
上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...
- 读《thinking in java》第一遍笔记
1.System.out.println(variable)为什么会调用重写的toString方法? 根据我搜到的信息结合源代码,得到以下结论,如有误请告知. 首先我们看一下println方法的源代码 ...