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

转载于:https://www.cnblogs.com/shengulong/p/7163108.html

What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能相关推荐

chrome控制台如何把vw显示成px_Chrome 开发者工具的11 个高级使用技巧
作者 | bitfish 译者 | 王坤祥策划 | 蔡芳芳来源 | 前端之巅本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具的高级用法.熟练使用这些高级用法可以大大地提高你的 ...
Chrome开发者工具中Elements(元素）断点的用途
2019独角兽企业重金招聘Python工程师标准>>> SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行J ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
程序员的你是否熟练掌握Chrome开发者工具？
写在前面再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...
Chrome浏览器安装devtools开发者工具
Chrome浏览器安装devtools开发者工具 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.但是很多小伙伴无法直接访问谷歌商店,今 ...
Chrome 89 新功能一览，性能提升明显，大量 DevTools 新特性！
今天 Chrome 更新了最新版本 Chrome89,新版本在启动.响应速度上更快,同时 CPU 占用率大幅下降. 比如,提供前进后退缓存(20%的页面可瞬时进退)等特性,号称启动速度快了 25%.载 ...
屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)
2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://w ...
DevTools开发者工具(chrome谷歌浏览器)
概述官方文档 https://developers.google.com/web/tools/chrome-devtools/ (需科学上网) 打开方法: 在Chrome菜单中选择更多工具 > ...
在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能

What's New In DevTools (Chrome 59)来看看最新Chrome 59的开发者工具又有哪些新功能相关推荐

最新文章

热门文章