【译】你不知道的 Chrome 调试工具技巧 第十五天:Twitter day!

3,293

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇,一直更新到 12 月 24 日
版权归原作者所有。

作者在Twitter上推荐我们的中文翻译啦,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,授权的记录在这里

正文

在马上就要迎来假期的这 24 天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,昨天我们学习了一些实用的 DevTools 的快捷键,今天我会做(tou)一(ge)些(xiao)改(lan)变,并从社区中获取一些 tips 。我们可以称之为 Twitter appreciation 日 ;-)

40. monitorEvents function monitorEvents函数

还记得前几天我们讨论了用 monitor 方法来监听函数?你可以使用名为 monitorEvents 的函数,对 events 做一样的事情。

来源:Chrome DevTools认证账号

顺便说一句如果你还没关注ChromeDevTools的话,赶紧关注。

41. console.log 基于调用堆栈自动缩进

此处应有掌声 🤯 (译者注:这句为意译)

这太酷了!我在想是不是把这条加入到我们这周早些日子的custom formatters tip

42. 给你的 console.log 加上 CSS 样式

给你的打印文本加上 %c 然后 console.log 的第二个参数变成了...CSS 规则!你可以利用这一点让你的日志脱颖而出(例如 Facebook 在你打开 console 的时候所做的一样)

来源:Álvaro Trigo 🐦🔥

43. replay XHR requests (重新发送 XHR 的请求)

如题所示

来源: Chrome Developers

44. expand all child nodes in Elements panel 在元素面板中展开所有的子节点

相比于点击级联的 按钮,不如使用右击节点后的 expand recursively 命令:

来源:Umar Hansa@umaar

Umar 有超多机智的 tips ,我说的是 超多 。墙裂推荐!

今天的分享就到这里~

惯例: 如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我:Twitter:Tomek Sułkowski

其他系列

其他此系列的文章,马上就会翻译出来,到时会贴出对应的链接在此处。

写在最后

如果你对我的翻译表示肯定,也可以关注我一波哦~ 顺便我的开源项目,求一波 star→ 看这里, 美丽的博客系统

作者在Twitter上推荐我们的中文翻译啦