做有态度的前端团队

网易FEG前端团队

分类 工具 下的文章

  • 使用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下的命令入口文件(自定......

    JavaScript,工具,其他