轩枫阁

首页 / Web前端 / Chrome 59更新日志

Chrome 59更新日志

前言

本文介绍Chrome 59新特性

概要

CSS与JS代码使用率:在Coverage Tab标签页(Chrome Devtools)标出未使用的CSS与JS代码

全页截图:获取从网页顶部到底部的滚动截图

拦截请求:在Network 面板手动禁止某个请求的返回

Step over async await:调试async函数

统一的菜单命令:在新的统一命令菜单中打开文件与执行命令

CSS与JS代码使用率

在新的Coverage tab中标注出为使用的CSS、JS代码。

当加载某个页面,这个Tab会告知当前页面使用了多少代码,加载了多少字节的代码。

可以通过这个方法来减少页面中所需要使用的代码,是提升页面性能的新方法。

Coverage tab

选中某个URL,会在Sources面板中显示该文件已执行的代码行。

Source pannel中代码使用率简介

每一行都使用颜色标记

“绿色行”表示执行的代码行

“红色行”表示代码没有执行

“红绿色行”,如上图中第3行代码,表示该行代码中只执行了其中一部分代码。例如,像这个三元表达式,会同时显示红色与绿色。 var b = (a > 0) ? a : 0

注意:在最新的Chrome版本中,颜色编码可能会发生变化。

打开Coverage tab

打开命令菜单(Win:Ctrl+Shift+P、Mac:Cmd+Shift+P)

输入Coverage,并选择 Show Coverage

全页截图

打开Chrome 控制台,选择移动调试模式,右上角… 选择Capture full size screenshot

或者在命令菜单(Ctrl+Shift+P)中,输入screenshot,并选择即可

拦截请求

有时候想要知道网页在某些指定的JS、CSS或者其它资源不能加载时候的表现,可以使用这个功能。

Network pannel 面板,右击某条请求,选择Block Request URL

此时一个全新的Request blocking tab会出现在Drawer区域,用于管理拦截的请求。

再次刷新页面即可拦截

Step over async await

到目前为止,试图想下面的代码片段一样跳过代码是件非常令人头疼的事。

当在 function test 里面的 debugger 断点之后开始 step over 每一行代码,可能会一直被 setInterval 那行代码中断。

Chrome 59 让 test() 里面的代码不会再被中断,而是可以让你一行一行放心的 step over

统一命令菜单

当打开命令菜单时,会发现命令前会自动加上一个大于符号(>)。

这是因为命令菜单与Open File打开文件菜单保持一致,打开文件的命令为:Control(Command)+O

 

英文原文https://developers.google.com/web/updates/2017/04/devtools-release-notes

相关文章

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]