这是我参与新手入门的第3篇文章

chrome-devtools文档 developer.chrome.com/docs/devtoo… snippets文档 developer.chrome.com/docs/devtoo…

看到同事在chrome-devtools调试代码时有一些小技巧，忍不住自己学习一波，在官方文档上看到关于snippets使用时，感觉这就是目前能用来提升开发效率的一个神奇。

平时开发状态

经常会使用一些全局的api来调试我的项目，比如

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

将这段代码放到控制台进行输出可以看到能够输出我们的代码但是下次使用这段代码的时候，还要在控制台重新输入，有什么办法可以把这段代码保存起来，下次直接在控制台执行呢。

记在一个小本本，用的时候做一名CV工程师

这个是chrome的一个谷歌插件《在线记事本》，也是我以前经常用来记笔记的地方

devTools 添加编辑代码片段

这就是 Snippets 的用武之地：它允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块：

打开控制台->选择Sources->在右边点击>>箭头可以选择Snippets(默认是隐藏着的)->添加我们的代码片段

devTools 执行代码片段

从源面板运行片段

我们也可以编辑完代码保存之后，可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它：

运行带有命令菜单的片段

将光标集中在下放图的某处。
按"ctrl+p"或"cmd+p（Mac）"打开命令菜单。
键入字符** !** ，然后键入要运行的片段的名称。enter运行代码片段

在线版Snippets

我们在使用chrome-devTools中的代码片段有一个问题，我只能把代码片段保存在控制台中，想从控制台保存到本地只能一个一个保存，没有办法批量导入和导出，这样换一个环境就没有办法快速的迁移了。所以在网上找到了一个chrome插件，github地址：github.com/SidneyNemze… chrome插件snippets.zip 这是一个通过github-token，github-gists来同步保存代码片段的react项目。

登陆snippets

我们通过github登陆绑定创建的token进行登陆，没有token先创建一个token 登陆之后选择是创建一个GistId还是使用一个原有的GistId，gistId可以看作是一个代码片段的文件夹，我们创建的代码片段都保存在这个文件夹中

查看Gists

我们可以通过github点击头像选择your gists，查看我们的gists 带有secret标签的表示，我们的gist是私密的，只有有密钥的人才能获取到点击一个仓库进去之后可以添加编辑查看我们的代码片段，此仓库的密钥是网络链接上的 gist.github.com/ynzy/9ed99a… 名字后面的那一串，比如这个仓库的密钥是9ed99ac1a97699fd0bdbeef3106098a3 注意：如果你把这串带密钥的链接发给其他人看，是可以看到代码片段的但是如果我返回到这个人的主页面，是看不到他有这个代码片段仓库的，只有公开的才能看得到所以私密的链接千万要注意分享问题