工具使用

Chrome插件hook Ajax

月盾
如何Hook Ajax请求 现在很多网站都使用Ajax作为数据接口,这样其实也方便爬虫爬取数据,但是,如果站点对IP,访问频率做 了限制,或者网站定位就是搜索类,无法遍历完所有页面,或者是数据实时变化,无法预期的。这样就可能需要 直接在浏览器中模拟人的行为,对于这样的网站(使用Ajax作数据接口,有一定防范措施) ,如果我们可以通过hook得到Ajax请求,就可以搞定它的数据了。 单页面Web应用 对于单页面的Web应用,在console中使用如下代码,就能在浏览器进行Ajax请求时候,得到返回内容, 然后在post给存储接口就好了: (function() { var origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function() { // console.log('request started!'); this.addEventListener('load', function() { console.log(this.responseText); // 得到Ajax的返回内容 }); origOpen.apply(this, arguments); }; })(); 比如百度图片: 我们可以看到请求图片的路径,这段代码 直接使用了一个匿名函数,重写了Ajax请求的open方法,给load事件加上一个事件监听器,从而把内容得到: 对于单页面的Web应用,基本可以满足需求,但是如果翻页的话,每次翻页上一页的代码就失效了, 不可能每页都把这段代码复制进console中,还是需要使用类似Chrome插件的方式才能实现。 翻页Web应用 有了上面的代码,如果我们把它直接丢到Chrome插件的JS文件里面(官方叫Content Scripts),发现是无法执行的,XMLHttpRequest.prototype.open 还是浏览器自身的代码。 这样看来,就无法实现自动翻页,自动获取ajax请求内容了。 Chrome官方说法如下: Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page.

七牛在线管理图片预览chrome插件

月盾
七牛云图片存储有10G的免费额度,对于个人来说足够使用了。使用七牛图片存储涉及到图片上传,查看,管理的问题。为了能提高使用效率,我们可以利用好一些工具。 vscode插件上传图片到七牛 vsocode扩展市场有很多上传到七牛的插件,大家可以根据需要自己选择。上传的图片多了以后,有时需要找一些已经上传的图片来使用,目前我所知道的方法还仅限于登录的七牛后台上查看。 可以看到,七牛的管理后台做的不能说很差,可以说是很气人。要预览图片必须点击“详情”,当你关掉预览窗口时却不知道查看的是哪张图片,也没有个高亮聚焦。而且也没有时间排序,只有名称排序,真的是很难用。 为了能够直观的看到图片,决定开发一款chrome插件,将图片直接显示出来,而不用再点击查看。 关于chrome插件开发的细节本文暂不细说,直接上代码。 代码展示 manifest.json { "manifest_version": 2, "name": "chome-plugin", "version": "0.0.1", "description": "chrome示例插件", "icons": { "16": "images/icon-16x16.png", "48": "images/icon-48x48.png", "128": "images/icon-128x128.png" }, "page_action": { "default_icon": { "48": "images/icon-48x48.png" }, "default_popup": "html/popup.html", "default_title": "Hello yuedun" }, "author": "yuedun", "background": { "scripts": [ "scripts/jquery.min.js", "scripts/background.js" ] }, "devtools_page": "html/devtools-page.html", "content_scripts": [ { "js": [ "scripts/jquery.min.js", "scripts/content.js" ], "css": [ "styles/yuedun-insert.css" ], "matches": [ "https://portal.qiniu.com/kodo/bucket/resource?bucketName=*" ], "run_at": "document_start" } ], "permissions": [ "cookies", "*://*/*", "webRequest" ], "homepage_url": "https://www.
vscode正则查找替换

vscode正则查找替换

月盾
查找某一类型字符串: 正则表达式onclick=.*" 会查找到所有: onclick="_msq.push(['trackEvent', '210074305d6b0409-09c7759e04e98528', ''pcpid', '']);" onclick=是固定一样的字符, .代表除\r和\n之外的任意字符,等价于[^\r\n] *代表匹配前面的模式 0或多次 {0,} "这是字符串最后一个字符 在vscode中的效果如下: 至于要替换成什么就看自己需求了,如果要给选中的字符串包裹字符串则需要修改成这样: 查找替换 查找:(onclick=.*") 替换:aaa($1) 结果: 替换字符串两头,保留中间 两部分文字交换位置 相同模式的文字交换位置。 查找:(\(\d{4}-\d{1,2}-\d{2}\)) (\[.*\)) 替换:$2 $1 结果: vscode中一对括号()代表一个变量。 第一组正则 (\(\d{4}-\d{1,2}-\d{2}\)) 对应 $1, 第二组正则 (\[.*\))对应 $2,以此类推。 所以,可以查找多组数据,在替换部分将两个对应变量交换位置即可。

typescript不检查node_moduls

月盾
tsconfig.json 中 exclude node_modules,但 tsc 还是报错。 node_modules/connect-mongo/src/types.d.ts:113:66 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 113 get: (sid: string, callback: (err: any, session: Express.SessionData | null) => void) => void; ~~~~~~~~~~~ node_modules/connect-mongo/src/types.d.ts:114:45 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 114 set: (sid: string, session: Express.SessionData, callback?: (err: any) => void) => void; ~~~~~~~~~~~ node_modules/connect-mongo/src/types.d.ts:118:47 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 118 touch: (sid: string, session: Express.
朱雀发布系统支持scp(rsync)发布

朱雀发布系统支持scp(rsync)发布

月盾
去年花了三天时间开发了一个简易版的nodejs发布系统,它是基于pm2自带的deploy机制开发的,主要原理就是在两台装有pm2的机器直接通信,并执行相应的命令。再往简单了说就是在发布机上远程执行命令,而朱雀发布系统提供了一个图形界面而已。 当时把这个系统定位为nodejs专用发布系统,因为它依赖了pm2,而pm2则是nodejs专用的进程管理工具,其他语言用不到。这个系统的上线也算是解决了我司一直以来没有合适的nodejs发布系统的空缺。 经过9个月的使用,也算比较稳定。但是也存在问题,最大的问题是部署应用方面比较繁琐。 基本流程如下: 发布机和应用服务器设置ssh通信配置。 应用服务器安装git(有自带,但是版本太旧)。 配置git用户名,邮箱。 生成ssh公钥。 把应用服务器的公钥配置到git代码服务器上。以便能拉代码。 发布机远程执行git pull来代码操作,各应用服务把代码拉取下来。 执行编译打包操作。 执行重启服务操作。 部署一次系统还是比较麻烦的,如果应用服务器有多台,可能还要重复这样的操作多次,实在比较麻烦。 使用scp同步代码的方式会比较简单一些,但是像nodejs这样的项目,node_module占了很大比重,如果每次都打包的话会拖慢同步速度,而scp又不具备排除文件夹的能力。 最后找到了rsync命令可以满足需求。然后就是基于rsync实现了一版。不用再依赖pm2,应用服务器也不用强制使用git了。 朱雀和Jenkins对比如何? 要说Jenkins那绝对是持续集成领域的老大哥,自然是功能强大。但是每个团队和产品有其特殊性,Jenkins并不完全适用。而朱雀也有其优势。 朱雀本身部署简单,使用go开发,不依赖运行时,无需安装,开箱即用。 目前支持和测试过的数据库有sqlite3(目前用的,不需要繁琐的安装过程)和mysql。 配置简单。 部署发布一键完成,不需要单独的部署过程。 并行发布。 审批,通知,权限。 开源,可定制开发。 项目地址:朱雀发布系统

easy-monitor qps监控

月盾
Easy-Monitor是一款轻量级的Node性能监控工具,仅仅需要项目入口 require 一次,就可以非常便捷地展示出进程的状态细节。 Easy-Monitor主要提供以下的功能: 找出执行时长耗费最久的5个或者更多的函数 找出那些执行时间超出预期的函数 找出v8引擎无法优化的函数 Easy-Monitor的特点: 轻量级:非传统C/S物理分离模式,require 后即可使用,没有额外的监控server/agent部署成本。 运行时:针对的是运行时的函数性能以及内存细节进行处理展示,可用于线上生产环境项目。 无状态:永远展示的是开发者访问时的业务进程状态 关于监控qps,作者在文档中并没有提到qps这样的关键字,很多人也不知道怎么监控qps。 不过在监控界面中有这样的指标数据: 所以我从源码入手,找到了该数据指标的源头是这样的: const data = { osCpu: Number((used_cpu * 100).toFixed(2)), osMem: Number((used_memory_percent * 100).toFixed(2)), maxDisk: max_disk_usage, disks: disks_json, load1: Number(load1.toFixed(2)), load5: Number(load5.toFixed(2)), load15: Number(load15.toFixed(2)), nodeCount: node_count, scavengeTotal: total_scavange_duration, scavengeAverage: scavange_duration_last_record, marksweepTotal: total_marksweep_duration, marksweepAverage: marksweep_duration_last_record, qps: Number((http_response_sent / 60).toFixed(2)), rtExpired: http_patch_timeout, rtAverage: http_rt, }; 这是接口返回的数据,包含了qps数据,那么qps实际上就是http_response_sent,所以监控中就可以这样设置qps了: @http_response_sent/60 > 10

firefox火狐新标签中打开书签

月盾
火狐浏览器新建标签总是在当前打开标签之后,而不是在最后一个标签后新建。 1.about:config 2.browser.tabs.insertAfterCurrent设为false。 新标签中打开书签 browser.tabs.loadBookmarksInTabs设置true。 新标签中打开搜索 browser.search.openintab设置true.

vscode远程开发应用场景

月盾
vscode远程开发 vscode远程开发功能在2019年5月份发布,到现在已经有一年半的时间了,但是周围的人很少提及此功能,并不是没有人使用vscode,而是对此没有强烈需求。 那么远程开发还有什么用呢?下面我来举些列子。 关于vscode远程环境搭建本文不重复说明,网上有大量教程,大家只需要安装remote development插件基本都可以使用起来。 远程开发,顾名思义就是连接远端服务器进行开发,这样的场景确实不是很常见,但是有时候却是很有用,能够解决燃眉之急。 本地主机性能差 有一些大型项目对电脑的要求也较高,编译耗时,跑起来吃内存,我们的常规解决方案是升级电脑内存,升级硬盘,总之就是换高配电脑,如果是换一台也倒罢了,如果是一个团队都要使用更高配的电脑,那这样的成本还是挺高的。 此时利用远程开发功能,所有人共用一台8核16G服务器就足够了。能够解决编译耗时,吃内存等问题。 开发环境统一 现代大多数应用服务是跑在Linux上的,而开发环境则有Windows,Mac,有些服务在开发环境下无法顺利跑起来,这种情况就可以利用远程开发,不再需要虚拟机或WSL了,在Linux上部署应用,在Windows上开发。 远程调试 远程调试我想很多人都有过这样的需求,但是却从来没有过真正的实践,原因是太难搞了。线上出问题,本地无法复现,真希望能够直接调试线上代码,但是无奈无法实现。现在好了,有了vscode远程开发,调试就变得容易了。 远程编辑文件 在Linux上编辑文件时使用的vim编辑器对大多数人来说有些头大,能在vscode中编辑文本就舒服多了。只需要使用vscode连接远程服务可以很方便打开文件并编辑。 在家临时远程开发 作为开发的我们,每天下班都要背着电脑回家,主要原因就是防止线上有问题,能够打开电脑调试代码。一般来说并不是家里没有电脑,而是没有能够正常运行的开发环境。 而远程开发正好能解决该问题,我们需要的仅仅是一台装有vscode的普通电脑即可,不需要再操心开发环境,各种SDK,C++,Python,Nodejs等等八辈子不用的软件装了一大堆,还需要经常更新才行。 节省成本 大多数开发人员是不需要经常开发大型项目和远程调试代码的,但是不是完全没有,这样就需要为了不时之需而配置笔记本电脑,而笔记本电脑一般相对台式机是又贵性能还低,公司要为了应对偶发情况而给开发人员配备笔记本电脑,会造成资源浪费,成本升高。 如果有了远程开发环境,则能应对临时性工作,大大降低成本。 用iPad写代码 如果你觉得vscode远程开发还不够酷?那在iPad中写代码呢? vscode远程开发虽好,但还有有局限性,毕竟还是需要一台可以安装vscode的电脑,还是不能随时随地的写代码。现在我要告诉你如何在iPad中写代码! code-server是一个可以运行在服务器上的web项目,这下我们可以在浏览器中使用vscode了,可以在浏览器中打开vscode的,自然就可以使用iPad来写代码了。 Eclipse Theia https://gitpod.io/#https://github.com/eclipse-theia/theia 额,希望苹果能给我广告费! 再或者使用使用codespaces也可以在线编辑代码,https://mp.weixin.qq.com/s/Eutjgbx_nofmuhU2yBGhxg 最后 贴一篇带图的环境搭建教程真香!使用 VSCode 远程开发调试

通用的数据库GUI工具

月盾
MySQL常用的客户端是Navicat,SQLyog等,本文推荐另一款通用的客户端:DBeaver DBeaver不能创建表?那是因为选错了视图。可以重新编辑链接

puppeteer模拟3G网络

月盾
puppeteer要模拟3G,4G网络需要利用DevTools Protocol。 Chrome DevTools Protocol page = await browser.newPage(); // 模拟3g网络 let cdp = await page.target().createCDPSession(); await cdp.send('Network.emulateNetworkConditions', { 'offline': false, 'downloadThroughput': 600 * 1024,//(bytes/sec) 3G最高600K/s 4G 最高10M/s 'uploadThroughput': 600 * 1024,//(bytes/sec) 'latency': 0 }); await page.setCacheEnabled(false); await page.goto(url);