特别声明
本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇,一直更新到 12 月 24 日
版权归原作者所有。
作者在 Twitter 上推荐我们的中文翻译啦,截图在最后
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,授权的记录在这里
正文
在马上就要迎来假期的这 24 天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,昨天我们谈到了code coverage
以及 change
面板,然后今天...
今天是 DevTools advent calendar
的最后一天啦!时间过得真快!一起来尝试几个随机的 tips
好吗?
67. Use console.log in callback directly(直接在回调中使用 console.log
)
我经常发现自己处于这样一种情况,就是我不完全确定要将什么传递给回调函数。在这种情况下,我会在里面添加一个 console.log
来检查。
有两种方式来实现:在回调方法的内部使用 console.log
或者 直接使用 consolelog
来作为回调方法。这不仅可以减少输入,而且可能回调接收多于1个参数,在第一个解决方案中你可能会错过
68. Find in elements, logs, sources & network(elements, logs, sources & network 的查找)
DevTools
中的前4个主要的面板,每一个都支持 [ctrl] + [f]
快捷方式,你可以使用相关的查询方式查找信息:
-
在
Elements
面板中 - 通过string
,选择器 或者XPath
来查找 -
而在
Console
,Network
以及Source
面板 - 通过区分大小写,或者可以被视为表达式的strings
, 来查找
69.Use live expressions 使用实时表达式
2个月前,DevTools
在 Console
面板中引入了一个非常漂亮的附加功能,这是一个名为 Live expression
的工具
只需按下 "眼睛" 符号,你就可以在那里定义任何 JavaScript
表达式。 它会不断更新,所以表达的结果将永远,存在 :-)
你可以同时定义几个:
70.保持最新
如果我用一句话来总结所有的24 days of tips的话,读起来像是这样:
“DevTools是一款功能强大的软件,很容易被低估。 它有许多隐藏的功能,我们甚至常常怀疑是否需要那些”
好吧,那是两句话,无论如何,想想这个套件中有多少可能会令人无所适从的工具(不知道该如何用)。 并不断追寻最新添加的!
70.1. Google Chrome Developers
我高度推荐你订阅 Google Chrome Developers
的 YouTube
频道,这是在Chrome
中展示已有的新内容的地方。 不仅如此,你还可以去那里寻找有关最佳实践,JavaScript演变等的讨论。为任何前端开发人员提供许多有价值的内容。
Google Chrome Developers - YouTube
70.2. Developers.google.com
当我在撰写这篇文章系列时,我确实积累了最喜欢的功能和技术,但除此之外,我还在浏览官方Google Developers
网站,该网站支持你(“按年”)或 技术(“按标签”)查看有关特定更新的信息,就像这个,关于最近发布的Chrome 71
:
70.3. This isn’t over 这并不是结束
最后,即使 “Advent Calendar” 已经结束,但我还没有用尽积累的 tips
! 到目前为止。
我绝对不会每天都发布它,但是这些 tips
无法停止 - 我对这种让我们的工作更轻松,更有趣的可能性感到非常兴奋:-)
我将继续在 Medium ,我的 Twitter 帐户上发布这些内容,很快也会在 YouTube 上发布(是的,gif有点被限制😅)
所以,如果你使用的是JavaScript / TypeScript / CSS / React / Angular / Chrome - 让我们保持联系! 来这里 → 关注我:Twitter:Tomek Sułkowski 并且最后:
祝各位圣诞节牛逼,元旦牛逼!!!
写在最后
时间真快,这个系列就已经完结了,经历了24篇的翻译,也还是保持了最开始的态度,提升自己的同时,也可以为其他的朋友们带来一些价值,在这个过程中得到了很多人的鼓励和帮助。谢谢~
另外:我已经和作者在沟通小册的事情,我尽力争取说服 Tomek
让这个系列成为一本免费的小册,这样可以更方便大家阅读。
接下来也会持续输出优质的内容,无论是译文还是原创系列
此致,敬礼,大家元旦牛逼~
其他系列
其他此系列的文章,马上就会翻译出来,到时会贴出对应的链接在此处。
- 【译】你不知道的 Chrome 调试工具技巧 第一天:console 中的'$'
- 【译】你不知道的 Chrome 调试工具技巧 第二天:copying & saving
- 【译】你不知道的 Chrome 调试工具技巧 第三天:console methods
- 【译】你不知道的 Chrome 调试工具技巧 第四天:the Elements panel(元素面板)
- 【译】你不知道的 Chrome 调试工具技巧 第五天:console 的 log 中,让人疑惑的案例
- 【译】你不知道的 Chrome 调试工具技巧 第六天:command 菜单
- 【译】你不知道的 Chrome 调试工具技巧 第七天:异步 consle 的趣味小窍门
- 【译】你不知道的 Chrome 调试工具技巧 第八天:Color picker(颜色选择器)
- 【译】你不知道的 Chrome 调试工具技巧 第九天:给 console 计时
- 【译】你不知道的 Chrome 调试工具技巧 第十天:custom formatters(自定义格式转换器)
- 【译】你不知道的 Chrome 调试工具技巧 第十一天:style editors continued(样式编辑器后续)
- 【译】你不知道的 Chrome 调试工具技巧 第十二天:忍者日志打印!(the ninja logs)
- 【译】你不知道的 Chrome 调试工具技巧 第十三天:对象 & 方法
- 【译】你不知道的 Chrome 调试工具技巧 第十四天:其他快捷键~
- 【译】你不知道的 Chrome 调试工具技巧 第十五天:Twitter day~
- 【译】你不知道的 Chrome 调试工具技巧 第十六天:断点
- 【译】你不知道的 Chrome 调试工具技巧 第十七天:再会 console
- 【译】你不知道的 Chrome 调试工具技巧 第十八天:Drawer 里的秘密
- 【译】你不知道的 Chrome 调试工具技巧 第十九天:深入 Drawer
- 【译】你不知道的 Chrome 调试工具技巧 第二十天:Workspace的黑魔法
- 【译】你不知道的 Chrome 调试工具技巧 第二十一天:Snippets(代码块)
- 【译】你不知道的 Chrome 调试工具技巧 第二十二天:network
- 【译】你不知道的 Chrome 调试工具技巧 第二十三天:Drawer tips 后续
- 【译】你不知道的 Chrome 调试工具技巧 第二十四天:最后一天,元旦牛逼