特别声明
本文是作者 Tomek Sułkowski https://twitter.com/sulco 发布在 https://medium.com/@tomsu 上的一个系列. 据作者透露一共有 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. http://Developers.google.com
当我在撰写这篇文章系列时, 我确实积累了最喜欢的功能和技术, 但除此之外, 我还在浏览官方 Google Developers 网站, 该网站支持你 ("按年") 或 技术 ("按标签") 查看有关特定更新的信息, 就像这个, 关于最近发布的 Chrome 71:
New in 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 https://twitter.com/sulco 并且最后:
祝各位圣诞节牛逼, 元旦牛逼!!!
写在最后
时间真快, 这个系列就已经完结了, 经历了 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 后续
来源: https://juejin.im/post/5c26f4a36fb9a049f3622e10