-
调试 whistle chrome配置代理
调试 whistle chrome配置代理安装完 whistle 后安装配置Proxy SwitchyOmega首先需要在chrome扩展应用安装Proxy SwitchyOmega,成功之后按照如下截图设置然后点击扩展程序选项,配置如下， 先新建情景模式 起个名字 修改代理服务器以及端口 保存应用配置证书然后再配置允许Https请求，返回127.0.0.1:8899页面，点击菜单栏的HTTPS选项，会有一个弹窗首先要下载RootCA证书，然后设置信任证书。然后再刚刚的弹窗里勾选 ...…
-
调试 whistle
调试 whistlewhistle(读音[ˈwɪsəl]，拼音[wēisǒu])是基于Node实现的跨平台抓包调试代理工具，有以下基本功能： 查看HTTP、HTTPS请求响应内容 查看WebSocket、Socket收发的帧数据 设置请求hosts、上游http/socks代理 修改请求url、方法、头部、内容 修改响应状态码、头部、内容，并支持本地替换 修改WebSocket或Socket收发的帧数据 内置调试移动端页面的weinre和log 作为HTTP代理或反向代理 ...…
-
spy-debugger + Charles 移动端调试
spy-debugger + Charles 移动端调试charlse电脑安装证书已安装过的可以直接跳过第1步：点击Charles的 Help > SSL Proxying > Install Charles Root Cetificate 然后就会弹出证书安装页面，将Charles的证书设置为始终信任即可：第2步：点击Charles的Proxy > Access Control Settings 进行配置让手机连接代理时，不需要点允许连接确认操作。上述配置，表示允许任意...…
-
真机调试 spy-debugger
真机调试 spy-debugger移动端调试一直都是一个痛点，因为移动终端对于我们来说是一个黑盒，它无法像PC端一样，我们可以通过F12很方便的调出开发者工具。在开发中经常会遇到同样一份代码在某个型号的手机上运行出现错误，其他手机都好好的，开发的时候Chrome上也没有报错。如果没有调试工具这种情况下我们就很难定位问题，下面介绍我们的主角spy-debugger。关于spy-debugger 一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，...…
-
真机调试 Weinre
真机调试 WeinreWeinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面Weinre组成原理目标页面（target）:调试页面，页面中需要嵌入weinre提供的远程js，这里的Js相当于一个锚点作用。服务器（agent）:一个HTTP Server，为目标页面与客户端建立通信。客户端（client）:本地的Web Inspector调试客户端。安装Weinren...…
-
fastclick偶遇vue-clipboard2或clipboardJS ios无法复制
fastclick偶遇vue-clipboard2或clipboardJS ios无法复制背景在集团app内的移动端页面，使用vue-clipboard2发现ios端无法复制，改用clipboardJS也不能复制。问题排查安卓是可以的，但是ios怎么也复制不了。经过长时间的问题排查以及资料查询，最终发现，是由于使用了fastclick，而fastclick构造了自定义事件提前触发。ios无法触发复制，是因为系统剪贴板命令需要原生click触发。解决问题在使用fastclick库的情况，需要...…
-
H5安卓低版本,ios10白屏问题总结
H5安卓低版本,ios10白屏问题总结背景在公司App内嵌h5页面的项目中，在Android某些机型会出现h5加载不出来，也就是白屏现象，具体机型魅蓝Note6，操作系统版本5.0及以下在某些机型的浏览器也会出现白屏问题端上问题反馈APP中会加载腾讯x5内核，但不一定成功，失败了就走系统内核，有可能是低版本的系统内核有兼容问题端上控制台输出11-23 11:31:42.822 19201-19201/? I/wvtest: 011-23 11:32:33.042 19201-19201/c...…
-
pc端h5录音技术调研
pc端h5录音技术调研背景小猴辅导中的教师点评需要用到录音点评，以下是调研总结录音技术存在的问题兼容问题h5录音主要使用AudioContext 和 getUserMedia 兼容性还是较差的，尤其是在移动端。不过我们是针对pc的暂时先不考虑移动端。使用要求注意：需要在https等安全环境下才能进行录音调研的方案 vue-audio-recorder 一个简单的 Vue.js 录音器组件，自己在本地写了一下，发现录音的音质会变得很重，而且自带一些样式，修改起来也会很麻烦。 ...…
-
css3 flex布局 justify-content:space-between 最后一行左对齐
在使用justify-content:space-between布局时，针对最后一行元素使用 justify-self: start;没有效果，查了下css3 flexbox 还未支持。那么如何实现最后一行左对齐呢？现有的几个方案 使用标签元素补全缺的item 使用grid 使用伪类伪类的情况，如果最后一个元素是满的，会有占位，grid会有兼容问题，又不想新增标签。每一行固定列数的情况实现左对齐方案由于每一列的数目都是固定的，因此，我们可以计算出最后一个元素的margin-right...…
-
html2canvas 生成海报图 开发中遇到的问题
ios里，生成的图片不显示canvas.toDataURL('image/jpeg', 1.0)使用image/jpeg格式，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。canvas 是弹出层时，底层有滚动条，会有部分空白测试的时候，好奇为啥每次，生成的图片都缺一部分，而且都是从顶部开始空白，再绘制图片。解决方案: 添加绘制坐标y起始位置 y: window.pageYOffset,html2canvas(targe...…
-
ios input disabled 字体颜色修改无效
问题描述设置 input:disabled 的字体颜色，在 ios下无效，颜色很暗。pc端显示正常。问题原因iPhone Safari/webview 环境下 input disabled 的默认样式会有默认样式opacity以及隐藏样式-webkit-text-fill-color解决方案input:disabled{ color:@disabledColor; opacity: 1; -webkit-text-fill-color: @disabledColor;}…
-
ipad系统更新到13.2.x后，怎么判断 ipad？
事情起因前端时间刚做完ipad兼容问题，本以为没问题了，然后又有客户反馈bug，仔细想了一下原因，可能是ipad判断失效了，问了客户ipad系统是 13.2.2版本，长时间等待升级….升级到13.2.3后，打印ipad navigator.userAgent字符串发现，里面熟悉的 /ipad字眼居然没了！！！打印数据如下，"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Geck...…
-
vue 实现文字无缝滚动效果（从下往上滚动）
需求：对中奖用户进行滚动效果展示这种效果需求还是蛮多的，想起之前用JQuery实现的一个无缝滚动( 缅怀过去)，是通过jq的animate方法实现的，动画结束之后就将第一个元素appendTo追加到最后面，实现循环滚动特效，不得不感叹技术更新换代真的很快。回到现在Vue的项目，本来想用插件，但是觉得这么一个小动画用插件有点太重了，还是自己写一个比较好。实现原理实现原理也比较简单 对整个列表实现上移动画 将列表的第一个数据移动到最后一个因为vue是基于数据驱动的，所以，对我们开发者来说，...…
-
算法的时间与空间复杂度（一看就懂）
看到一个介绍的比较清晰的文章，转来记录一下。《算法的时间与空间复杂度（一看就懂）》算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，但在过程中消耗的资源和时间却会有很大的区别。那么我们应该如何去衡量不同算法之间的优劣呢？主要还是从算法所占用的「时间」和「空间」两个维度去考量。 时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。 空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「...…
-
switch 语句中的块级作用域
问题背景：最近在公司业务代码中，根据switch的case判断任务类型，在 case 里面定义了块级变量，但是 eslint校验有问题，不同 case 语句中的变量重复定义，以及前面的 case 定义的变量，在后面的case中也能访问到。目标：研究switch语句中的块级作用域可能存在的问题switch语句中的块级作用域switch语句中的块级作用域，在整个switch语句中，而不是对于每一个case生成一个独立的块级作用域。下面来举几个例子来说明这个问题：let number = 1;s...…
