如果要自己做，就要根据需求，把颜色列表数据存储起来。在页面当中显示可以列出的颜色，当鼠标按住移动的时候，根据当前的坐标移动数值，移动滑块。根据滑块的位置确定当前选取的是哪个颜色的值。
1、TakeColor取色器对于前端开发来说，和颜色、图片打交道是难免的，有的时候想要在ps外面获取颜色.2、CoolFormat源代码格式化工具CoolFormat，不仅仅适用于前端，因为它支持很多语言源代码的格式化，可以在上面的开始菜单中选择你要格式化的语言种类，这里我选择的是js，然后将一串很乱的js代码粘贴到下面的文本框里面，点击快速格式化.3、做笔记的小帮手——有道云笔记其实这有道云笔记不算是小工具了，在这之前，我一直都是用txt记事本记东西的1、直接修改页面元素选择页面上元素，右键“检查”，会打开开发者工具窗口，显示当前选择元素的源代码，可以双击进行修改。
如果要修改的东西比较多，可以折叠元素并单击选择，再右键Edit as HTML修改。
2、颜色取色器
选择页面上元素，右键“检查”，会打开开发者工具窗口，在Styles窗口中，点击一个样式的color右边小方块（如没有color可自己输入如color:red），会弹出颜色拾取器，可以在上面颜色画板上选择一个颜色，也可以选择“笔”图标可以拾取页面上元素的颜色。
3、快速查找并定位文件
查看源代码，鼠标移到开发工具窗口，按ctrl+p，输入链接地址的前几个字母，会自动联想显示所有符合条件的地址，点击打开即可。（有时第一次打开是空白内容，可再点击一次链接）
打开之后，如果是js内容，就可以直接在上面打断点调试，另外可以点击内容框的左下角大括号图标“{ }”(pretty print)，对代码进行排版美化。
4、编辑源代码
（1）【Console】下面输入框输入，不过按回车不是换行，会直接执行，如果有多行代码，需要在别的地方写好再粘贴进去。
（2）【Sources】下面，点击左上角第二行Sources旁边的“>>”打开Snippets，点击“+ New Snippet”新建一个文件编辑脚本，写完右键“Save”保存，再右键点击这个文件“Run”运行。
说明，如果是要覆盖页面js代码：
如果是函数，则是直接以相同的函数名称重写方法即可。
如果是要覆盖页面js代码的按钮事件，则需要重新注册该事件，否则相同的多个事件会全部响应。
$('#id').off().on(function() {
alert('test')
})
5、只分析异步请求资源
【Network】下面点击“XHR”，这样就只会显示XHR异步请求资源，以便于快速分析请求Headers和Response。
