【译】你不知道的Chrome调试工具技巧第二天：copying & saving

转载于 2018-12-07 06:06:05 发布 · 121 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c0a0d5ff265da61117a1c75

文章标签：

#前端 #操作系统 #开发工具 #ViewUI

了解如何利用Chrome的开发者工具提升工作效率，包括使用copy()快速复制资源、将数据转换为全局变量、保存堆栈跟踪及快速复制HTML等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。
版权归原作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们已经提了 4 个,所以今天我们就从这个编号开始...

5. copy(...)

你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，包括我们在上一篇中提及的那些变量。例如 copy($_) 或者 copy($0)

6. Store as global

如果你在 console 中打印了一堆数据(例如 App 中计算出来的一个数组),然后你想对这些数据进行额外操作，例如，使用我们刚刚说的 copy ，那就可以轻松将它转换成一个全局变量：

只需右击，并且选择 “Store as global variable”(保存为全局变量) 这个选项。

第一次使用的话，它会创建一个名为 temp1 的变量，然后是 temp2 等等。这样你就可以操作各样的数据，而不用担心他们会被复写。

7. 保存(Stack trace)堆栈跟踪

对你和你的同事来说，堆栈跟踪信息都会很有用。(例如 : 与其他的前端开发者合作，或者是 QA (测试) 工程师)。所以我们可以直接把堆栈跟踪保存为一个文件而不是截图。

8. Copy HTML (最快的方式)

可能你知道右击或者点击在 html 元素边上的省略号(...)就能将它 copy 到操作系统剪贴板中但你同样可以用非常古老的 [ctrl] + [c] + [ctrl] + [v] 大法来实现同样的效果！

这就是今天的内容啦，简短但是暖心~ 惯例：如果你从这里学到了一些新东西

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

其他系列

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

写在最后

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。