Chrome 75 开发者工具更新

当自动补全CSS的时候使用有意义的预设值

有些CSS属性的值是函数,比如filter: filter: blur(1px) 添加了1像素的模糊。当自动补全filter这样的属性是,开发者工具现在会自动填充一个有意义的值,这样你可以预览有什么可能的值。

使用命令菜单来清理网站数据

按下"Control+Shift+P"或者"Command+Shift+P"(Mac)打开命令菜单,然后可以运行”Clear Site Data“命令来清除站点数据,包括: service workers, local storage, session storage, indexed DB, web SQL, Cookies, cache, Application cache

查看所有IndexedDB数据库

过去,Application -> IndexedDB 只能让你查看主来源里面的IndexedDB。比如,如果你有个iframe用了indexedDB,你是看不到的。现在开发者工具将显示所有来源的indexedDB。

鼠标悬停的时候查看某资源的未压缩大小

当你查看网络活动时,如果站点使用了文本压缩来减少传输文件的大小,你也许想看看压缩前的大小。以前只有使用”large request rows“的时候能看到。但现在你只要用鼠标悬停在Size那一列上就可以看到。

断点窗格里的行内断点

假如你在如下行上加了断点:

document.querySelector('#dante').addEventListener('click', logWarning)

现在可以明确指定在哪一步暂停了:

  • 在这一行开始
  • 执行querySelector之前
  • 执行addEventListener前

如果你enable了全部,那么实际上你创建了3个断点。

IndexedDB和缓存资源计数

在IndexedDB和Cache窗格中现在会显示所有资源总数。

禁止"查看细节"Tooltip

Chrome 73引入了“查看细节”tooltip。现在可以在Settings -> Preferences -> Elements -> Show Detailed Inspect Tooltips里面关掉它。

设置在Source面板中Tab可以用于缩进

因为Tab在Editor中用于输入缩进,但只要就不能用它来切换焦点了。如果想使用tab键来切换焦点,可以在Settings -> Preferences -> Sources -> Enable Tab Moves Focus中来设置。

发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/97615517