分页: 5/242 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]
Oct 25
一、简介
whistle是一款基于Node的跨平台web调试代理工具。主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可作为HTTP代理服务器使用。
在调试移动端项目时,我们无法像在Chrome开发工具下那样看到请求、日志、DOM结构等。当然,使用vConsole可以解决以上问题,不可否认vConsole能满足移动端调试的大多数场景,并且十分便利。但是vConsole必须要作为一款插件注入项目代码中,这就有了局限性。whistle相比之下就没有限制。whistle的功能十分强大,本文只介绍安装入门。

二、安装
安装Node。(不再介绍)
安装whistle。
npm install -g whistle

启动whistle
w2 start
配置代理
推荐安装Chrome代理插件SwitchyOmega。
第一种安装方式是通过FQ。
第二种安装方式是安装谷歌访问助手,有了谷歌访问助手便可以在谷歌商店下载软件以及使用google搜索引擎。安装完成SwitchyOmega之后,配置代理。官网介绍非常详细。
移动端调试时,移动设备要与PC在同一WiFi下,并且要给移动设备网络配置代理,代理服务器是PC的IP地址,端口号为PC上代理服务器配置的端口号
访问 配置页面
域名访问http://local.whistlejs.com/,或者IP+端口访http://127.0.0.1:8899/
HTTPS证书安装
首先是windows下安装根证书,然后移动设备(以ios为例)在代理网络环境下,Safari地址栏输入rootca.pro,安装完成之后需要手动信任根证书。设置-通用-关于本机-证书信任设置下设置信任根证书。
在 配置页面 导航栏的HTTPS选项中,勾选Capture HTTPS CONNECTs,即可抓取HTTPS请求。然后在移动设备访问页面时,即可在 配置页面 的Network中看到请求。
PS:本文只是对安装入门做了粗略总结,对部分注意细节进行阐述。关于whistle更详细介绍、更多的功能请移步官网。



pc端chrome抓包

whistle 的代理
在 whistle 启动完成后,我们需要将浏览器的请求代理到 whistle,这样 whistle 才能处理浏览器发出的请求。为此,我们需要安装一个 SwitchyOmega chrome 扩展程序。

SwitchyOmega 安装与配置
访问这个链接,点击“添加至 CHROME”,点击弹框“添加扩展程序”,如果被墙了访问不了,可以 点这里 选择 SwitchyOmega_Chromium.crx 下载,下载后在浏览器地址栏输入 chrome://extensions/,回车打开页面,将下载的文件拖动到 extensions 那个页面,点击安装扩展即可。
页面会自动跳转到 SwitchyOmega 的配置页,点击“跳过教程”
点击左侧“新建情景模式…”,弹框提示“情景模式名称”,你可以输入“whistle”
点“创建”按钮
代理服务器 -> 代理协议,这个下拉选择框选择 HTTP,将 example.com 改为 127.0.0.1,将 80 改为 8899
“不代理的地址列表” 的输入框里的所有文本都删掉,因为里面的 host 在本地开发很大概率会用到
点击左侧“应用选项”
点击 chrome 右上角的圆圈图标,切换成 whistle
浏览器输入 local.whistlejs.com,回车,能打开 whistle 的界面,说明 SwitchyOmega 的配置 ok
Oct 21
Highslide JS

有没有过这样的困扰,好好的项目,别人可以安装包,运行,你不行,
其他同学git clone,yarn,yarn dev就开始搬砖,你则一堆报错,法克

迭代了一个package的版本,然后又不行了,法克

清理下缓存吧,现在前端即使你写个hello world,也要装 千儿八百的包,,,害

windows用户建议cmd管理员身份运行

Oct 20
git:https://github-releases.githubusercontent.com/

TortoiseGit:https://download.tortoisegit.org/tgit/2.12.0.0/TortoiseGit-2.12.0.0-64bit.msi

fork :https://www.git-fork.com/update/win/ForkInstaller.exe

kdiff3,免费好用:https://nchc.dl.sourceforge.net/project/kdiff3/kdiff3/0.9.98/KDiff3-64bit-Setup_0.9.98-2.exe

typora,markdown编辑器:https://www.typora.io/windows/typora-setup-x64.exe?

node:https://nodejs.org/dist/v14.18.0/node-v14.18.0-x64.msi

gnvm 多node版本管理:http://ksria.com/gnvm/
添加到环境变量,超管cmd执行gnvm config

nrm 多npm源管理
npm install -g yarn

yarn 包管理
npm install -g yarn


vscode:https://az764295.vo.msecnd.net/stable/c13f1abb110fc756f9b3a6f16670df9cd9d4cf63/VSCodeUserSetup-x64-1.61.1.exe
推荐字体:vscode字体Fira_Code_v5.2

postman:https://dl.pstmn.io/download/latest/win64

fiddler:https://telerik-fiddler.s3.amazonaws.com/fiddler/FiddlerSetup.exe

axure:https://axure.cachefly.net/versions/9-0/AxureRP-Setup-3727.exe

dbeaver 支持关系,nosql等主流数据库:https://dbeaver.io/

chrome
https://www.google.cn/chrome/
插件推荐:axure,沙拉查词(很棒的划词翻译),稀土掘金(每日必看),草料二维码,vue tools
Oct 20


在生成的.husky目录下新建

新建pre-commit文件

新建commit-msg文件


package.json,这样后面的兄弟们在yarn的时候就初始化husky了


根目录新建.commitlintrc.js文件
Oct 20
在项目下新建文件.npmrc

重新yarn
Sep 29
1、打开本地git bash,使用如下命令生成ssh公钥和私钥对ssh-keygen -t rsa -C '[email protected]' 然后一路回车(-C 参数是你的邮箱地址)

2、然后打开~/.ssh/id_rsa.pub文件(~表示用户目录,比如我的windows就是C:\Users\Administrator),复制其中的内容

3、打开gitlab,找到Profile Settings-->SSH Keys--->Add SSH Key,并把上一步中复制的内容粘贴到Key所对应的文本框,在Title对应的文本框中给这个sshkey设置一个名字,点击Add key按钮

4. 到此就完成了gitlab配置ssh key的所有步骤,我们就可以愉快的使用ssh协议进行代码的拉取以及提交等操作了
5. 再试一下拉取代码和提交代码,应该就不需要输入密码了

本地配置多个ssh key
1、为公司生成一对秘钥ssh key


2、为github生成一对秘钥ssh keyssh-keygen -t rsa -C '[email protected]' -f ~/.ssh/github-rsa3、在~/.ssh目录下新建名称为config的文件(无后缀名)。用于配置多个不同的host使用不同的ssh key,内容如下:


4、按照上面的步骤分别往gitlab和github上添加生成的公钥gitlab_id-rsa.pub和github_id-rsa.pub
5、OK,大功告成,再次执行git命令验证是不是已经不需要再次验证权限了。
6、再次查看~/..ssh目录下的文件,会有gitlab_id-rsa、gitlab_id-rsa.pub和github_id-rsa、github_id-rsa.pub四个文件
Sep 22

Vue3.0 setup写法 不指定

tommyhu , 16:41 , 大前端 » vue.js , 评论(0) , 引用(0) , 阅读(204) , Via 本站原创
Vue3.0 正式版已经发布一段时间了,除了拥抱函数式编程,还带来了新的语法糖,用以替代原本需要大量 return 的写法
基础用法
想要使用 setup 模式只要在 script 标签上面加个 setup 属性就可以了。这个模式下不需要 return 和 export 就可以在模板中使用。

使用 props、emit

使用生命周期钩子

setup 语法糖的缺陷
这个语法糖暂时还不支持单文件导出内容,如果使用 export 导出模块会导致编译报错。

不支持设置组件名,传统的 options 写法有个 name 属性可以设置组件名,这个在编写递归组件的时候很有用

不支持 jsx,不过如果需要使用 jsx 的话,个人还是建议直接使用传统方式,setup 函数可以直接 return 一个 jsx 函数。而且 Vue 3.0 已经默认支持 css module 了,jsx 的体验会比之前更好。


其他



写在最后
这个特性其实还是实验性质的,可能会有不少我暂时还没遇到的奇怪 bug,所以不建议在生产环境使用。不过他确实可以精简不少的代码,特别是哪种内容比较丰富的页面,尽管可以拆成多个子组件和 hooks,但是在拆分的比较多的情况下,引入模块也不可避免地要写一堆的模板代码,相信这样的编码方式以后会成为 Vue 的标准范式。
Jul 11
子曰:吾十有五而志于学,三十而立,四十而不惑,五十而知天命,六十而耳顺,七十而从心所欲,不逾矩。
希望时光安详静宜,偶尔的小确幸足以
Highslide JS
Jun 10
首先,移除一些冷门的 feature(比如 filter、inline-template 等);

其次,引入 tree-shaking 的技术,减少打包体积。

第一点很好理解,所以这里我们来看看 tree-shaking,它的原理很简单,tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。
举个例子,一个 math 模块定义了 2 个方法 square(x) 和 cube(x) :

我们在这个模块外面只引入了 cube 方法:

最终 math 模块会被 webpack 打包生成如下代码:

可以看到,未被引入的 square 模块被标记了, 然后压缩阶段会利用例如 uglify-js、terser 等压缩工具真正地删除这些没有用到的代码。

也就是说,利用 tree-shaking 技术,如果你在项目中没有引入 Transition、KeepAlive 等组件,那么它们对应的代码就不会打包,这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。
May 20

getOffsetTop 不指定

tommyhu , 18:52 , 大前端 » HTM5 , 评论(0) , 引用(0) , 阅读(1979) , Via 本站原创
如果拿到的offsetTop为0,则往上循环得到设置滚动的root 容器的高度
        getOffsetTop (herfId) {
          let offsetTop = 0
          try {
            if (document.getElementsByClassName(herfId).length > 0) {
              let eleId = document.getElementsByClassName(herfId)[0]
              let par = eleId.offsetParent
              if (par.dataset.id == 带滚动的根容器id){ 
                // 当节点为body可直接使用offsetTop获取距离
                offsetTop += eleId.offsetTop// 获取高度
              } else {
                while (par) {  
                  // 循环获取当前对象与body的高度
                  offsetTop += par.offsetTop;
                  par = par.offsetParent;
                }
              }
            }
          } catch (e) {
            console.log(`getOffsetTop:${e.message}`)
          }
          return offsetTop
        }
分页: 5/242 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]