前言
上篇文章介绍了 源代码面板中的 workspaces 功能， 可以让我们“面向浏览器编程”， 在浏览器中实时的修改样式和html。 自动热更新到文件中进行修改， 大大简化了我们的开发流程， 今天讲讲 控制台面板 以及 一部分的源代码 面板的内容， 绝对干货满满。
1、你不知道的 console
在聊控制台面板时先简单讲一下 console 热热身 浏览器的控制台面板是开发者工具的一部分，它提供了一个交互式的环境，用于在浏览器中进行调试、查看错误和输出日志等操作。其中最常用的功能是控制台(console)
console 有以下几种用法
console.log 输出普通消息 console.error 输出错误消息 console.warn 输出警告消息 console.info 输出信息性消息 console.clear 清楚控制台中的所有输出 console.table([{name:'jon',id:1}]) 打印表格
除了上述方法外console还提供了丰富的功能，如计时器 console.time console.timeEnd 打印带样式的日志 console.log("%c Some styled test","color:blue;")
2、调试技巧
在控制台面板，我们除了查看console， command+f 搜索想看的内容， 还可以通过上面的过滤，查看想看的部分， 可以通过不同的 错误、警告、信息分情况打印。 除此之外， 还有一个很好用的调试代码的地方，就是上面带有一个小眼睛的按钮， 这里可以监视 变量的变化并实时显示出来，在做一些操作或者canvas画图，计算的时候非常好用
举一个很简单的例子，我们如果想实时查看浏览器当前的宽度，如果用console的话要添加一个resize事件，然后在打印window.innerWidth 比较麻烦，而且打印的值非常多， 但是在监听里只需要输入 window.innerWidth 就能直接实时进行监听了， 复杂的场景下好处可能更加明显， 比如监听一个DOM的拖拽，监听浏览器的scroll 等等
3、让浏览器像node一样安装各种插件，变身codepen
在讲完console、调试后， 再将一个很有意思的东西， 就是在控制台其实也可以直接安装使用各种库，来进行使用， 比如我想在控制台使用lodash、使用moment 如果不想安装，也不想在本地写代码，能实现吗？ 也可以实现， 只不过我们需要在浏览器中安装一个插件 Console Importer
在浏览器的控制台中，你可以安装你常用的任何库， 比如lodash、moment、jquery ...
$i('lodash')
这样我们就可以在控制台，调试，学习各种类库
原理： 打开源代码我们回发现， $i('lodash') 拉代码时会把lodash 库的源码进行安装到这里
扩展知道原理之后， 我们会发现如果刷新， 其实在使用lodash将无法使用， 需要再次安装才能使用， 那么可以只安装一次吗， 其实我们可以通过源代码中的代码块来解决， 类似编辑器中的 Code Snippets
我们还是赋值上图中的lodash.min.js文件中的内容，粘贴到代码块中， 新建一个lodash的代码块
每次想要使用，运行代码块即可，这里刷新也不会丢失
4、总结
综上， 我们简单介绍了 console 的一些用法，然后除了console之外， 一些其他的调试方式手段， 然后通过安装插件 使用 $i 这个命令在浏览器中安装 类库， 直接在 控制台中 使用这些类库， 非常适合学习和提高开发效率， 最后，看了一下大致原理， 以及文件源码中 代码块的使用， 可以让浏览器帮我们记一些平常常用的代码片段， 在使用的时候直接运行即可
