Chrome操作指南——入门篇(二)

830 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第二天,点击查看活动详情

前言

在我们进行前端代码调试的时候,往往会通过 console.log('彼时彼刻嵌入此时此刻')进行输出日志,来查看代码的信息,或根据报错信息,对代码进行调整。而因此必定会涉及对信息的复制,以此报错信息的导出等操作。在此我整理些小技巧,特此来与大家分享。

Store as global variable (存储为全局变量)

当你想对你所打印的信息进行操作的时候,这个时候我们就可以通过鼠标右键,点击 store as global variable把内容赋值给一个新的变量temp1(当然这是值引用,对他的修改,并不会改变原来的变量。),再次创建的时候会生成temp2,以此类推

store as global.gif

copy(...)

console面板提供了一个全局的方法copy()方法,可以用来复制你所有需要的任何资源。例如上文提到的 store as global variable,我们就可以调用copy()方法进行复制,他会存到你的剪切板中,通过快捷 Ctrl + V即可粘贴。

copy.gif

Save as...(导出堆栈信息)

当我们多人开发一个项目的时候,需要对console输出的大量信息进行分析的时候,就可以右键选择Sava as...选项导出堆栈信息,通过堆栈信息对问题进行更好的定位和解决,而不是通过一张纸截图来描述问题,从而减少大量不必要的沟通成本,进而提升工作效率。

Stack trace.gif

Copy HTML

当我们看到一个网站,想要里面的html结构时,就可以单击相应节点旁的三个点(或者直接右键唤起菜单) -> copy -> copy element来对进行复制。

copy element.gif