前端远程调试利器 PageSpy

PageSpy 是由货拉拉一款用来远程调试的工具。可以让你像操作本地 chrome 控制台一样,调试远程页面代码。 PageSpy SDK 支持如下: Repo Type Status page-spy-types Common types Done page-spy-browser Web sdk Done page-spy-wechat Wechat sdk Done page-spy-alipay Alipay sdk Done page-spy-uniapp uniApp sdk Done page-spy-taro Taro sdk WIP page-spy-rn React Native sdk WIP PageSpy 存在两个端: 调试端: 用于开发者查看调试信息 客户端:客户端用于搜集异常数据传输到调试端。 PageSpy 应用场景如下: 远程工作场景下,测试人员反馈程序问题,只需要开启 PageSpy 重现问题步骤,开发者就可以看到具体的报错原因,避免了很多的沟通。 线上一些兼容性问题,可以帮用户开启 PageSpy ,可以快速定位到问题。 PageSpy 模块间的依赖关系和交互示意图: 调试端示意图 控制台: 网络请求: 存储: 调试端安装 Docker docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest Node yarn global add @huolala-tech/page-spy-api@latest # if you use npm npm install -g @huolala-tech/page-spy-api@latest 调试端配置 Nginx 配置 将 PageSpy 作为一个完整项目部署:...

March 14, 2024 · 3 min · 云溪

为什么我们需要一个知识库

知识库是什么?简单来说知识库是一系列文档的集合。文档是沉淀知识的载体,而存放知识的地方,就叫做知识库。 我想大多数程序员都和我一样是不爱写文档的,在这些年的开发过程中,我逐渐认识到写文档的重要性。因此才有了这篇文章,向你介绍一下为什么我们需要一个知识库。 知识库的作用 不知道你有没有这种困扰: 场景一: 某天你需要在某个同事开发的功能基础上拓展一些新的功能,但是你不清楚这位同事开发的功 能是怎么运行的。你想要了解程序的具体内容,于是你找同事咨询,恰巧这位同事有事请假了,于是你只能硬着头皮从代码层面去阅读理解,去梳理原有程序的实现逻辑,遇到某些复杂部分,你可能需要格外的小心,重读多遍,以便于能正确理解实现思想… 如果在你看代码前,你突然得到一个消息,这位同事之前写过关于这部分功能的实现文档,你心头会不会突然涌现出一丝暖意,嘴角不自觉的上扬呢? 场景二: 你实现了一个核心业务,它被很多的其他的业务方关联,这些业务方在实现自己的业务之前都会跑来找你了解你这部分业务的实现情况。你每次都能耐心详细的把自己的业务讲明白,也很好的帮助了业务方调用你的业务。 随着业务的发展,会有新的业务实现人员发现自己的业务依赖你所实现的业务,于是他再一次找 到了你说:我需要你的帮助… 以上种种让你觉得深陷泥沼,无法自拔。这时如果你有一份文档详细的介绍了你所实现业务的逻辑,它去帮你解答他人的困惑,你是否觉得它就像天使一样,拯救你于水火呢? 正如上述场景所描述的那样,知识库能够解决团队内的信息同步问题,当有需要的时候知识库能够帮助团队的成员更快的了解相关信息。 对于一些高频出现的问题,知识库可以作为你的助手一样,帮助你向有需要的人进行解答,解放出你的时间和精力,专注更重要的事情。 同时知识库还能作为你的外脑,帮你去记忆某些重要的事情。人的记忆是不稳定的,而计算机却十分擅长记忆,把需要长期记忆的通过知识库交予计算机,让大脑去做它擅长的事情。 如何选择知识库 知识库作为一个文档存储载体,它的选择是多种多样的,可以根据不同的需求做出不同的选择。 个人知识库 如果个人使用,你可以用笔记软件去组织自己的知识。它最好要有一下特性: 多端支持(IOS,Android, Windows, Linux) 多端之间要有相互同步的能力 支持 Mrkdown 支持双链 上述特性中,多端支持和多端同步是我认为必须要有的,它可以让你随时随地记录,并且随时随地调取你的文档。 Markdown 和双链 是选用功能,Markdown 是一个通用语法,如果你用 Markdown 写的文档可以很平滑的迁移到其他平台。双链可以帮你更好的组织文档之间的关系,可以让知识系统由一个个独立的点串联成知识网络。 团队知识库 团队知识库的选择,最重要的一个原则是:如何让团队以最小的成本接入。可以考虑从团队现有工具中找到相关的知识库进行使用。 所选知识库要有能对外分享的能力,有时候有些文档是需要让客户开放的。 推荐两个知识库软件:飞书,语雀。两款软件使用感受都不错,语雀的使用体验要更好一些,不过有些功能需要开通会员才能使用,比如把文档分享到互联网的功能。 飞书的使用体验比语雀稍差一些,最大的优势是它免费的功能能满足一般的使用需求。 如何使用知识库 知识库根据使用用途一般分为对内和对外两部分。对内可以根据知识库的敏感程度设置为:是整企业可见/部门可见/指定人可见。对外可以完全是对互联网开放,做开放平台开放的文档,或者产品使用手册等都可以设置为对互联网开放。 如何写一份功能文档 以功能文档为例,我认为文档应该在实现功能之前就要写了,这么做的目的是在开发功能之前梳理开发思路,形成一个框架。这个阶段主要是考虑全局,不需要深入细节。 如果梳理过程中有需要讨论的地方,也可以用文档来作为基础和参与讨论人员做思想对齐,使接下来的讨论更加的聚焦在问题本身。 框架梳理完成后,就可以进入功能开发了,功能开发阶段可以对关键业务部分做一些流程梳理,也不需要过分追求细节,能够明确的表达思想即可。有了这份文档在方向上的指引,也有助于在开发阶段少走弯路。 在功能开发完成后对文档进行补充,补充一些细节的说明,让整个文档更加的丰富,表达更为通畅和清晰。 什么情况下需要写文档 写文档也是需要付出成本的,因此在写文档之前需要考虑这个文档它的使用收益是否大于成本。因此写文档可以由一下两种策略:降低写作成本 和 提高写作收益。 降低写作成本:可以不用在意文档的完整程度,可以把这类文档作为一个提示文档,它只需要能够辅助我们想起来如何去找到答案即可,不追求写作的表达和完整性。 提高写作收益:对于一个问题多次被提及到,我们可以认为此问题形成文档的收益在提升,可以考虑输出文档去解决此类问题。 定期维护文档 文档也有生命周期,随着业务的发展,文档也需要进行相应的调整。这个维护工作应该是文档作者和所有使用的人,也就是说不仅仅写文档的人要维护文档,阅读文档的人也可以维护文档。 阅读人可以为文档补充案例。或者对于一些有疑问的地方得到解答后,可以细化到文档中,帮助后面的阅读者更好的理解文档。 总结 本文大概讲解了一些知识库的价值和使用方式,目的是在你的心中埋下一颗种子,它需要时间去发芽和成长。 知识库的使用并不是那么容易,肯定会遇到各种各样的问题,要有直面并解决的勇气。千里之台始于垒土。 如果你认为这是一件正确的事情,就坚持下去,潜心耕耘,静待花开。 扩展阅读 双链笔记是伪概念?聊聊双链的核心优势——知识管理 - 少数派 (sspai.com)

June 20, 2023 · 1 min · 云溪

Fiddler 实现手机抓包

Fiddler 抓包原理并复杂,Fiddler 软件会在 PC 上起一个代理的服务,手机连上 Fiddler 代理服务后,手机访问某个网址时,其实时发送给 Fiddler, Fiddler 去请求对应的地址,把响应结果在返回给手机显示,这样 Fillder 就可以在软件里做一个记录从而显示出手机访问的所有请求信息了(如下图所示)。 知道原理后,我们要抓包也就十分明确了,我们需要 Fillder 软件,一部手机即可。 Fiddler 下载地址 安装可以自行百度如何安装。 Fiddler 配置 配置 https 请求抓包 配置端口号 此步非必要,如果本机 8888 端口,未被占用,可以用默认的 8888 跳过此步 完成上述配置后,重启 Fiddler 软件。在软件右上角有个 Online 鼠标放在上面就可以看到本机 ip 地址,这个 IP 我们叫做【代理 IP】需要记住,手机配置的时候需要用到。 手机配置(IOS) 如果你的手机是安卓,可以 Google 安卓是如何设置 wifi 代理的,设置上即可,安卓安装证书更加的简单,只要点击证书安装上即可,不需要其他的额外操作。 配置代理 前置条件:手机连接的 WIFI 需要和电脑是同一局域网。 配置 WIFI 代理:设置->无线局域网->点击连接的 WIFI ,拉到最底部点击【配置代理】选择【手动】。 服务器:Fiddler 软件右上角 Online 显示的 IP 即【代理 IP】 端口号: 8888 (如果自己设置了,就改成自己设置的) 下载证书 这里需要下载 TLS 证书,不然是无法抓到 HTTPS 请求内容的。用手机浏览器访问 【代理 IP】...

June 8, 2023 · 1 min · 云溪

vs code 调试远程代码

简介 Visual Studio Code Remote - SSH 可以打开远程计算机或容器中的文件(计算机或容器中需要运行 SSH Server),而且可已充分利用 VS Code 的一切特性.一旦连接上服务器,可以与任意位置的文件进行交 由于 Remote-SSH 扩展运行命令行和其他扩展是在远程主机上,因此本地不需要代码,就可以正常运行. 入门 确保本机已经安装 VS CODE 确保本机已安装 SSH client, 并且确保远程主机已安装 SSH server 为本机 VS CODE 安装 Remote Development 扩展 连接远程主机 连接配置 Ctrl + Shift + p 输入 Configure SSH Hosts... 回车,设置远程主机信息,配置信息如下 # Read more about SSH config files: https://linux.die.net/man/5/ssh_config Host oa-online HostName 远程主机Ip User root Host 远程主机名称 HostName 远程主机IP User 连接用户名 用户名密码连接 在配置文件 settings.json 加入 "remote.SSH.showLoginTerminal": true...

June 19, 2019 · 1 min · 云溪

vim-plug 安装

vim-plug 是一个极简的 vim 插件管理器 安装 vim-plug 的安装十分简单只需要一行命令就可以搞定 vim Linux curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim Windows (PowerShell) md ~\vimfiles\autoload $uri = 'https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim' (New-Object Net.WebClient).DownloadFile( $uri, $ExecutionContext.SessionState.Path.GetUnresolvedProviderPathFromPSPath( "~\vimfiles\autoload\plug.vim" ) ) Neovim Linux curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim Windows (PowerShell) md ~\AppData\Local\nvim\autoload $uri = 'https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim' (New-Object Net.WebClient).DownloadFile( $uri, $ExecutionContext.SessionState.Path.GetUnresolvedProviderPathFromPSPath( "~\AppData\Local\nvim\autoload\plug.vim" ) ) 使用 在 vim 配置文件 ~/vimrc 或 Neovim 配置文件 ~/.config/nvim/init.vim 中增加 vim-plug 配置项 开始部分 call plug#begin() Plug 命令用于定义使用的插件列表 结束部分 call plug#end() 更新 &runtimepath 并且初始化插件系统 自动执行 filetype plugin indent on 和 syntax enable....

April 21, 2019 · 3 min · 云溪