- Published on
02-复制 & 保存
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
在调试的过程中,我们总要对 Dev Tools 里面的数据进行 复制 或者 保存 的操作,所以我们来看看,关于这些,有什么小技巧呢?
1. copy(...)
你可以通过全局的方法 copy()
在 console
里复制任何能拿到的资源(我们在后面还会提到这些资源)。例如 copy($_)
和 copy($0)

2. Store as global
假如你在 console
中打印了一堆数据 (例如你在 App
中计算出来的一个数组) ,然后想对数据做额外的操作,比如刚刚说的 copy
(在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量,只需要 右击 它,并选择 “ Store as global variable
” (保存为全局变量) 选项。
第一次使用的话,它会创建一个名为 temp1
的变量,第二次创建 temp2
,以此类推。
使用这些变量来操作对应的数据,就不用担心会影响到原来的值了:

3. 保存堆栈信息(Stack trace)
大多数情况下,开发项目是一个团队协作,而沟通的关键是,如何准确的描述问题 , console
打印出来的堆栈的追踪信息,可以省去你和同事的很多沟通成本,我们可以直接把堆栈追踪信息保存为一个文件,而不只是发个截图给对方:

4. 直接复制 HTML
相信大家都知道,右击或者点击在 HTML
元素边上的省略号 (...) 就可以将当前元素复制到剪贴板中:

但你不知道的是:古老的“CV大法”也可以!

Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021