10个Codepen入门技巧
HTML ， CSS和JavaScript 。
如果您不知道什么是Codepen，或者以前从未听说过Codepen，那么对于三位前端编码的剑客来说，它基本上是一个在线源代码操场 （我们称它为OSCP ，听起来更古怪）。
Codepen是一个超级简单的和流行的网站下笔工作前端代码组合的时候了。
事不宜迟，让我们直接进入使用Codepen的一些基本和有用的技巧 。
Codepen绝对是前端开发人员中最著名的之一。
还有其他类似的OSCP，例如JSFiddle ， JS Bin ， CSSDeck和Dabblet 。
1.运行按钮
当你点击它，你将能够看到， 只要你想更新你的代码的输出。
如果您不喜欢在输入时Codepen中代码的输出保持刷新的方式， 则可以选择退出“自动更新预览”选项 ，而改为使用“运行”按钮。
如果您使用的代码的输出会经历很多布局更改 ，并且每次更新时都会重新绘制，这会很慢，因此这也是一个不错的选择。
2.数字增减
您所要做的就是使用Ctrl / Cmd 和 向上和向下箭头的组合键。
在Codepen中增加或减少代码中的数字， 而无需输入新数字 。
3.多个游标
在这些点上单击时，只需按住Ctrl / Cmd键即可。
仅当您输入相同的信息时，此方法才有效，并减少了复制粘贴的需要。
您可以将光标放在源代码中的多个点上 ，然后同时在所有这些点上键入或编辑。
4.不同的彩色控制台消息
除了log()之外， Console JavaScript对象还有其他一些方法 ，可让您在Web控制台中打印内容 。
通常，Web控制台将这些消息按类型进行着色，或者将在它们旁边显示一个适当的图标（例如警告消息的警告标志） ，以便于识别 。
您可以使用info() ， warn()和error()方法获取信息 ， 警告和错误 。
此控制台以不同的背景色区分不同类型的控制台消息。
非常适合快速检查控制台消息而无需打开浏览器的控制台 。
Codepen有其自己的控制台 ，您可以通过单击左下角的“ 控制台”按钮来打开它。
5.出口
您可以在每支笔的右下角找到“ 导出”按钮。
还有一个将笔保存为Github gist （Git存储库）的选项。
保存后，可以将笔 （单个Codepen实体）导出为ZIP文件 ，其所有内容均以HTML，CSS和JS代码存储在文件中。
6.查找并替换
Ctrl / Cmd + Shift + F是用于打开“查找和替换”对话框的组合键。
查找和替换 –对于那些经常会重命名其变量名的人来说，这是一项必不可少的操作。
7. Emmet标签触发器
您了解Emmet编码的标签触发吗 ？ Emmet是面向前端开发人员的生产力工具，允许您键入框架代码，以后再进行扩展 。 要在Codepen中执行此操作，只需在编辑器中快速键入适当的缩写 ，然后按Tab键，即可立即显示完整的代码。 仅适用于Codepen中的HTML 。
8.获取单个代码文件
但是，如果您仅对其中一个或两个文件感兴趣，并且想要单独下载它们，则Codepen中也提供了一个选项。
如果使用如前所述的“导出”选项，则将获得笔的所有三个文件（HTML，CSS和JS）。
在下拉列表的底部，您将看到各个文件的直接下载链接 。
登录Codepen后，转到笔上，然后单击右上角的“ 更改视图”按钮。
9.检查JavaScript变量
在检查JS变量时 ，此功能特别方便，因为您不必仅出于测试目的就在原始代码中插入额外的控制台或警报消息 。
由于Codepen的JavaScript控制台连接到笔中保存JavaScript，因此您也可以使用它来快速测试JavaScript。
10.将笔转到模板
它将打开一个下拉列表，其中包含所有保存的模板供您选择。
以后创建新笔时，可以通过单击“ 新笔”按钮右侧的向下箭头来开始使用保存的模板 。
要将笔变成模板，请在“设置”菜单下选中“模板”选项 。
如果您倾向于使用相同的代码集来启动大多数笔，则可以使用模板来保存那些重复的代码 。