浏览器

没想到iPhone浏览器Safari居然已经支持扩展了

没想到iPhone浏览器Safari居然已经支持扩展了

月盾
使用电脑的人免不了使用浏览器,电脑端浏览器的一大特色是插件和扩展,等于是给浏览器添加外挂,增加一些额外的有用功能,比如: 广告拦截器 密码管理器 翻译工具 网页截图工具 我自己使用的一些插件具备以下功能: 保存和同步密码 下载网页视频 自定义网页样式 鼠标手势 破解功能 等等…… 然而,手机端的浏览器基本不支持插件功能。 但是令我万万没有想到的是,苹果手机的浏览器居然已经支持扩展功能了。 设置 > Safari浏览器 > 扩展 > 更多扩展 目前支持的扩展数量还有限,但是也算有个好的开头,也有一些比较使用的扩展。 https://www.hopefly.top/article/65/

chrome开发者工具显示接口完整路径

月盾
chrome浏览器的开发者工具是前端开发必不可少的工具,其中接口查看是最常用的功能之一。默认情况下显示如下: 主要是红框内的接口显示只有很短的名称,并没有完整的显示出整个接口,这对于一些最后名称一样的接口就不能知晓是哪个接口了,只能点击查看详情。我们希望的当然是能够显示完整的接口,实际上也是能做到的。 在名称栏上右击: 可以显示很多选项,其中路径和网址就是我们先要的,点击以后就可以显示完整的接口路径了。
七牛在线管理图片预览chrome插件

七牛在线管理图片预览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.

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 远程开发调试

postman使用技巧

月盾
postman是开发人员必备的接口测试工具,虽然经常使用,但是并不会使用到所有功能,除了简单的接口测试外,它还有很多实用的功能,如果充分利用起来,能使我们的工作事半功倍。 环境变量的使用 捕获请求和cookie 收藏接口与分享接口 批量测试 编写文档和示例 环境变量的使用 环境变量的作用是使用切换变量的方式代替频繁的环境修改。这样我们只需保存一次测试接口就可以在不同环境下使用。 举例: 环境变量配置 环境变量使用 环境变量切换 捕获请求和cookie 能够直接将浏览器中的请求和cookie同步到postman,省去手动复制请求接口和cookie到postman中。 同时,对于需要登录后使用的接口,postman可以直接使用浏览器的登录状态,而不必复制cookie。 举例: 收藏接口与分享接口 将自己保存的接口分享与他人,直接拿来即可使用。 如果安装了Chrome插件,则可以直接的浏览器中打开链接。使用客户端需要使用import来导入。 批量测试 保存的多个接口批量测试。 编写文档和示例 对于团队协作很有用,接口交流利器。不仅有了请求参数,添加一个example还可以看到接口返回参数。

goquery 中文乱码

月盾
乱码的情况目前有两种可能: 常规乱码,网页非utf-8。 非常规乱码,代码导致的乱码。 关于常规乱码可参考issue获取中文网页有乱码的问题 #185 非常规乱码就像我遇到的一样,最开始以为是网页问题,使用了github.com/djimenez/iconv-go转换还是乱码,使用了golang.org/x/text/encoding/simplifiedchinese还是乱码。 试试英文网页,还是乱码。最终一点点调试发现是由header引起的。 req.Header.Add("Accept-Encoding", "gzip, deflate") 这一行的作用是告诉服务器浏览器要接收的数据编码是gzip,dflate,到达浏览器后会自动解码。但是我们的代码并非浏览器,不会自动解码,所以接收到的就是非常规的压缩数据。

人人都值得学习的UI自动化

月盾
为什么需要UI自动化? 说起自动化,听着很厉害,可是也没见识过到底多厉害,基本是属于传说,没见过实战。但不能否认其价值,作者本人作为一个开发者也是偶然的机会接触到UI自动化,感受到了自动化的魅力,才不惜花时间来学习并使用在实际工作中。下面就来说一下为什么要做自动化。 自动化有很多种,单元测试,接口测试,UI测试。所有测试过程可以形成这样一个金字塔: (图片来自网络) (图片来自网络) 从图中看出底层测试简单快速,每个单元相对独立,测试成本也较低。而最顶层的UI层聚合了底层的很多接口服务,一个测试流程相对更长更复杂,也就导致了速度慢,成本高的问题。如果由人工来完成,一个完整的测试流程往往需要几分钟,而且是不停的重复这样一个流程。所以很多开发都不愿意完整的测试自己所开发的一套业务,只能由测试人员不厌其烦的循环往复。此时如果有自动化的话就非常nice了。口说无凭,一图胜千言: 是不是还没看清?没错,平时人工测试一个报名表单需要15秒左右,而自动化后几乎一瞬间即可完成,速度提升不言而喻。如果您对UI自动化已产生兴趣,请继续往下看。 哪些场景可以UI自动化? UI自动化的目的不是为了自动化而自动化,也并不能覆盖所有测试。还是以测试金字塔来说明: UI自动化虽然只能覆盖到约10%,但其价值却不可忽略,因为越往顶层消耗的人力成本越高,如果底层测试不够充分就只能靠顶层测试来保证。自动化虽好,但需要满足特定的场景才行,那么什么样的场景可以做UI自动化? 流程变化少。侧重UI的修改,而不是流程的修改。 频繁的回归测试。比如一个报名表单样式修改比较频繁,需要测试其报名是否可用。 界面稳定。样式可以频繁修改,但表单顺序和个数变化较少不能频繁变更。 维护周期长。如果只是使用一次那也不必自动化了,毕竟自动化是解决重复劳动。 开发与测试可相互配合。自动化需要程序有一定规范便于测试人员写测试程序。 测试人员具备编程能力。 如果满足了上述的场景,那么UI自动化在人力消耗和效率上就有很大的提升。正确性上更有保证,手工录入会有输错重输的情况,而自动化则不会出现。 再看一个流程比较长的页面: 上面动图并没与快进,一气呵成完成了一次下单流程,基本不需要停留即可进入下一步,相比起手动操作省时省力。 为什么UI自动化普及率低? 既然UI自动化能提高效率,但为什么却很少有人去使用? 开发自动化程序对测试人员的编程水平有一定要求,很少有人愿意花时间去写这个程序。 对于互联网公司,大多数业务需要快速迭代,一个页面的生存周期很短,也可能只是一次性的,自动化测试没有存在的必要性。 测试人员没有切实的感受到效率提升。 其实说白了,就是大家觉得投入和产出不值得。如果是迫于领导压力要写自动化程序,就会不停的对程序修修补补,自己用的话有问题大不了不用自动化,手动测试一下通过就行,如果是给别人用就会不停收到反馈和吐槽,自然也就没有写下去的动力了。 所以个人觉得,自动化程序不应该成为一种流程和形式,而是应该由开发和测试人员自发的去将自身经常重复的工作做成自动化。因为自动化本身就不能覆盖所有场景,只有实际参与的人才能知道哪些是可以自动化的。 有哪些工具可以选择? 目前市场上不仅提供了多种工具可以选择,还支持不同语言。 web端:selenium、webdriver、robotframework、puppeteer等。 APP端:Appium、Instrumentation、Robotium 、UIAutomator、Espresso、Calabash、Selendroid、Robolectric、RoboSpock、Cafe、Athrun等。 移动APP自动化测试框架 本文不对所有工具一一详解,可自行根据平台选择合适的工具和语言进行学习使用。只针对个别WEB端工具做简单说明。 拿selenium来说,selenium是一款很多人比较熟悉的工具,支持的语言有Python,Java,JavaScript等,推荐使用Python。而且其支持的浏览器也很全面: Google Chrome Internet Explorer 7, 8, 9, 10, 11 Firefox Safari Opera HtmlUnit phantomjs Android iOS 一些常见问题 在自动化过程中最多的就是对元素进行定位,自动化工具常见的定位符有: id name class name tag link text partial link text xpath css selector 以上这些元素定位对于以前的网页来说还足以应对,因为以前开发的网页大多数元素会有id,class这些属性,定位起来也比较方便。但是对于react,vue,angular这类数据驱动的框架就不那么友好了。 比如有这么一个元素:<div>{{element}}</div>结果为: 这个元素既没有id,也没有class,而且是使用最多的div元素,想要定位就很困难了。 而且这些元素定位支持也比较简单,不支持一些兄弟元素,父子元素的定位,我们以往使用的jquery选择器是不支持的。 所以这时候就体现出开发和测试配合的重要性了,开发测试不分家,开发需要根据测试需要的来对重要元素加明确的标识便于测试定位。 其次就是让自动化工具支持jquery,使用一些jquery的选择器来操作元素,使用方式是自动添加一个<script src="jquery"></script>标签。然后执行js脚本来实现jquery选择器。

一次商业web网站搭建的取舍过程

月盾
最近为公司官网重构搭建项目,把遇到的问题总结一下。此处的“商业”并没有多神秘,说的有点夸张而已,不过是为了区分公司项目与个人项目罢了。在这之前,我自己搭建过的网站也不下于10个,其中有个人网站也有公司网站,那时候搭建的网站也能上线运行,也没有过多的条件限制,所以不会有什么纠结的地方。 所以搭建一个网站并不复杂,复杂的是让其满足很多要求。有业务需求,有领导喜好,有同事对技术的接受度。业务说网站要支持SEO,支持IE浏览器,领导说我们要前后端分离,同事说我想使用主流新技术。最后经过几轮商讨下来自然是业务第一,领导第二,同事第三的优先级进行选择了。 要支持SEO和IE浏览器,只能是服务端渲染,可选的技术就只有SSR和模板引擎。SSR能选择的也就同事熟悉的Vue技术栈nuxtjs,但是其只能首屏渲染,并不能完全满足整站的SEO需求,而且开发体验并不怎么好,编译时间长,调试难,占用内存高等缺点。最后只能选择一把刷技术jQuery和node模板引擎。 选择了jQuery和模板引擎还不够,前端的模块化怎么做?目前前端模块化方案还是少的可怜,但并不是没有好的方案,只是在技术潮流下显得有点暗淡失色。比如requirejs,seajs,fis等都可以做模块化,~~最后在内心斗争一番后选择了layui自带的模块化(主要是使用了这一套UI)。layui本身是一套UI框架,为了尽量减少引入第三方js就直接使用其提供的模块化。~~原网站使用的是fis3也很好,但是如果继续使用的话等于又回去了,而且fis3也不再维护了。好在改造难度不大,只需要重新包装一下即可,其实fis3最后生成的代码也是类似于AMD/CMD规范。 技术方案确定后就剩开发环境工程问题了,由于一些老项目的缘故,前端同事都习惯了使用less开发css,也需要引入。然后是公司项目不同于个人项目具有服务器完全管理权限,通常使用NGINX代理,这样会对前端文件进行缓存,而网站发布频率较大,前端文件变化了还有缓存,所以又需要对前端文件进行哈希处理,这样就有了编译过程,同时还有node服务需要同时运行,所以使用了gulp工作流。后续补充:layui在开发过程中没啥问题,但是要上线时对静态文件哈希处理不好,最终也放弃了,回归了最原始的开发方式。 这样一顿操作下来也耗时一周才完成,远比搭建个人项目一天内费事多了。

最新版火狐Firefox Quantum 57没有pocket按钮

月盾
从火狐量子浏览器开始,pocket按钮集成到了地址栏右侧, 如果你找不到,那么有可能是在浏览器配置中关闭了,开启方式: 地址栏中输入about:config,点击“我了解风险”继续,搜索“pocket.enabled”,如果是false双击修改为true就会出现。 其他情况可参考:https://help.getpocket.com/article/942-where-is-the-pocket-button-in-firefox