自从前段时间转到 VScode,就没太在意它的调试功能，今天有空学习了下，记录下，另外记录下自己学到的一些调试基本技巧 VScode 调试 以前 VScode 调试都是通过一个插件来 Debugger for Chrome 调试的，但是随着 VScode 的更新， Debugger for Chrome 已成为历史，代替它的是 vscode-js-debug，已经内置在 VScode 里了，所以我们在 package.json 里就能看到它的身影 启动调试 点击 调试 选择启动脚本 dev 然后我们的服务就启动了 下断点 运行前端 使用 Ctrl+鼠标左键 打开调试页面，即可监听到调试内容 调试 可以看到所有断点页面的数值，太多也不好看，右键可以添加监视区 可以通过悬浮控制台进行按步执行，我是习惯用 F9 执行 然后监视区的数据就会按程序显示对应的值了，非常适合调试复杂的程序，总比一直 log 强吧 ...
在生产环境中 nginx 有很多安全方案，我在为生产环境部署中得到很多经验，收集到的一些常用配置，简单记录一下。 安装 Nginx 正常安全 Nginx 大家应该都会，但是各位要知道在安全要求很高的生产环境中，是无网络安装的，（当然有些有内网源就简单很多了），所以要自己上传文件上去安装，缺什么依赖没法用命令安装像是 yum install 或者 apt-get install 是无法使用的，这里简单说下，等有空再详细说下无网络安装，这里简单说下。 下载编译需要的库源码 安装顺序编译安装以下库源码即可安装 Nginx openssl pcre zlib Nginx 注意 Nginx 安装的时候配置下需要的库免得到时候重新编译安装 cd nginx-1.21.6 ./configure --with-http_ssl_module --with-http_gzip_static_module --with-http_stub_status_module --with-stream make make install 这样 Nginx 就算是安装好了 默认安装路径在 /usr/local/nginx 隐藏版本号 正常 Nginx 默认配置是会显示版本号的信息的如下 只需要在 Nginx 配置文件中（如 nginx.conf）的 http{} 加入以下参数即可 #隐藏版本号 server_tokens off; 然后显示就是这样的 完全不显示 Nginx 这个需要修改 Nginx 源码来实现，具体可以 Google 搜下 防止被嵌套 iframe 在 location / 下加入以下属性即可 ...
今天发现一个高达两万星 开源项目 RustDesk, 正如名字一样，这是一个用 Rust 编程语言开发的应用，据说这是一门执行效率比 go 高的语言，希望有机会接触接触，回到正题，看到开源了自制 远程桌面服务器 立马在我香港的服务器上搭建起来，然后连接测试后，立马卸载向日葵、ToDesk。 介绍 RustDesk 支持多个平台具体可以上 官网 查看, RustDesk 远程桌面软件，开箱即用，无需任何配置。完全掌控数据，不用担心安全问题。可以使用注册/中继服务器，或者自建，亦或者开发您的版本。我也用过很多远程软件，TeamViewer、AnyDesk、向日葵、ToDesk 各有优缺点吧。但肯定都没自建的服务器快。 部署自建服务器 官方文档 安装方式多种多样，但是我还是用 docker-compose 部署比较方便，毕竟不会影响到服务器环境还能在需要的时候修改配置，官方也有提供 docker-compose.yml 配置文件 提示: 注这里包括所有通过 docker 部署的容器，我并不推荐使用 docker 命令行去运行容器，我们测试的时候可以用 docker run 去运行容器，但是如果是一直使用的 如果时间长了，你想升级版本，如果你之前改过挂载路径端口这些除非你还记得命令，不然很容易导致配置很之前不一致，导致运行后出现数据丢失等情况。推荐用 docker-compose 写配置，哪怕只有一个服务我都会用 docker-compose 去写，然后记录到个人仓库中，然后时间长了，就会收集到很多方便自己使用的 docker-compose.yml 换服务器时 只需要改改配置中的密码等就能直接使用了 获取 docker-compose 脚本 # https://github.com/rustdesk/rustdesk-server/blob/master/docker-compose.yml version: "3" networks: rustdesk-net: external: false services: hbbs: container_name: hbbs ports: - 21115:21115 - 21116:21116 - 21116:21116/udp - 21118:21118 image: rustdesk/rustdesk-server:latest command: hbbs -r rustdesk.example.com:21117 # 这里的rustdesk.example.com:21117替换为自己服务器的域名:端口 volumes: - ./hbbs:/root networks: - rustdesk-net depends_on: - hbbr restart: unless-stopped hbbr: container_name: hbbr ports: - 21117:21117 - 21119:21119 image: rustdesk/rustdesk-server:latest command: hbbr volumes: - ./hbbr:/root networks: - rustdesk-net restart: unless-stopped 然后将文件放到服务器执行 # 同级下执行 docker-compose up -d ...
在项目浏览器兼容测试中，发现有很多兼容性的问题，大多数是用户较少的浏览器，如 2345 浏览器和 32 位的 360 极速兼容性较差，所以总不能人少就不去修复吧，当然 IE 是个例外（人多我也不去修）。（以下我自己记录，可能还有其他优秀写法欢迎指教） ?? 号 虽然这个号在现在用的比较多，但是兼容性还是不行，所以还是老实用回 || 但是得注意他们之间的区别 String 中的 replaceAll 在字符串中有两函数，其中 replaceAll 是在 ES12+后加入的，所有有些浏览器并不支持，所以改为 replace 的正则写法兼容性是最好的如 const str = "Rakers Rakers"; str.replaceAll("Rakers", "Rakers1024"); //Rakers1024 Rakers1024 str.replace(/Rakers/g, "Rakers1024"); //Rakers1024 Rakers1024 //使用正则的replace正则的形式结果是一致的 数组取值 在平常我们遇到可能为空的数组，又想用简单的式子读出来数组内容，又不想他报错，特别是写在前端页面的式子，报错就导致页面都加载不出来了 const arr = Math.random() > 0.5 ? [] : [1]; //一般写法 console.log(arr[0]); //在不知道是否返回空数组的情况下很容易报错 console.log(arr && arr.length > 0 ? arr[0] : undefined); //一般都这么写，但是会导致式子很长，特别是如果数组不是变量，而是很长的对象内函数值就更长了 console.log(arr?.at(0)); //这种应该是最短的了，而且不会报错 但是需要支持ES6语法
之前做动态路由的时候就发现路由加载的时候没有过渡的动画，想着能否给加个进度条，发现还真可以，马上给所有项目加上，网速再慢也能有过渡了 说明 我这里使用的是 nprogress 进度条来过渡，当然也可以用其他的，如 loading 等 安装 pnpm i nprogress 在 router.js 或者 main.js 中使用 //配置 NProgress.configure({ easing: "ease", // 动画方式 speed: 500, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickleSpeed: 200, // 自动递增间隔 minimum: 0.3, // 初始化时的最小百分比 }); //路由钩子进行设置 // 当路由进入前 router.beforeEach((to, from, next) => { // 每次切换页面时，调用进度条 NProgress.start(); // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了 next(); }); // 当路由进入后：关闭进度条 router.afterEach(() => { // 在即将进入新的页面组件前，关闭掉进度条 NProgress.done(); }); 效果 设置使用节流访问