分类 工具 下的文章
-
使用chrome extension解决gitlab在线编辑时输入中文出现错乱的问题
先上一张gif效果图： 我们团队内部搭建了gitlab作为代码托管，目前的版本是GitLab Community Edition 8.17.5 9a564a8，在升级到这个版本时，发现在chrome下，在线编辑无法正常输入中文了，出现如上动图的错乱效果，而在firefox是正常的。 一开始怀疑是chrome更新版本后的问题，但是github的在线编辑是正常的，后来通过chrome开发者工具debug，发现是gitlab使用的在线编辑器有问题。无论gitlab还是github，这种在线编辑代码都是借助于一些web编辑器实现的，比如aceeditor，而这里gitlab用的正是ace......
-
Babel插件在fis项目中遇到的问题
博客断了几个月了，抽空整理下Babel使用遇到的问题~ 随着ES6/7的发展和普及，越来越多的项目开始使用它们的新语法，但考虑到兼容问题，目前主流方法是在开发是时候使用新语法，然后通过Babel编译转换成ES5执行。 而我们小组使用的fis3自动化构建工具，而对应的babel编译插件是使用fis3-parser-babel，下面简单说下安装流程： 如果你本地还没安装有该插件，可以直接npm全局安装 npm install -g fis3-parser-babel 安装成功后，在fis配置文件配置使用： //直接在通用配置上配置即可 fis.match('**.js', { ......
-
移动端的Developer Tools
20171013更新 vConsole官方更新到了v3.0.0。需要手动初始化才能启动（之前是直接引入vconsole的js就会自动初始化）。 // 初始化vConsole window.vConsole = new window.VConsole(); （以下是正文。。。） 移动端的调试一直很头疼，目前的一些主要调试手段有如下： 1、直接更新到测试地址 这种算不上什么调试手段，只是最原始的方式，每次修改都要更新到测试地址，然后手机访问测试地址看效果。因为手机没有像chrome那样的控制台，所以js调试基本都是通过alert打断点。 优点： 对手机连接网络没限制，随便一台真机都可......
-
基于NodeJs的自定义命令行图片压缩工具制作
前言 目前，我们小组用的fis已经集成了图片压缩这个功能，通过一行简单的命令，就可以完成对图片的批处理，非常方便。我这里把核心代码抽出来，做了一些修改和扩展，制作成一个独立的工具。 较小组使用的压缩工具，新增了压缩单个或多个文件功能，由于我经常给官网换版头，有时一次就是替换1张，或者2张图而已，所以感觉没必要把所有图片压缩一遍。另外还新增了图片等比缩放功能，这也是源自一次需求，虽然少见。有一次，需求方丢来了20张大概是4000*3000这种尺寸的图片，最大的达到了10M，就算压缩后仍然很大，所以有必要缩小一下图片尺寸。虽然PS可以做批处理缩放，大概就是新建一个“动作”，然后让它重复......
-
使用PhantomJS对网页截屏
PhantomJS 可以看做是一个没有UI界面的webkit浏览器，这个东西用途很广泛，可以用来做网络监控，网页截屏，自动化测试等等，这里抛砖引玉，做个简单的介绍，就主要介绍下它截图的这功能。 1.安装 到官网下载phantomjs.exe，然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin（这个是我的路径） ，在环境变量的系统变量中找到path，添加即可，这样就可以在任意地方执行CMD命令操作PhantomJS了。 2.使用 demo.js var page = require('webpage').create(......
-
我写的代码真的规范吗
前言 在需求的催赶下，终于完成开发，本地编译浏览，看一眼浏览器控制台，嗯！没有报错，开心的提交代码，发布到测试地址，QA测试通过，发布上线。心里暗喜，又完成一个需求单，完美手工！ 相信很多人都有这样的经历，做项目经常都是需求赶着自己，加班加点的完成功能开发，盼望着浏览器控制台不要出现红色的报错，惊险的通过QA测试，最后期盼着能够按时完成成功上线。 很明显，自己在日常需求开发中，更多的是关注功能能否实现，效果能否实现，按时上线能否实现。这样的技术人生是不是太没追求了呢？作为一名开发，是不是还要考虑自己的代码是否足够规范，是否足够强壮，是否有性能隐患呢？ 控制台没报错，功能正常并不......
-
关于小组页面脚本错误捕获
平时本地或者测试环境开发，我们都能在调试面板之类的很直观看到脚本错误，出什么错，在哪，错误定位，一目了然，还能断点调试，这部分错误，一般会在开发以及QA测试阶段，就能大部分发现与修复。但是，如何捕获发现线上用户的错误呢？用户的网络、浏览器、电脑、手机等千奇百怪，总不能每次都远程用户电脑看一下它的Chrome吧？ 一、如何捕获错误？ 1、全局方式 window.onerror函数，可以捕获追踪全局的脚本错误，只要报错了，就会调用此函数，函数具体使用参数如下： window.onerror = function(msg,url,line,col,errorObj){ ......
-
写了一个Chrome扩展，方便查看NBA赛况
前言 最近写了个Chrome扩展，在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序，可以看看这篇文章，里面有一些介绍：chrome工具优化的学习小结...当然我写的这个比较简单，没那么多复杂的功能。这个其实和我们平常写web页面差不多，所以我们前端可以写，于是我也来试试这个东西~ 先来看看效果图： 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......
-
快速搭建一个本地服务器
我们都知道，有些情况本地直接点开HTML文件是不行的，需要在服务器环境才能正常访问。我们可以通过搭建本地服务器进行访问，比如我们用的fis本身内置了这个，这次介绍node的一个小模块http-server,可以快速地搭建一个本地服务器。 安装 npm install http-server -g 使用 使用非常简单，进入当前目录，输入http-server 即可，还可以加上其他的一些参数，比如http-server -p 3000 -o,-p指定端口，-o启动服务后自动打开浏览器，更多参数，请查看文档 小结 这个是我平时有些时候会使用到的一个小东西，非常便捷。比如做个小d......
-
FEG Snippets - Sublime Plugin
20170116更新 目前最新版本是v1.0.6，新增了cms新闻系统的常用代码块。可以敲fegcms开头，就会快速找到cms相关代码片段。 cms html代码片段 fegcms-keywordInfos：新闻内页关键字列表 fegcms-kindTraceInfos：新闻内页面包线 fegcms-list：新闻列表 fegcms-news：新闻详情 fegcms-pages：新闻分页 fegcms-reNewsInfos：新闻内页相关新闻 fegcms-resourceInfos：新闻内页图片或者视频列表 fegcms-list-old：新闻列表（旧版） fegcms-news......
-
最快的Web开发IDE——HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。 从Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web编程的IDE已经更换了几批。HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提......
-
CUTTERMAN 一款神奇的切图工具
CUTTERMAN是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。 cutterman界面及介绍 该界面是PC端切图，图片可以选择PNG、JPEG和GIF格式，PNG格式可以选择png24或者png8的，JPEG格式图片品质可以自己定义，默认60%，GIF格式品质分为32/64/128/256。 更重要......
-
内网穿透ngrok工具快速启动bat
前言 很久很久以前，我们在做移动开发时，调试bug的方式主要是： 1、每次改完上传到测试环境，手机刷新（不够实时，麻烦耗时） 2、手机申请内网权限（申请的机子很有限，遇到奇葩机子出问题时再申请权限根本行不通） 然后，我们开始寻找可以实时远程调试的工具，比如weinre，小组也有相关文章介绍： Weinre+Gulp+BrowserSync结合实现远程调试 但我们小组最终选择的是内网穿透 ngrok 工具，统一搭配，方便组员快速使用，使用指南： 内网穿透 ngrok 工具使用指南 ngrok.bat 有了工具，那就得用上，提高生产力才对得住搭建这个工具的大神啊。但是用了那么多次，还是......
-
Weinre+Gulp+BrowserSync结合实现远程调试
weinre，大家可能都听过，是一个远程调试工具。继上次学习了gulp,这次突发奇想把它们结合起来做一些事情。虽然在Chrome下可以模拟移动端，但毕竟会有偏差。这次我想达到的目的是，在PC端开发移动端项目，然后可以在移动设备上实时看到效果，这是一种很棒的体验。 1、安装和启动weinre 全局安装weinre npm install weinre -g 我的node版本是v0.12.6,一开始安装报了个错。原因是npm安装的时候无法匹配到weinre插件所对应安装的版本。安装的时候指定它的版本为 2.0.0-pre-I0Z7U9OV 就可以了。如 npm install ......
-
自定义命令行工具基于Nodejs
每个人都会做一些简单的小工具去方便自己平时的工作，比如批处理文件。写个有界面的工具吧，有点费劲和没必要；如果能在命令行里面敲几个简单命令就能完成，就方便很多了，而我们又是前端开发，基于nodejs，学习的门槛就更低了 一、前期准备 需要下载两个node的插件 liftoff （执行命令行插件） minimist （读取命令行参数插件） 二、文件夹结构 需要将文件内容保存在指定文件夹才有效：windows用户一般为在C:\Users\用户名\AppData\Roaming\npm npm |--hello.cwd //windows下的命令入口文件(自定......
