首页草堂散记前端开发技术文档收藏

FeHelper浏览器插件

发表于 2019-07-10 10:32:32 | 下载附件

浏览器插件JS格式化美化WEB前端肋手JS调试

功能简介

FeHelper--弹出菜单

插件入口，点击ICON，插件相关的所有功能都会在这里列出来，在popup中选择所需使用的功能即可使用

JSON接口自动格式化查看

当你访问的接口（打开的页面）返回的是一个JSON格式的数据，FeHelper会自动将内容进行格式化处理，便于您的查看

JSON查看器

把你的JSON代码粘贴到JSON查看器的输入框中，点击“格式化”，在下方便会以非常友好的方式列出JSON数据，便于查看

代码美化

包括Javascript代码美化、CSS代码美化、HTML代码美化；其实所有C系的代码，都可以通过Javascript代码美化工具进行格式化查看

代码压缩

包括Web前端Javascript代码压缩、CSS代码压缩、HTML代码压缩

字符串编解码

包括Unicode编码和解码、UTF-8字符串编码和解码、Base64字符串编解码、字符串MD5编码，前端非常实用的工具

图片Base64编码

对图片文件进行base64编码，直接拷贝datauri格式的数据

二维码生成器

能对网址、普通文本内容、电话号码、通讯录、短信等编码并生成二维码，很实用的二维码生成工具

二维码解码

针对网页上的二维码，点击右键，选择【二维码解码】，可在当前页面直接看到解码结果！

全网页截图

针对整个网页进行滚动截屏，在新窗口可预览后再手动保存

时间（戳）转换工具

支持任意时间到对应时间戳的转换；支持任意时间戳到对应日期的转换

正则表达式工具

提供一个正则表达式的及时测试工具，并能将匹配结果进行高亮显示、高亮定位等；同时还罗列了一些常用的正则表达式供开发者使用

页面取色工具

提供一个网页取色的工具，任意页面均可使用，方便大家在开发过程中能精准获取某元素的颜色值，再也不用截图后再通过Photoshop取色了

编码规范检测

对当前网页进行Javascript、CSS、HTML编码规范的检测，包括文件是否压缩、标签是否正确闭合、cookie管理等等

页面性能检测

对当前页面的性能进行检测，如HTTP响应时间、页面渲染时间、是否启用gzip压缩等等

FeHelper配置页

在这里，你可以随意定制属于你自己的FeHelper常用功能！
解决sublime text3无法安装插件问题

发表于 2019-06-26 11:28:49 | 下载附件

sublimesublime 无法安装插件问题安装插件
网上查了找到的方法就是改变安装channel_v3.json的配置文件。

解决方法：
Package Control.sublime-settings]修改方法：
Preferences > Package Settings > Package Control > Settings - User

添加以下代码：
```
"channels":[
    "http://cst.stu.126.net/u/json/cms/channel_v3.json",
    //"https://packagecontrol.io/channel_v3.json",
    //"https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
    //"https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
],
```
Sublime3 markdown preview 修改输出的html页面的默认样式

发表于 2018-07-23 16:34:41 | 下载附件

markdown preview修改 markdown 输出 html的默认样式样式修改

在sublime3 中安装了 Markdown Preview，Alt + M 生成的HTML页面，但样式有点不好看，想自定义样式，网上百度了半天，终于搞定，手记如下

菜单栏中点击首选项 -> 浏览插件，打开文件后，搜索文件名 Markdown Preview.sublime-package，如果找不到，则进入到【C:\Program Files\Sublime Text 3\Data\Installed Packages】这个位置，下面就有 MarkdownPreview.sublime-package

将其改为 MarkdownPreview.sublime-package.zip，打开压缩文件找到 markdown.css ，修改里面的值如 width: 45em 为 width: 75%，保存后重新打包，注意新的压缩包应直接包含原有包的所有文件，再去掉 .zip 后缀，重新打开sublime，用 Alt + M 生成的HTML文件已经是你修改后的输出样式了。

附上githu链接及手动安装的包文件：
https://github.com/revolunet/sublimetext-markdown-preview
markdown 纺辑浏览及 sublime text 插件安装

发表于 2018-07-23 10:33:36 | 下载附件

mdMarkdownsublime text for MarkdownMarkdown 插件md 编辑浏览
1. 打开Package Control。
  这个是必装的，我们假设你已经安装了，如果没有安装，我们也假设你已经装了，就是这么霸道。
  快捷键Ctrl + Shift + P，输入install，选Install Package
2. 安装MarkdownEditing
  快捷键Ctrl + Shift + P，输入MarkdownEditing
  安装完整个插件之后，你可以直接在编辑的时候看到效果
3. 安装Markdown Preview进行预览
  如果不满足于只在编辑的时候看，可以试试这个，能在浏览器中看
4. 自定义快捷键
  点击 Preferences --> 选择 Key Bindings，输入：
```
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
```
  完成后，其中keys后面的 alt+m 是自己定义的快捷键，可以直接在浏览中查看 markdown文件显示效果

解决Sublime Text 3中文显示乱码（tab中文方块）问题

发表于 2018-06-02 02:00:56 | 下载附件

Sublime Text 乱码3 tab中文乱码

import urllib.request,os,sys;
exec("if sys.version_info < (3,) or os.name != 'nt': raise OSError('This code is for Windows ST3 only!')");
pr='Preferences.sublime-settings';
ip='ignored_packages';
n='Package Control';
s=sublime.load_settings(pr);
ig=s.get(ip);
ig.append(n);
s.set(ip,ig);
sublime.save_settings('Preferences.sublime-settings');
pf=n+'.sublime-package';
urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));
by=urllib.request.urlopen('https://packagecontrol.io/'+pf.replace(' ','%20')).read();
open(os.path.join(sublime.installed_packages_path(),pf),'wb').write(by);
ig.remove(n);
s.set(ip,ig);
sublime.save_settings(pr);
print('Package Control: 3.0.0 upgrade successful!')

sublime 配置屏蔽文件夹和文件类型

发表于 2018-03-29 10:03:31 | 下载附件

sublime text屏蔽文件夹屏蔽文件过滤文件和文件夹

打开 sublime text 首选项 -> 设置用户配置如下代码

{
	"color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
	// 屏蔽文件夹
    "folder_exclude_patterns": ["node_modules",".git","dist"],
    // 屏蔽文件类型
	"file_exclude_patterns":[
		"*.pyc",
		"*.pyo",
		"*.exe",
		"*.dll",
		"*.obj",
		"*.o",
		"*.a",
		"*.lib",
		"*.so",
		"*.dylib",
		"*.ncb",
		"*.sdf",
		"*.suo",
		"*.pdb",
		"*.idb",
		".DS_Store",
		"*.class",
		"*.psd",
		"*.db",
		"*.sublime-workspace",
		"*.d",
		"*.tags*",
		"*.cmd",
		"*.mod.*",
		"*.symvers",
		"*.order",
		"*.jpg",
		"*.png",
		"*.jpeg",
		"*.psd",
		"*.pdf",
		"*.mp3"
	],
	// 文字显示大小
	"font_size": 19.0,
	// 文字根据屏幕大小自动换行，防止水平滚动 true | false | "auto" 
	"word_wrap": "auto",
	"ignored_packages":
	[
		"Vintage"
	]
}

git简明使用教程

发表于 2018-03-21 13:17:56 | 下载附件

gitgit clone版本管理

参考：

简明教程：http://www.runoob.com/manual/git-guide/

菜鸟教程：http://www.runoob.com/git/git-tutorial.html

基础教程：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/

// 初始化
$ git init
$ git config --global user.name "arttanzl"
$ git config --global user.email "630804990@qq.com"

// 关联远程仓库
$ git remote add origin gitl@192.168.1.200:arttanzl/admin-zhaocaimao.git

// 如果文件夹是全新的，需新建文件
$ git add .
$ git commit -m "INIT"

// 推送至远程对应分支
$ git push -u origin --all

// 关联远程主分支
$ git branch --set-upstream-to=origin/master master

// 更新远程分支 master 代码至本地
$ git pull origin master --allow-unrelated-histories
$ git pull

// ---------------------------------------------------
// 创建本地dev分支
$ git checkout -b dev

// 更新远程分支 dev 代码至本地（远程分支要有dev分支存在）
$ git pull origin dev --allow-unrelated-histories

// 关联远程 dev 分支
$ git branch --set-upstream-to=origin/dev dev

// 简化操作
$ git pull
$ git push

colorpix怎么用？colorpix使用方法桌面颜色即时获取小插件使用文档

发表于 2017-04-17 14:53:52 | 下载附件

colorpix桌面颜色获取

colorpix取色工具是一款来自国外的桌面颜色提取软件，用户通过该软件可获取屏幕任意区域位置中的颜色值，软件支持获得桌面屏幕坐标、RGB、HEX、HSB、CMYK等数值，不过很多用户不知道如何使用colorpix软件，故此河东软件园小编为大家整理收集了colorpix的使用方法，下面我们一起了解下吧！官网下载地址：http://www.colorschemer.com/download.php
package.json for NPM 文件详解

发表于 2016-08-31 10:01:17 | 下载附件

package jsonNPM 文件详解

package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。

通常我们在创建一个NPM程序时，可以使用npm init命令，通过交互式的命令，自动生成一个package.json文件，里面包含了常用的一些字段信息，但远不止这么简单。通过完善package.json文件，我们可以让npm命令更好地为我们服务。
Sublime Text3 下安装 less 编译插件

发表于 2016-08-23 16:05:55 | 下载附件

LessLesscless2css插件

昨天学习了一下 LESS css ，感觉还是非常有必要在项目中使用，于时，便有了在 sublime text 中安装 LESS 编译的想法，百度了一堆，都是 copy出来的垃圾安装说明，所以特此作个笔记。

less2css 详细配置地址：https://github.com/timdouglas/sublime-less2css

<<12 >>

每页显示10条，当前为第1页，总页数为2页

发表于 2019-07-10 10:32:32 | 下载附件

功能简介

FeHelper--弹出菜单

JSON接口自动格式化查看

JSON查看器

代码美化

代码压缩

字符串编解码

图片Base64编码

二维码生成器

二维码解码

全网页截图

时间（戳）转换工具

正则表达式工具

页面取色工具

编码规范检测

页面性能检测

FeHelper配置页

发表于 2019-06-26 11:28:49 | 下载附件

发表于 2018-07-23 16:34:41 | 下载附件

发表于 2018-07-23 10:33:36 | 下载附件

发表于 2018-06-02 02:00:56 | 下载附件

发表于 2018-03-29 10:03:31 | 下载附件

发表于 2018-03-21 13:17:56 | 下载附件

发表于 2017-04-17 14:53:52 | 下载附件

发表于 2016-08-31 10:01:17 | 下载附件

发表于 2016-08-23 16:05:55 | 下载附件