PageSpy 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。 何时使用？任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候 ！一起来看下面的几个场景案例： 本地调试 H5、Webview 应用： 以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题； 远程办公、跨地区协同： 传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判； 用户终端上出现白屏问题： 传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现； 如何使用？为了数据安全和方便您的使用，我们提供完整的、开箱即用的部署方案。本地化部署完成后，顶部会出现 接入SDK 菜单，点击菜单查看如何在业务项目中配置并集成。 使用 Docker 部署 docker run -d --restart=always -p 67 ...

Markdown 是一种轻量级标记语言，它的设计初衷是为了让人们能够更加方便地编写格式化文本，同时又不需要像 HTML 那样使用复杂的标签和属性。它使用简单的符号标记不同的标题，引用、列表、代码块等，然后通过转换器转换成 HTML 文档，或者转换成其他格式的文档。 Markdown标题使用#表示，#的数量表示标题的级别，例如# 表示一级标题， 表示二级标题，以此类推。一般来说，我们只会使用到六级标题，因为六级标题以下的标题在网页中显示的字体都是一样的，没有区别。 # 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题 显示效果： 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 注意：#和标题之间要有空格 Markdown段落直接输入文本即可，段落之间使用空行分隔。 字体Markdown 可以使用以下几种字体： 用1个星号*或底线_表示斜体 用2个星号*或底线_表示粗体 用3个星号*或底线_表示粗斜体 语法格式： *斜体*_斜体_**粗体**__粗体__***粗斜体***___粗斜体___ ...

Multipass 是一款非常轻量级的虚拟机命令管理工具，它支持 Linux、Windows 和 macO S等多平台运行环境。 Multipass 安装在 官网 选择对应该的系统版本下载即可： 我这里选择的Windows版本 注意：你需要 Windows 10 专业版/企业版/教育版 v 1803 或更高版本，或任何带有 VirtualBox 的 Windows 10版本 安装之后，查看自己安装的版本 multipass version Multipass使用创建虚拟机 首先查看可以下载使用的 Ubuntu 镜像 multipass find 运行成功后，可以看到对应的镜像列表，包含各种版本的。 启动实例 multipass launch --name foo 然后下载最新版的 Ubuntu 镜像，之后我们就可以直接使用了。 multipass exec foo -- lsb_release -a 操作虚拟机 查看虚拟机列表 multipass list 查看虚拟机信息 multipass info --all 进入虚拟机使用下面的命令查看虚 ...

如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。 JSON.stringify()使用JSON.stringify()方法：如果对象为空，JSON.stringify()方法将返回{}。 const obj = {};const isEmpty = JSON.stringify(obj) === '{}';console.log(isEmpty); Object.entries()使用Object.entries()方法：如果对象为空，Object.entries()方法将返回一个空数组。 const obj = {};const isEmpty = Object.entries(obj).length === 0;console.log(isEmpty); Object.values()使用Object.values()方法：如果对象为空，Object.values()方法将返回一个空数组。 const obj = { ...

以下是一些 JavaScript 中常用的规则校验或过滤方法 数据过滤手机号码隐藏中间4位function phoneHideMiddle(val) { if (val) { return `${val.substring(0, 3)}****${val.substring(val.length - 4)}` } else { return ""; }} 保留两位小数function keepTwoNum(val) { val = Number(val); return val.toFixed(2);} 每三位逗号隔开,后面补两位小数，多用于金额数字function floatThree(value) { // console.log(value) value = "" + value; if (!value) return ' ...

通常指的是那些能够在一行代码内实现复杂功能或解决困难问题的 JavaScript 代码片段。这些代码通常具有高度的创造性和效率，可以大大简化代码的编写过程。欢迎留言补充 数组乱序在使用需要某种程度的随机化的算法时，你会经常发现洗牌数组是一个相当必要的技能。下面的片段以O(n log n)的复杂度对一个数组进行就地洗牌。 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)// 测试console.log(shuffleArray(arr)) 复制到剪贴板在Web应用程序中，复制到剪贴板因其对用户的便利性而迅速流行起来。==注意：根据caniuse，该方法对93.08%的全球用户有效。所以必须检查用户的浏览器是否支持该API。为了支持所有用户，你可以使用一个输入并复制其内容。== const copyToClipboard = (text) => naviga ...

GitHub Pages 是一个免费的静态网页托管服务，你可以使用它来部署你的静态网页。 GitHub Pages 的优点 使用零成本： Github Pages 集成在 Github 中，直接和代码管理绑定在一起，随着代码更新自动重新部署，使用非常方便； 免费域名： Github Pages 提供免费的 <username>.github.io 二级域名，也可以绑定自己的域名； 无数量限制： Github Pages 没有使用的数量限制，每一个 repository 都可以部署为一个静态网站； 一、创建一个GitHub仓库并配置pages1、首先，你需要创建一个 GitHub 仓库来存储你的网页文件。你可以在 GitHub 上创建一个新的仓库，或者将现有的仓库转换为 GitHub Pages 仓库。 2、输入username.github.io作为存储库名称。替换username为您的 GitHub 用户名。例如，如果您的用户名是FairlyHe，则存储库名称应该是FairlyHe.github.io。 3、 在您的存储库名称下，单击 “设置”。如果您看不到“设 ...

jsDelivr 是一个免费开源的 CDN 解决方案，用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。 在GitHub上创建仓库在GitHub上创建一个新的仓库，用于托管你的静态资源文件。如果你已经有了一个仓库，可以跳过这一步。可以通过新建文件夹区分不同的资源文件，也可以将所有资源文件放在同一个文件夹中。 上传资源文件到对应的仓库目录下降你的资源上传到对应的仓库目录下，然后提交到GitHub。确保文件路径的正确性，以便后续的CDN加速中能够正确的引用这些资源。 获取资源文件的URL地址在Markdown语法中，通过指定URL地址来引用图片。格式为  参数 说明 alt text 图片无法显示时所显示的替代文本 {username} GitHub用户名称 ...

flex.css是一个轻量级的 CSS 框架，用于快速构建灵活的响应式布局。它提供了一种简单而直观的方式来实现常见的 Flexbox 布局模式，无需深入了解 Flexbox 的细节。 安装 flex.css你可以通过以下两种方式安装 flex.css NPMnpm install flex.css --save 下载git clone https://github.com/lzxb/flex.css.git 使用 flex.css将dist目录下的css文件引入到你的页面中，根据你的需要引入flex.css 使用flex属性匹配data-flex.css 使用data-flex属性匹配（ React 使用）如果使用了webpack打包，npm安装后，并且配置了ES6编译器的话，flex 属性匹配可以直接使用：import ‘flex.css’;data-flex 属性匹配可以直接使用( React 使用)import ‘flex.css/dist/data-flex.css’; <!-- flex属性匹配，简单的子元素居中例子： --><d ...

本文介绍了如何使用Vue快捷打包并部署到服务器。 准备工作#安装scp2npm install scp2 --save-dev#下面两个插件是部署的时候控制台美化所用 可有可无npm install oranpm install chalk 第一步 deploy.js在项目根目录下创建一个deploy.js文件，内容如下： 'use strict'// 引入scp2var client = require('scp2');// 下面两个插件是部署的时候控制台美化所用 可有可无const ora = require('ora');const chalk = require('chalk');const spinner = ora(chalk.green('正在发布到服务器...'));spinner.start();client.scp('./dist/', { // 本地打包文件的位置，根据项目的需求修改 "host": ...