我敢打赌你不知道的六件可以用Chrome的开发者工具做的事情,第一部分

I just got back from TechBash conference in Pennsylvania. It was a great couple of days of meeting new people, reconnecting with old friends, and of course learning a ton.
我刚从宾夕法尼亚州的 TechBash 会议回来。这是几天与新朋友见面、与老朋友重聚的美好时光,当然也学到了很多东西。
Many of the sessions I went to were fantastic, but my favorite session by far was by Mike Rapa about the power of the browser’s devtools. His presentation was (mostly) browser-agnostic, with the exception of a few things, because (and I can attest to this) Firefox’s devtools have markedly improved over the last few years. This post, however, is specific to Chrome, for reasons you will see soon.
我参加的许多会议都很精彩,但我最喜欢的会议无疑是 Mike Rapa 关于浏览器开发工具强大功能的演讲。他的演示(大部分)与浏览器无关,只有少数几件事例外,因为(我可以证明这一点)Firefox 的开发工具在过去几年中显著改善。然而,这篇文章是特定于 Chrome 的,原因你很快就会看到。
So, with thanks to Mike, and a few other sources, here are six things I bet you didn’t know you could do with Chrome’s devtools.
所以,感谢 Mike 和其他一些来源,这里有六件我敢打赌你不知道可以用 Chrome 的开发者工具做的事情。
This is part 1 of this topic, covering items 1-3. I wrote way too much for a single post!
这是该主题的第一部分,涵盖项目 1-3。我为一篇帖子写了太多内容!
In this post we’ll cover:
在这篇文章中,我们将涵盖:
- Time functions with
console.time()andconsole.timeEnd() - 使用
console.time()和console.timeEnd()计时函数 - Watch any DOM element for changes
- 监视任何 DOM 元素的变化
- Monitor any function in the browser’s context
- 监视浏览器上下文中的任何函数
In the second post, coming soon, we’ll cover:
在即将发布的第二篇文章中,我们将涵盖:
- Edit any website WYSIWYG style
- 以所见即所得的方式编辑任何网站
- Record and replay any user actions
- 记录和重放任何用户操作
- Throttle only specific network requests
- 仅限制特定的网络请求
So let’s get going!
那么让我们开始吧!
-
Time functions with
console.timeandconsole.timeEnd使用
console.time和console.timeEnd计时函数I have been vaguely aware of the idea that
console.log()is just one method available in a vast cornucopia of logging methods, and I have dabbled withconsole.warn()andconsole.error(). I cannot say that I have ever usedconsole.table(), although I knew it existed.我对
console.log()只是众多日志记录方法中的一种这一想法有些模糊的了解,我也尝试过console.warn()和console.error()。我不能说我曾经使用过console.table(),尽管我知道它的存...