Vue3前端开发调试的一些基本技巧

自从前段时间转到 VScode,就没太在意它的调试功能,今天有空学习了下,记录下,另外记录下自己学到的一些调试基本技巧 VScode 调试 以前 VScode 调试都是通过一个插件来 Debugger for Chrome 调试的,但是随着 VScode 的更新, Debugger for Chrome 已成为历史,代替它的是 vscode-js-debug,已经内置在 VScode 里了,所以我们在 package.json 里就能看到它的身影 启动调试 点击 调试 选择启动脚本 dev 然后我们的服务就启动了 下断点 运行前端 使用 Ctrl+鼠标左键 打开调试页面,即可监听到调试内容 调试 可以看到所有断点页面的数值,太多也不好看,右键可以添加监视区 可以通过悬浮控制台进行按步执行,我是习惯用 F9 执行 然后监视区的数据就会按程序显示对应的值了,非常适合调试复杂的程序,总比一直 log 强吧 ...

2022年6月17日 · 1 分钟 · 诚哥博客

Windows WSL上安装theos开发环境

最近闲时在开发越狱插件,学习了 Objective-C 开发,那是一个爽,平常都是在黑苹果上开发,现在想着在 Window 的 WSL 环境下开发,所以就想试着搭建下 打开 WSL 我这里使用 VSCode 打开,这里使用的是 ubuntu20.04 安装 Theos 依赖 这两个命令将安装 Theos 正常工作所需的所有依赖项。 sudo apt-get update sudo apt-get install -y build-essential git unzip libio-compress-perl 设置 $THEOS 环境变量 这五个命令将设置 Theos 用来了解事物在哪里以及从哪里执行它们以及诸如此类的事物的环境变量。 echo export THEOS="/opt/theos" >> ~/.bashrc echo alias nic="\$THEOS/bin/nic.pl" >> ~/.bashrc echo "umask 0022" >> ~/.bashrc source ~/.bashrc 使用代理 使用代理,可以加快速度 export http_proxy=http://192.168.0.189:7890/ export https_proxy=http://192.168.0.189:7890/ git config --global http.proxy http://192.168.0.189:7890 git config --global https.proxy http://192.168.0.189:7890 安装 Theos、工具链和 SDK 此命令将 Theos 安装到$THEOS 目录。 cd /opt sudo git clone --recursive https://github.com/theos/theos.git $THEOS ...

2022年4月21日 · 1 分钟 · 诚哥博客

从WebStorm转VScode基本操作

用了好些年的 webstorm,最近版本(2021.3.1)打开发现滚动条卡了不少,发现是主题(Material Theme UI)的关系,但是卸载主题或者降低版本都是我不喜欢的,所以干脆再转一次 vscode,之前转过好几次都因为难适应和工作进度原因 安装 VScode 进入 官网 下载即可 登录 VSCode vscode 对比 webstorm 好的地方就是能同步的地方比较多,像 webstorm 虽然能设置仓库进行同步设置等,但是还是有很多设置没同步到(比如插件列表,代码模板等),而且配置的设置在用下来高达好几 G 文件。 webstorm 跨设备下来太消耗时间安装配置和各种设置了,相比 vscode 还是方便得很 登录使用 github 登录即可。 改造 因为太熟悉 webstorm 的操作了,而且习惯了 webstorm 的主题、插件和快捷键等,所以我打算改造专属我自己的 vscode,之前是没想这样改造的,所以一连几次我都放弃了转 vscode,我是认为前端想往高端方向发展,webstorm 还是不够的,webstorm 作为新手期入门还算可以,但是想往高端走还是得 vscode,毕竟有着无数插件,不方便也能自己写插件,喜欢自己折腾的可以考虑,而且通过 vscode 插件来写自己搭建的博客发现也更方便些了。下面记录下遇到的问题与解决方案。 快捷键 快捷键一开始我是想着自己适应,稍微改下一下常用的快捷键就行了,但是好多啊。。。所以我就试着插件库搜搜 idea,就发现果然有人做了 插件 于是安装上,基本跟 webstorm 的操作几乎一模一样,缺点就是 Ctrl+D 是整行添加,不是选区添加。 主题 先上效果图

2022年1月4日 · 1 分钟 · 诚哥博客

前后端分离开发工具YAPI部署记录

之前公司说要建立起前后端分离开发模式,而我只是刚毕业,让我负责建立起这个规范 ,虽然刚毕业还没去大厂待过,对我来说是个挑战,只能按我理解和网上的方案进行建立。在 Google 和 github 搜了好多项目,最终找到一个很好的工具,只要搭建在内网就能完美解决前后端分离开发的一些缺点。下面搭建看看 1.搭建 Yapi 的数据库 mongo 直接 docker 命令走起 docker run -d \ -p 27017:27017 \ --name mongo \ --restart=always \ -v /data/mongo:/data/db \ -e MONGO_INITDB_ROOT_USERNAME=mongo \ -e MONGO_INITDB_ROOT_PASSWORD=123456 \ mongo 2.自定义配置文件 yapi-config.json mkdir /data/yapi vim /data/yapi/yapi-config.json 填入配置(账号密码自己改) { "port": "3000", "adminAccount": "[email protected]", "timeout": 120000, "db": { "servername": "mongo", "DATABASE": "yapi", "port": 27017, "user": "mongo", "pass": "123456", "authSource": "admin" } } 3.初始化 YAPI 数据库索引及管理员账号 docker run -it --rm \ --link mongo:mongo \ --entrypoint npm \ --workdir /yapi/vendors \ -v /data/yapi/yapi-config.json:/yapi/config.json \ registry.cn-hangzhou.aliyuncs.com/anoyi/yapi \ run install-server 记录密码 ...

2021年12月17日 · 2 分钟 · 诚哥博客